JavaScript + Flow

Flow est un outil d'analyse statique de code permettant d'ajouter la notion de vérification de typage au JavaScript, par inférence de type.

Tandis qu'ESLint est porté sur la vérification de règles JavaScript (code style, best-practices), Flow permet de définir et de vérifier les types des données manipulées en JavaScript :

• Avec l'utilisation de commentaires d'annotations
• En ajoutant directement les types comme en TypeScript, puis en rajoutant à Babel le plugin de suppression des types à la compilation en JS

La vidéo suivante résume les objectifs et outils que propose Flow.

Flow peut être utilisé en CLI et / ou en tant que plugin VSCode pour lancer une validation de types.

Ajouter EsLint avec auto-fix sur un projet VueJS avec VSCode

Pour ajouter EsLint avec l'option de fix automatique des erreurs dans des fichiers .vue, sous l'éditeur VSCode, voici les étapes à suivre :

1. Dans le projet VueJS, installer les modules suivants avec un npm install --save-dev :
   

   "eslint"
   "eslint-config-standard"
   "eslint-plugin-import"
   "eslint-plugin-node"
   "eslint-plugin-promise"
   "eslint-plugin-standard"
   "eslint-plugin-vue"
   

2. Toujours dans le projet, créer un fichier .eslintrc avec le contenu suivant :
   

   module.exports = {
       parserOptions: {
           parser: 'babel-eslint',
           sourceType: 'module'
         },
         env: {
           browser: true,
         },
         // Extends default rules with eslint-plugin-vue plugin rules
         // Extend current rules with standard rules : https://github.com/standard/eslint-config-standard
         extends: [
           'plugin:vue/recommended',
           // https://github.com/standard/standard/blob/master/docs/RULES-en.md
           'standard'
         ],
         // Lint *.vue files
         plugins: [
           'vue'
         ],
         rules: {
           // allow async-await
           'generator-star-spacing': 0,
         }
   }
   

   
   On définit comme parser "babel-eslint", on utilise le plugin vue pour rajouter des règles de linting propres à vue, en plus des règles standards.
3. Dans VSCode, télécharger l'extension ESLint, puis mettre à jour l'option validate pour linter les fichiers .vue, dans les settings du plugin ESLint.