在React项目中使用Eslint代码检查工具及常见问题
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了在React项目中使用Eslint代码检查工具及常见问题，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含3521字，纯文字阅读大概需要6分钟。
内容图文
背景
最近使用 create-react-app 创建了一个项目。但是众所周知的是，这个脚手架创建的项目并没有默认加入 Eslint 等 lint 插件来规范代码。
考虑到项目中很多项目没有使用类似的代码检查工具，为了规范开发。这次有必要记录一下流程。
使用 Eslint 流程
1. 安装 Eslint
首先，先安装 Eslint 到项目本地（全局安装亦可）。
npm --save-dev install eslint
安装完成之后，我们先创建基础的 .eslintrc.yml （建议使用 .yml 格式，json/js 格式也可以）：
./node_modules/.bin/eslint --init ## 全局安装，可用 `eslint --init`
输入上述命令之后，会出现询问界面：
? How would you like to configure ESLint? (Use arrow keys)
Use a popular style guide
? Answer questions about your style
Inspect your JavaScript file(s)
选择“Answer questions about your style”，后面有一些问题，根据实际进行选择。
上述操作完成之后，会帮我们创建一个基础的 .eslintrc.yml 文件。我们也可以使用 touch .eslintrc.yml 自行创建。
2. 安装 babel-eslint
由于项目中需要使用到 ES2015 的语言规范，因此需要安装 babel-eslint ：
npm install --save-dev babel-eslint
安装完成之后，我们需要在 .eslintrc.yml 中修改配置
parser: "babel-eslint"
【注意】：若没有该项，曾手动增加
3. 安装 eslint-plugin-react
项目中需要使用 React 框架，需要识别出 React 特定的语法规则和要求，需要安装 eslint-plugin-react ：
npm install --save-dev eslint-plugin-react
安装完成之后，我们需要引入该 Eslint 组件。修改 .eslintrc.yml 配置：
plugins: - react
特别提醒：YML语法规则中表示数组格式：- 开头，后面为数组元素，如此处的 react。属性值中若不含特殊字符，可以不加上双引号。
4. 安装 Airbnb
到现在为止，我们只使用了一些默认创建的校验规则，为了避免我们自己按照 Eslint 的规则一个一个来个性化定制规则，很是麻烦。这里我们使用 GitHub - airbnb/javascript: JavaScript Style Guide 规范来定义规则。这就需要安装如下插件：
npm i --save-dev eslint-config-airbnb eslint-plugin-import eslint-plugin-jsx-a11y
接着，我们修改 .eslintrc.yml 配置，将扩展插件变更为 Airbnb ：
extends: "airbnb"
到此，静态代码检查工具安装结束。
检查 Git 提交的代码
除了静态代码检查，我们还设置一道关卡来保证提交的代码符合规范。这就需要使用到我们主角 pre-commit 钩子。
这里假设项目中使用 Git 进行代码的提交操作。
首先在 package.json 中增加如下脚本指令：
{
"scripts": {
"lint": "eslint --ext .js --ext .jsx src"
}
}
这里将检查目录 src 下面所有以 .js或.jsx 格式结尾的代码文件。
然后，安装 pre-commit ，以便检查提交操作：
先执行安装 npm install --save-dev pre-commit，然后在 package.json 中增加下面配置。
{
"pre-commit": [
"lint"
]
}
这里的 lint 对应第 1 步中增加的脚本命令名。
完成之后，在每次提交代码之前，pre-commit 都会拦截 Git 的 commit 操作，然后运行 lint 命令进行代码检测，若检测到有违反校验规则的情况，则会返回错误，从而导致 git commit 失败。
遇到的问题
1. 代码检查，.js 文件不支持 jsx。
error JSX not allowed in files with extension '.js' react/jsx-filename-extension
此时需要增加配置以便支持在 .js 文件中支持使用 JSX 语法。
rules: react/jsx-filename-extension: - warn - extensions: - ".js" # .js 文件适用 - ".jsx"
2. 代码中 process.env 报错
此处需要支持 node 语法。增加配置：
env: node: true
3. 代码检查了 serviceWorker.js 等第三方组件文件
有时项目中存在一些已经编译好的的JS文件，无需进行代码检查，此时需要增加 .eslintignore 文件来告诉 Eslint 忽略一下文件的检查，如：
# node_modules node_modules/ # build build/ # dist dist/ # serviceWorker src/serviceWorker.js
总结
一句话总结，我们需要Eslint插件实现代码检查，需要 Airbnb 来简化校验规则的编写，需要 pre-commit 来拦截提交操作，最大限度保证仓库中的代码是符合规范要求的。
其他项目（如Vue项目）需要使用到 Eslint 和 pre-commit，如上配置即可，不同支持在于是否配置支持 react。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
内容总结
以上是互联网集市为您收集整理的在React项目中使用Eslint代码检查工具及常见问题全部内容，希望文章能够帮你解决在React项目中使用Eslint代码检查工具及常见问题所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。