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.