Les guides de style, linteurs et formateurs javascript

par

Les outils

Les guides de style peuvent être configurer avec des outils comme ESLint ou standard JS.

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...
    ]
  }

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
  }
}

Laisser un commentaire