VueJS : Eslint sur Atom et Visual Studio Code

La plupart des équipes de développement utilisent des règles de codage pour coder de la même façon et faciliter la relecture du code entre eux. Pour cela, des utilitaires comme ESLint existent.

Ici je ne vais pas revenir sur l’installation d’ESLint mais plus sur comment configurer convenablement Atom et Visual Studio Code pour pouvoir utiliser ESlint avec les fichiers .vue de VueJS. De base ce n’est malheureusement pas le cas.

Prérequis

Avant toute chose, vous devrez avoir d’installé et d’activé sur votre projet le plugin eslint-plugin-html soit directement de votre fichier .eslintrc soit au travers des règles utilisées. Par exemple, les stylesguides que j’utilise incluent directement le plugin HTML.

Atom

Pour Atom, je vous conseille d’utiliser le plugin linter-eslint qui permet d’utiliser et de configurer facilement ESLint au sein d’Atom. Qui plus est, ce plugin est compatible avec les plugins Linter et atom-ide-ui.

Quand le plugin Linter-eslint est activé, vous aurez juste à faire ceci :

• Activer l’option Lint HTML files
• Editer la liste des scopes et rajouter text.html.vue

Normalement, après avoir relancé Atom, vous devriez avoir Eslint de fonctionnel avec les fichiers .vue.

Visual Studio Code

Pour Viual Studio Code, je vous conseille d’utiliser le plugin ESLint.

Quand le plugin ESLint est activé, vous devrez éditer les configurations utilisateur de l’éditeur en rajoutant ceci dans le json existant :

{
    "eslint.validate": [
        "javascript",
        "javascriptreact",
        "vue"
    ]
}

Normalement, après avoir relancé Visual Studio Code, vous devriez avoir Eslint de fonctionnel avec les fichiers .vue

 atom eslint VSCode VueJS