Ce tuto permet d'obtenir avec VSCode un formatage (ESLint et Prettier) automatique au moment de l'enregistrement du fichier

1. Se mettre à la racine du projet

2. Créer un fichier de base package.json pour gérer la configuration du projet : npm init --yes

3. Installer ESLint (globalement ou pas) si ce n'est pas déjà fait : npm install eslint -g

4. Initialiser eslint dans votre projet afin de pouvoir tirer parti de la puissance d'eslint : eslint --init Il va nous poser différentes questions concernant le projet pour renseigner correctement le fichier .eslintrc Attention, comme JSXGraph tourne en frontend, on choisira browser à la place de node pour l'interpréteur. Par la suite, vous pourrez évidemment modifiez votre fichier de configuration eslint .eslintrc dans votre projet :

   {
    "env": {
        "browser": true,
        "es2021": true
    },
    "extends": ["airbnb-base"],
    "parserOptions": {
        "ecmaVersion": "latest",
        "sourceType": "module"
    },
    "rules": {
        "no-unused-vars": "warn",
        "no-console": "warn",
        "func-names": "off"
    }
   }
   

5. Lier votre eslint à votre compilateur/transpileur de projet Ajouter dans package.json au niveau de scripts, "LeNomQuonVeut": eslint ./ Puis faire npm run LeNomQuonVeut voir : https://www.youtube.com/watch?v=lGCHjQl6XLw et https://www.youtube.com/watch?v=SydnKbGc7W8 lire : https://dev.to/devdammak/setting-up-eslint-in-your-javascript-project-with-vs-code-2amf

6. Après avoir installé l'extension Prettier, on ajoute des règles de Prettier pour qu'elles s'imposent (en cas de conflit) au style choisi dans ESLint :

   • npm install --save-dev eslint-config-prettier eslint-plugin-prettier

     Cela installe des modules et ajoute dans le fichier package.json les lignes suivantes :

     "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-prettier": "^4.0.0",
     

   • Ensuite on crée un fichier prettierrc.json et on choisi les préférences pour l'extension Prettier :

     {
     "singleQuote": true,
     "semi": false,
     "tabWidth": 2
     }
     

   Attention, on vient de dire à Prettier que l'on ne veut pas de point-virgule à la fin d'une ligne. Ce qui va contre le style airbnb-base choisi dans ESLint. On a donc un conflit à régler.

   Pour cela, il y a deux choses à faire :

   • Dans .eslintrc, on ajoute :

        "extends": [
           "airbnb-base",
           "prettier"],
           "plugins": ["prettier"]
     
        "rules": {
       "prettier/prettier": "error",
     

   • Pour que le formatage ait lieu automatiquement en moment de l'enregistrement des modifications, il faut dire à VSCode comment gérer les conflits en allant dans le réglage de VSCode en éditant settings.json et ajouter :

        {
           "editor.tabSize": 2,
           "editor.formatOnSave": true,
           "[javascript]": {
           "editor.formatOnSave": false,
           },
           "editor.codeActionsOnSave": {
              
              "source.fixAll": true
           }
        }