Pour ajouter EsLint avec l'option de fix automatique des erreurs dans des fichiers .vue, sous l'éditeur VSCode, voici les étapes à suivre :
- 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"
- 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.
- 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.
