
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
Commentaire : 1
Nouvel Article: VueJS : Eslint sur Atom et Visual Studio Code https://t.co/iLRp7zNbPK #throrinstudio #blog #atom #eslint #VSCode