前端项目(React)接入eslint静态代码检查及一些问题解决方案

一、eslint

eslint是前端js静态代码检查工具，帮助我们规范代码和发现一些潜在的bug

官方使用说明：https://eslint.org/

二、安装

确保已经安装node环境

1.安装依赖包eslint

npm install eslint --save-dev

2.设置package.json文件

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

3.初始化eslint

本例以react项目为例，vue或其他项目按照提示选择即可

npm run lint:create

默认选择即可

创建完后根目录会出现.eslintrc.js文件

.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.检验代码

npm run lint

第2行第5个字符，报错规则为no-unused-vars ，变量没有被使用过
第3行第13个字符，报错规则为no-undef，变量没有定义
eslint规则表查看http://eslint.cn/docs/rules/

三、遇到的问题

1.‘xxx‘ is missing in props validation

‘xxx‘ is missing in props validation和 组件变量 is assigned a value but never used

可以在.eslintrc.js文件的rules里面配置自己想要的规则来解决

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

2.Using this.refs is deprecated

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

解决办法：
修改定义ref，和使用的地方
原来：

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

修改为：

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

原因是：官方已将ref的（推荐）使用方式由string调用，修改为回调函数的形式 。

3.更多rules配置：

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

本文链接:https://blog.csdn.net/qq_39903567/article/details/115294455