在React项目中使用Eslint代码检查工具及常见问题


Posted in Javascript onOctober 10, 2018

背景

最近使用 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。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery 追加元素的方法如append、prepend、before
Jan 16 Javascript
jQuery使用after()方法在元素后面添加多项内容的方法
Mar 26 Javascript
JavaScript实现自动变换表格边框颜色
May 08 Javascript
Jquery实现弹性滑块滑动选择数值插件
Aug 08 Javascript
jQuery之简单的表单验证实例
Jul 07 Javascript
js获取浏览器高度 窗口高度 元素尺寸 偏移属性的方法
Nov 21 Javascript
js数组操作方法总结(必看篇)
Nov 22 Javascript
基于vue的下拉刷新指令和滚动刷新指令
Dec 23 Javascript
Angularjs 实现移动端在线测评效果(推荐)
Apr 05 Javascript
vue.js框架实现表单排序和分页效果
Aug 09 Javascript
Vue框架之goods组件开发详解
Jan 25 Javascript
jquery实现的分页显示功能示例
Aug 23 jQuery
jquery实现联想词搜索框和搜索结果分页的示例
Oct 10 #jQuery
Vue 重置组件到初始状态的方法示例
Oct 10 #Javascript
15个顶级开源JavaScript框架和库
Oct 10 #Javascript
使用Angular 6创建各种动画效果的方法
Oct 10 #Javascript
js 实现在2d平面上画8的方法
Oct 10 #Javascript
从零开始用electron手撸一个截屏工具的示例代码
Oct 10 #Javascript
js正则取值的结果数组调试方法
Oct 10 #Javascript
You might like
PHP验证码函数代码(简单实用)
2013/09/29 PHP
PHP批量去除BOM头代码分享
2015/06/26 PHP
php实现表单多按钮提交action的处理方法
2015/10/24 PHP
PHP实现的自定义图像居中裁剪函数示例【测试可用】
2017/08/11 PHP
js 数组操作代码集锦
2009/04/28 Javascript
Javascript延迟执行实现方法(setTimeout)
2010/12/30 Javascript
js数组转json并在后台对其解析具体实现
2013/11/20 Javascript
有效提高JavaScript执行效率的几点知识
2015/01/31 Javascript
JS+CSS模拟可以无刷新显示内容的留言板实例
2015/03/03 Javascript
JavaScript 常见安全漏洞和自动化检测技术
2015/08/21 Javascript
跟我学习javascript的垃圾回收机制与内存管理
2015/11/23 Javascript
快速学习AngularJs HTTP响应拦截器
2015/12/31 Javascript
JavaScript小技巧整理篇(非常全)
2016/01/26 Javascript
JS简单循环遍历json数组的方法
2016/04/22 Javascript
jquery实现简单Tab切换菜单效果
2020/07/17 Javascript
JS中使用mailto实现将用户在网页中输入的内容传递到本地邮件客户端
2016/10/08 Javascript
用jQuery的AJax实现异步访问、异步加载
2016/11/02 Javascript
vue.js绑定class和style样式(6)
2016/12/09 Javascript
bootstrap日历插件datetimepicker使用方法
2016/12/14 Javascript
基于jQuery实现咖啡订单管理简单应用
2017/02/10 Javascript
原生js实现放大镜特效
2017/03/08 Javascript
微信小程序搜索组件wxSearch实例详解
2017/06/08 Javascript
微信小程序视图template模板引用的实例详解
2017/09/20 Javascript
jQuery中each和js中forEach的区别分析
2019/02/27 jQuery
jquery 回调操作实例分析【回调成功与回调失败的情况】
2019/09/27 jQuery
vue-cli在 history模式下的配置详解
2019/11/26 Javascript
微信小程序间使用navigator跳转传值问题实例分析
2020/03/27 Javascript
vue实现登录、注册、退出、跳转等功能
2020/12/23 Vue.js
Python OpenCV实现鼠标画框效果
2020/08/19 Python
html5 Canvas画图教程(10)—把面拆成线条模拟出圆角矩形
2013/01/09 HTML / CSS
戴尔美国官网:Dell
2016/08/31 全球购物
捐款仪式主持词
2015/07/04 职场文书
html中显示特殊符号(附带特殊字符对应表)
2021/06/21 HTML / CSS
java解析XML详解
2021/07/09 Java/Android
Nginx stream 配置代理(Nginx TCP/UDP 负载均衡)
2021/11/17 Servers
win11电脑关机鼠标灯还亮怎么解决? win11关机后鼠标灯还亮解决方法
2023/01/09 数码科技