在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 相关文章推荐
延时重复执行函数 lLoopRun.js
May 08 Javascript
JS的反射问题
Apr 07 Javascript
页面js遇到乱码问题的解决方法是和无法转码的情况
Apr 30 Javascript
JavaScript Array对象扩展indexOf()方法
May 09 Javascript
javascript实现验证IP地址等相关信息代码
May 10 Javascript
js实现iframe框架取值的方法(兼容IE,firefox,chrome等)
Nov 26 Javascript
jQuery侧边栏实现代码
May 06 Javascript
JavaScript原生实现观察者模式的示例
Dec 15 Javascript
Vue写一个简单的倒计时按钮功能
Apr 20 Javascript
微信小程序系列之自定义顶部导航功能
May 21 Javascript
js 数组当前行添加数据方法详解
Jul 28 Javascript
通过实例解析jQ Ajax操作相关原理
Sep 23 Javascript
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的FTP学习(一)[转自奥索]
2006/10/09 PHP
第4章 数据处理-php数组的处理-郑阿奇
2011/07/04 PHP
PHP中全面阻止SQL注入式攻击分析小结
2012/01/30 PHP
360通用php防护代码(使用操作详解)
2013/06/18 PHP
php json_encode值中大括号与花括号区别
2013/09/30 PHP
php编程每天必学之验证码
2016/03/03 PHP
Laravel的throttle中间件失效问题解决方法
2016/10/09 PHP
php组合排序简单实现方法
2016/10/15 PHP
JavaScript中用于生成随机数的Math.random()方法
2015/06/15 Javascript
使用canvas实现仿新浪微博头像截取上传功能
2015/09/02 Javascript
jquery实现滑屏大图定时收缩为小banner图片的广告代码
2015/09/02 Javascript
JavaScript模块规范之AMD规范和CMD规范
2015/10/27 Javascript
js实现倒计时及时间对象
2016/11/15 Javascript
NodeJS处理Express中异步错误
2017/03/26 NodeJs
js canvas实现QQ拨打电话特效
2017/05/10 Javascript
使用Angular-CLI构建NPM包的方法
2018/09/07 Javascript
javascript实现评分功能
2020/06/24 Javascript
vue-i18n实现中英文切换的方法
2020/07/06 Javascript
夯基础之手撕javascript继承详解
2020/11/09 Javascript
Python中设置变量访问权限的方法
2015/04/27 Python
python实现的守护进程(Daemon)用法实例
2015/06/02 Python
安装Python和pygame及相应的环境变量配置(图文教程)
2017/06/04 Python
python、PyTorch图像读取与numpy转换实例
2020/01/13 Python
Python PIL库图片灰化处理
2020/04/07 Python
属性与 @property 方法让你的python更高效
2020/09/21 Python
CSS3新属性transition-property transform box-shadow实例学习
2013/06/06 HTML / CSS
Probikekit日本:自行车套件,跑步和铁人三项装备
2017/04/03 全球购物
美体小铺美国官网:The Body Shop美国
2017/11/10 全球购物
MATCHESFASHION澳大利亚/亚太地区:英国时尚奢侈品电商
2020/01/14 全球购物
美团网旗下网上订餐平台:美团外卖
2020/03/05 全球购物
Tahari ASL官方网站:高级设计师女装
2021/03/15 全球购物
青年志愿者事迹材料
2014/02/07 职场文书
个人房屋转让协议书范本
2014/10/26 职场文书
发展党员工作情况汇报
2014/10/28 职场文书
Java获取e.printStackTrace()打印的信息方式
2021/08/07 Java/Android
TV动画《政宗君的复仇》第二季制作决定PV公布
2022/04/02 日漫