Explication détaillée des étapes eslint de configuration create-react-app

Cette fois, je vais vous donner une explication détaillée des étapes de configuration d'eslint dans create-react-app Quelles sont les précautions pour configurer eslint dans create-react-app Voici un cas pratique, jetons un oeil.

Utilisez eslint et editorconfig pour normaliser le code

Pourquoi les utiliser :

1. Les normes de code sont propices à la collaboration en équipe

2. Les spécifications manuelles pures prennent du temps et demandent beaucoup de travail et la précision ne peut pas être garantie

3. Il peut coopérer avec l'éditeur pour rappeler automatiquement les erreurs et s'améliorer efficacité du développement

eslint

Avec la version ECMAScript constamment mise à jour, l'outil Js lint dispose de plug-ins riches et peut appliquer des spécifications Les règles. sont très riches et peuvent répondre aux besoins de la plupart des équipes.

eslint coopère avec git

Afin de contrôler au maximum les spécifications de chacun, nous pouvons utiliser git hook pour appeler eslint pour la vérification des spécifications du code lorsque git valide le code Le code canonique ne peut pas être soumis à l'entrepôt.

editorconfig

Différents éditeurs auront certaines différences dans le format du texte. Si certaines normes ne sont pas unifiées, elles peuvent être mises à jour à chaque fois que vous coopérez avec d'autres. il y aura beaucoup d'erreurs dans le code - webstorm prend automatiquement en charge le fichier de configuration editorconfig.

Première installationeslintnpm i eslint car create-react-app est déjà installé par défaut

  "babel-eslint": "7.2.3",
  "eslint": "4.10.0",
  "eslint-config-react-app": "^2.1.0",
  "eslint-loader": "1.9.0",
  "eslint-plugin-flowtype": "2.39.1",
  "eslint-plugin-import": "2.8.0",
  "eslint-plugin-jsx-a11y": "5.1.1",
  "eslint-plugin-react": "7.4.0",

Pour la configuration personnalisée que nous souhaitons, nous l'installons comme suit

npm i babel-eslint \
\ eslint-config-airbnb eslint-config-standard \
\ eslint-loader \
\ eslint-plugin-import \
\ eslint-plugin-jsx-a11y \
\ eslint-plugin-node \
\ eslint-plugin-promise \
\ eslint-plugin-react \
\ eslint-plugin-standard -D

Nous créons un nouveau fichier .eslintrc dans le répertoire racine pour créer une spécification standard pour l'ensemble du projet

{
 "extends": "standard"
}

Le projet principal est un projet front-end, nous créons donc un nouveau fichier .eslintrc dans le dossier frontal, allez ici Standardiser le code client. De nombreuses règles sont différentes de celles de nodejs. Ici, des spécifications plus strictes sont utilisées pour exiger le code client.

La valeur correspondant à la valeur configurée : 0 : off 1 : avertissement 2 : erreur

{
 "parser": "babel-eslint",
 "env": {
  "browser": true,
  "es6": true,
  "node": true
 },
 "parserOptions": {
  "ecmaVersion": 6,
  "sourceType": "module"
 },
 "extends": "airbnb",
 "rules": {
  "semi": [0],
  "react/jsx-filename-extension": [0],
  "jsx-a11y/anchor-is-valid": [0]
 }
}

Utilisez babel-eslint pour analyser le code. L'environnement de définition est le navigateur et es6, qui. inclura des variables publiques, webpack a besoin de certaines variables d'environnement du nœud, parserOptions définit la version et la méthode du mode jsmodule est écrite.

Parce que vous devez vérifier le code avant chaque compilation, vous devez également configurer webpack, qui est la valeur par défaut de create-react-app

   {
    test: /\.(js|jsx|mjs)$/,
    enforce: 'pre',
    use: [
     {
      options: {
       formatter: eslintFormatter,
       eslintPath: require.resolve('eslint'),
       
      },
      loader: require.resolve('eslint-loader'),
     },
    ],
    include: paths.appSrc,
   },

Nous voulons bloquer le fichier node_modules Le code sous le dossier

exclude:[path.resolve(__dirname, '../node_modules')]

Créer un nouveau fichier .editorconfig dans le répertoire racine du projet Webstom a la configuration par défaut

1. root = true Répertoire racine du projet.

2. [*] Tous les fichiers appliquent cette règle

3. charset = mode d'encodage utf-8

4. indent_style = space Utiliser les tabulations de style de tabulation et l'espace

5. indent_size = 2

6. end_of_line = mode de fin de ligne lf

7. insert_final_newline = true Enregistre automatiquement la dernière ligne à la fin de la ligne en tant que ligne vierge

8. trim_trailing_whitespace = true Supprime automatiquement les espaces après la fin d'une ligne

eslint ne détecte pas cette ligne de code // eslint-disable-line

eslint ne détecte pas ce fichier, au début /* eslint-disable */ à la fin du fichier /* eslint-enable */

installez npm i husky -D

puis l'ajout d'un hook git aux scripts package.json appellera cette commande avant d'exécuter git commit

"lint": "eslint --ext .js --ext .jsx src/",
"precommit": "npm run lint"

git commit pour forcer l'exécution d'eslint code passé

Je crois que vous avez lu le cas dans cet article. Après avoir maîtrisé la méthode, veuillez prêter attention aux autres articles connexes sur le site Web php chinois pour un contenu plus passionnant !

Lecture recommandée :

Comment utiliser le composant d'entrée

Comment utiliser le plug-in d'installation dans des projets réels

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!