Entrée cartographique de cartes.gouv.fr

L'entrée cartographique de cartes.gouv.fr est la page d'entrée principale de cartes.gouv.fr : elle est constituée d'une interface cartographique permettant de visualiser et manipuler les données de la Géoplateforme.

---

vue-dsfr-project

Ce gabarit possède tous les outils configurés pour développer un projets Vue 3 et VueDsfr avec Vite.

Configuration recommandée

• Visual Studio Code avec ces extensions :
  • VSCode
  • Volar (and disable Vetur)
  • TypeScript Vue Plugin (Volar)
  • ESLint
  • Prettier
  • Vue Ecosystem Snippets

Support de TypeScript pour les fichiers .vue

TypeScript ne sait pas gérer les informations de type pour les imports dans les fichiers .vue par défault, donc la CLI tsc est remplacée par vue-tsc pour la vérification des types. Dans les éditeurs, il est besoin de l’extension TypeScript Vue Plugin (Volar) pour rendre le service du langage TypeScript capable de gérer les types des fichiers .vue.

Si le plugin TypeScript ne vous semble pas assez performant, Volar a aussi implémenté un mode Take Over qui est plus performant. Vous pouvez l’activer en suivant les étapes suivantes :

1. Désactiver l’extension TypeScript incluse
   1. Lancer Extensions: Show Built-in Extensions depuis la palette de commandes VSCode
   2. Trouver TypeScript and JavaScript Language Features, cliquer avec le bouton droit et sélectionner Disable (Workspace)
2. Recharger la fenêtre VSCode en lançant Developer: Reload Window depuis la palette de commandes.

Installer les dépendances

npm install

Compilation et Hot-Reload pour le développement

npm run dev

Vérification des types, Compilation et Minification pour la Production

npm run build

Voir l'application avec le code de production

npm run preview

Déployer le code de production

Déployer le contenu du dossier dist après avoir généré le code de production.

Vérifier la syntaxe et le formattage avec ESLint

npm run lint

Lancer les Tests Unitaires avec Vitest

npm run test:unit

Lancer les tests de End-to-End avec playwright

npm install -D @playwright/test@latest
# Also download new browser binaries and their dependencies:
npx playwright install --with-deps

Avec une interface graphique

npm run test:e2e:ui

Sans interface graphique (pour la CI)

npm run test:e2e

En mode debug

npm run test:e2e:debug

Pour information,

On lance les tests end-to-end avec le code de production et on utilise un serveur externe (serve) autre que le serveur interne de Vite.

Le rapport

npx playwright show-report

Analyse statique du code avec ESLint

npm run lint