RELATEED CONSULTING
相关咨询
选择下列产品马上在线沟通
服务时间:8:30-17:00
你可能遇到了下面的问题
关闭右侧工具栏

新闻中心

这里有您想知道的互联网营销解决方案
在React项目中使用Eslint代码检查工具及常见问题

背景

创新互联公司是一家专注于做网站、成都网站设计与策划设计,丰镇网站建设哪家好?创新互联公司做网站,专注于网站建设10余年,网设计领域的专业建站公司;建站业务涵盖:丰镇等地区。丰镇做网站价格咨询:18980820575

最近使用 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代码检查工具及常见问题
网站URL:http://lswzjz.com/article/jsphhh.html