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.

Tracking des changements sous VueJS

VueJS, en tant que librairie JS MVVM, intègre le  two-way data-binding. Ainsi, lorsque que le view modèle (que l'on appelera vm) change, la vue liée est mise à jour (re-render).

Dans VueJS, la partie view modèle se situe au niveau de la propriété "data".

new Vue({
    data: {
        message: 'Un message'
    }
});

Pour tracker tout changement sur les propriétés de data, VueJS utilise le mécanisme de getters / setters introduit dans ES5, via Object.defineProperty.

A l'initialisation de l'instance de VueJS, des getters / setters sont crées pour toutes les propriétés contenue dans data.

Dans l'exemple ci-dessus, l'instance de VueJS contient une propriété message. A son initialisation, des getters et setters sont crées pour la propriété message.

Ainsi, toute modification d'un propriété contenue dans data se fait implicitement via son setter associé, qui notifie un watcher chargé de déclencher la mise à jour de la vue. VueJS utilise par ailleurs le virtual DOM afin de modifier uniquement l'élement du DOM impacté.

https://vuejs.org/v2/guide/reactivity.html

L'utilisation des getters / setters pour tracker toute modification de la data implique aussi quelques restrictions. En effet, la création des getter / setter (qui servent d'observateurs) se fait à l'initialisation de l'instance de VueJS. Ainsi, une fois que la vm est instanciée, il n'est plus possible de rajouter des propriétés trackable dans data, sans passer par des méthodes spéciales de la librairie.

C'est pourquoi l'une des bests-practice de VueJS consiste à déclarer toutes les propriété de la vm directement dans la propriété data, en les initialisant à null par exemple, afin de les rendre trackable.