Proyecto de front-end (React) accede a la inspección del código estático de eslint y algunas soluciones de problemas

Uno, eslint

eslint es una herramienta de inspección de código estático js de front-end que nos ayuda a estandarizar el código y encontrar algunos errores potenciales

Instrucciones oficiales: https://eslint.org/

Dos, instalación

Asegúrese de que se haya instalado el entorno de nodo

1. Instale el paquete de dependencia eslint

npm install eslint --save-dev

2. Configure el archivo package.json

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

3. Inicializar eslint

En este ejemplo, el proyecto de reacción se toma como ejemplo, vue u otros proyectos se pueden seleccionar de acuerdo con las indicaciones.

npm run lint:create

La selección predeterminada está bien

Después de la creación, el archivo .eslintrc.js aparecerá en el directorio raíz.

.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. Verifique el código

npm ejecutar pelusa

El quinto carácter de la línea 2, la regla de error es no-unused-vars y la variable no se ha utilizado
. El decimotercer carácter de la línea 3, la regla de error es no-indefinido y la variable no está definida en la
regla eslint tabla. Consulte http: // eslint. cn / docs / rules /

Tres, los problemas encontrados

1.'xxx 'falta en la validación de accesorios

'xxx' falta en la validación de accesorios y a las variables de los componentes se les asigna un valor pero nunca se usan

Puede configurar las reglas que desee en las reglas del archivo .eslintrc.js para resolver

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

2.El uso de this.refs está en desuso

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

Solución:
Modifique la referencia de definición y el uso del
original local :

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

cambie a:

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

La razón es: el funcionario ha cambiado el uso (recomendado) de ref para ser llamado por cadena y lo cambió a la forma de una función de devolución de llamada.

3. Más configuración de reglas:

"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验证
    }

Enlace a este artículo: https://blog.csdn.net/qq_39903567/article/details/115294455