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

落日映苍穹つ 2022-11-14 11:52 917阅读 0赞

### 文章目录 ###

*  一、eslint
 *  二、安装
 *   *  1.安装依赖包eslint
     *  2.设置package.json文件
     *  3.初始化eslint
     *  4.检验代码
 *  三、遇到的问题
 *   *  1.‘xxx‘ is missing in props validation
     *  2.Using this.refs is deprecated
     *  3.更多rules配置：

# 一、eslint #

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

[官方使用说明：https://eslint.org/][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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5OTAzNTY3_size_16_color_FFFFFF_t_70]  
默认选择即可

创建完后根目录会出现.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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5OTAzNTY3_size_16_color_FFFFFF_t_70 1]

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5OTAzNTY3_size_16_color_FFFFFF_t_70 2]

可以在.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

![在这里插入图片描述][20210329101458778.png]

解决办法：  
修改定义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][https_blog.csdn.net_qq_39903567_article_details_115294455]

[https_eslint.org]: https://eslint.org/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5OTAzNTY3_size_16_color_FFFFFF_t_70]: /images/20221022/4b3eae2c783b4df38aae810a4f8b7578.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5OTAzNTY3_size_16_color_FFFFFF_t_70 1]: /images/20221022/c7b2ebcbb75644a9816e905febd8b7e3.png
[eslint_http_eslint.cn_docs_rules]: http://eslint.cn/docs/rules/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5OTAzNTY3_size_16_color_FFFFFF_t_70 2]: /images/20221022/854f3353d85841ae80192392b94ebb5a.png
[20210329101458778.png]: https://img-blog.csdnimg.cn/20210329101458778.png
[https_blog.csdn.net_qq_39903567_article_details_115294455]: https://blog.csdn.net/qq_39903567/article/details/115294455