Inspection de code statique d'eslint d'accès au projet frontal (React) et quelques solutions aux problèmes

Un, eslint

eslint est un outil d'inspection de code statique js frontal qui nous aide à standardiser le code et à trouver des bogues potentiels

Instructions officielles: https://eslint.org/

Deux, installation

Assurez-vous que l'environnement de nœud a été installé

1. Installez le package de dépendances eslint

npm installer eslint --save-dev

2. Configurez le fichier package.json

"scripts":{
    ...
    "lint":"eslint src",
    "lint:create":"eslint --init"
}

3. Initialisez eslint

Dans cet exemple, le projet react est pris comme exemple, vue ou d'autres projets peuvent être sélectionnés en fonction des invites

npm run lint:create

La sélection par défaut est correcte

Après la création, le fichier .eslintrc.js apparaîtra dans le répertoire racine

.eslintrc.js

module.exports = {
    "env": {
        "browser": true,
        "es2021": true
    },
    "extends": [
        "eslint:recommended",
        "plugin:react/recommended"
    ],
    "parserOptions": {
        "ecmaFeatures": {
            "jsx": true
        },
        "ecmaVersion": 12,
        "sourceType": "module"
    },
    "plugins": [
        "react"
    ],
    "rules": {
    }
};

4. Vérifiez le code

npm run charpie

Cinquième caractère de la ligne 2, la règle d'erreur est no-unused-vars et la variable n'a pas été utilisée
. Le 13e caractère de la ligne 3, la règle d'erreur est no-undef et la variable n'est pas définie dans la
règle eslint table. Voir http: // eslint. cn / docs / rules /

Troisièmement, les problèmes rencontrés

1.'xxx 'est manquant dans la validation des accessoires

'xxx' est manquant dans la validation des accessoires et les variables de composant reçoivent une valeur mais jamais utilisées

Vous pouvez configurer les règles que vous souhaitez dans les règles du fichier .eslintrc.js à résoudre

 "rules": {
        "react/prop-types": 0 //防止在react组件定义中缺少props验证
    }

2.L'utilisation de this.refs est obsolète

Using this.refs is deprecated
Using string literals in ref attributes is deprecated

Solution:
modifiez la définition ref, et l'utilisation de l'
original local :

html:
<div ref="testDiv" />
js:
const div = this.refs.testDiv;

Changer en:

html:
<div ref={(v) => { this.testDiv = v; }} />
js:
const div = this.testDiv;

La raison est la suivante: le fonctionnaire a changé l'utilisation (recommandée) de ref pour qu'il soit appelé par une chaîne et l'a changé en une fonction de rappel.

3. Plus de configuration de règles:

"rules": {
        "eqeqeq": 2, //必须使用 === 和 !==
        "no-empty-function": 2, //禁止空函数
        "no-multi-spaces": 2, //禁止使用多个空格
        "no-trailing-spaces": 2, //禁止禁用行尾空格
        "space-infix-ops": 2, // 要求操作符周围有空格
        "space-in-parens": 2, //强制在圆括号内使用一致的空格
        "no-var":2, //要求使用 let 或 const 而不是 var,
        "no-unused-vars": 2, //禁止出现未使用过的变量
        "react/prop-types": 0 //防止在react组件定义中缺少props验证
    }

Lien vers cet article: https://blog.csdn.net/qq_39903567/article/details/115294455