Les outils
Les guides de style peuvent être configurer avec des outils comme ESLint ou standard JS.
![](https://www.oliv134.net/wp-content/uploads/2021/03/standardjs-1-260x300.png)
standard JS
Standard JS est un module qui permet d’identifier les erreurs et problèmes de style, d’appliquer un guide selon 4 modèles (standard, semistandard, standardx or ts-standard) et de formater notre code javascript. Il utilise ESLint mais n’a pas de fichier de configuration, ce qui rend son utilisation facile.
standard JS n’ajoute pas de ; en fin de ligne. Si vous souhaitez les ajouter, vous devez installer semistandard.
Ici nous utilisons semistandard.
1- Installation dans le projet.
npm i -D semistandard
Ajoutez un script dans package.json
"scripts": { //... "lint": "standard --fix" }
Maintenant standardjs peut fixer notre code javascript:
npm run lint
Si vous voulez désactivez le contrôle de certaines variables globales comme describe et it utiliser par mocha lors de tests unitaires, vous pouvez ajoutez dans le package.json
{ //... "standard": { "globals": ["describe", "it"] } }
2 – Intégration dans vsCode.
Installez l’extension Standard JS de Sam Chen.
Afin d’exécuter standard JS à chaque enregistrement d’un fichier javascript et de désactivez le contrôle de certaines variables globales, ajoutez à .vscode/settings.json
//... "javascript.validate.enable": false, "standard.engine":"semistandard", "standard.autoFixOnSave": true
3 – Webpack
Installer le standard-loader
npm i -D standard-loader
Ajouter une règles au webpack.config.js
// ... module: { rules: [ { // set up standard-loader as a preloader enforce: 'pre', test: /\.jsx?$/, loader: 'standard-loader', exclude: /(node_modules|bower_components)/, options: { // config options to be passed through to standard e.g. parser: 'parser": "@babel/eslint-parser' } }, // other loaders... ] }
![](https://www.oliv134.net/wp-content/uploads/2021/03/prettier-eslint.png)
ESLint + Prettier
source: Dev Thery – VSCode + ESLint + Prettier. Comment bien configurer le tout
1- Installation dans le projet.
Il faut installer prettier, ESLint, un configurateur et un plugin ESLint-Prettier.
npm i -D prettier eslint eslint-plugin-import eslint-config-prettier eslint-plugin-prettier
Pour initialiser le module:
npx eslint --init
Il est créé un fichier .eslintrc.json
{ "env": { "browser": true, "commonjs": true, "es2021": true }, "extends": ["airbnb-base", "prettier"], "plugins": ["prettier"], "parserOptions": { "ecmaVersion": 12 }, "rules": { "prettier/prettier": "error", "no-console": 1 } }
Le fichier .prettierrc permet de modifier la configuration.
{ "semi": false, "tabWidth": 2, "singleQuote": true }
2 – Intégration dans vsCode.
Installez les extensions ESLint de Dirk Baeumer et Prettier.
Afin d’exécuter standard JS à chaque enregistrement d’un fichier javascript et de désactivez le contrôle de certaines variables globales, ajoutez à .vscode/settings.json
{ "editor.formatOnSave": true, "editor.tabSize": 2, "[javascript]": { "editor.formatOnSave": false }, "editor.codeActionsOnSave": { "source.fixAll": true } }