React Native配置ESLint和Prettier

在团队开发中,每个人的代码风格都是不一样的,当阅读他人代码时,就会感受到一丝丝的痛苦。这时就需要统一组内的代码风格。在RN的开发中也是如此。本文就记录一下RN开发中配合ESLint和Prettier统一代码风格。

这篇文章使用webstorm编辑器来配置,VS Code同样也可以

ESLint和Prettier

ESLint

ESLint是一个语法规则和代码风格的检查工具,提高代码质量。

Prettier

Prettier的中文意思是“漂亮的、机灵的”,也是一个流行的代码格式化工具的名称,它能够解析代码,使用你自己设定的规则来重新打印出格式规范的代码。

需要安装的dev依赖

需要额外安装的与ESLint和Prettier有关的依赖如下所示。

1
2
3
4
5
6
7
8
9
10
11
"devDependencies": {
"babel-eslint": "^10.0.2",
"eslint": "^5.16.0",
"eslint-config-airbnb": "^17.1.0",
"eslint-config-prettier": "^5.0.0",
"eslint-plugin-import": "^2.17.3",
"eslint-plugin-jsx-a11y": "^6.2.1",
"eslint-plugin-prettier": "^3.1.0",
"eslint-plugin-react": "^7.13.0",
"prettier": "^1.18.2",
},

babel-eslint

对所有有效的babel代码进行lint处理。如果你使用eslint本身不支持的特性,可以使用 babel-eslint。否则可以使用默认解析器而不需要使用babel-eslint。

eslint-plugin-prettier

配合eslint检测代码风格。eslint-plugin-prettier插件会调用prettier对你的代码风格进行检查,其原理是先使用prettier对你的代码进行格式化,然后与格式化之前的代码进行对比,如果过出现了不一致,这个地方就会被prettier进行标记。

eslint-config-prettier

通过使用eslint-config-prettier配置,能够关闭eslint一些不必要的或者是与prettier冲突的lint选项。这样我们就不会看到一些error同时出现两次

ESLint的安装与配置

需要先安装nodeJS

ESLint的安装

本次使用的是Airbnb流行使用的配置。

  • 首先在项目中安装ESLint
1
npm install --save-dev eslint
  • 初始化ESLint
1
eslint --init

在接下面的一系列的选项中推荐如下选择:

To check syntax, find problems, and enforce code styleJavaScript modules (import/export)React使用空格单选到nodeUse a popular style guideAirbnbJSON或JavaScript均可键入y安装依赖

安装完成后,在项目根目录会自动生成一个.eslintrc.json文件。

安装解析器babel-eslint

1
npm install --save-dev babel-eslint

添加ESLint规则文件

.eslintrc.json文件修改为如下代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
{
"parser": "babel-eslint",
"env": {
"es6": true,
"node": true
},
// 使用airbnb的规则,使用prettier插件
"extends": ["airbnb", "plugin:prettier/recommended"],
"globals": {
"Atomics": "readonly",
"SharedArrayBuffer": "readonly"
},
"parserOptions": {
"ecmaFeatures": {
"jsx": true
},
"ecmaVersion": 2018,
"sourceType": "module"
},
"plugins": [
"react"
],
// 添加自定义的规则
"rules": {}
}

开启并配置ESLint

eslint

选择自动寻找ESLint配置文件。会自动去寻找.eslintrc.json文件。

Prettier的安装与配置

Prettier依赖的安装

1
npm i prettier eslint-config-prettier eslint-plugin-prettier -D

添加Prettier规则

在项目根目录下创建一个名为.prettierrc的文件,与.eslintrc.json文件平级。

修改.prettierrc的内容为:

1
2
3
4
{
// 可自定义prettier配置
"singleQuote": true,
}

开启并配置Prettier

prettier

4.4 修改prettier的快捷键

prettierKey

使用此快捷键可以快速的对ESLint错误进行修改。

示例

example

使用上一步配置好的快捷键或者直接鼠标点击ESLint:Fix'prettier/prettier'都可以解决ESLint暴红问题。

如果有不能自动解决的问题,可以根据ESLint的提示进行手动修改。

Author: YangLeLe
Link: http://younglele.cn/react-native-configures-eslint-and-prettier/
Copyright Notice: All articles in this blog are licensed under CC BY-NC-SA 4.0 unless stating additionally.