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

一、eslint

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

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

二、安装

确保已经安装node环境

1.安装依赖包eslint

npm install eslint --save-dev

2.设置p前端项目(React)接入eslint静态代码检查及一些问题解决方案
默认选择即可

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

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

第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

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

可以在.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 
前端项目(React)接入eslint静态代码检查及一些问题解决方案

解决办法:
修改定义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

版权声明:玥玥 发表于 2021-03-30 10:56:21。
转载请注明:前端项目(React)接入eslint静态代码检查及一些问题解决方案 | 女黑客导航