React Native

React Native配置ESLint和Prettier

Posted on 2019-06-18,5 min read

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

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

1. ESLint和Prettier

1.1 ESLint

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

1.2 Prettier

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

2. 需要安装的dev依赖

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

"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",
},

2.1 babel-eslint

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

2.2 eslint-plugin-prettier

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

2.3 eslint-config-prettier

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

3. ESLint的安装与配置

需要先安装nodeJS

3.1 ESLint的安装

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

  • 首先在项目中安装ESLint
npm install --save-dev eslint
  • 初始化ESLint
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

npm install --save-dev babel-eslint

3.2 添加ESLint规则文件

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

{
  "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": {}
}

3.3 开启并配置ESLint

eslint

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

4. Prettier的安装与配置

4.1 Prettier依赖的安装

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

4.2 添加Prettier规则

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

修改.prettierrc的内容为:

{
  // 可自定义prettier配置 
  "singleQuote": true,
}

4.3 开启并配置Prettier

prettier

4.4 修改prettier的快捷键

prettierKey

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

5. 示例

example

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

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

下一篇: 通过Todo项目学习React理念