如何在 React 项目中整合 Eslint 和 Prettier

文章同时在 segmentfault.com 以及 掘金 发布

前言

当咱们来到一个新的团队，或者接手一个新的项目时，必定会遇到代码规范的问题。随着前端应用愈来愈复杂，代码规范的问题也日益获得你们的重视。本文就带着你们来从 0 开始整合一个 React 前端应用的相关配置。

项目实例代码能够参考： eslint-prettier-react-demo

建立项目

首先，咱们使用官方提供的脚手架 create-react-app 来建立一个项目：

npx create-react-app eslint-prettier-react-demo/
cd eslint-prettier-react-demo/

Eslint

安装依赖

Eslint 是一个能够检验代码，并给出报告的工具。它的目标是保证代码的一致性，避免错误。Eslint 为咱们提供了 ECMAScript/JavaScript 规范的代码校验，咱们能够根据我的/团队的代码风格进行配置，也可使用开源的配置方案，本文会采用 eslint-config-airbnb 来配置。

Eslint 的强大得益于它活跃的开源社区，以及灵活的插件机制。本文中，咱们须要去配置一个 React 项目，就能够去选择一些开源社区合适的插件，来帮助咱们完成目标。

• eslint-plugin-import：此插件主要为了校验 import/export 语法，防止错误拼写文件路径以及导出名称的问题
• eslint-plugin-jsx-a11y：提供 jsx 元素可访问性校验
• eslint-plugin-react：校验 React
• eslint-plugin-react-hooks：根据 Hooks API 校验 Hooks 的使用

接下来，咱们安装这些依赖：

npm i -D eslint eslint-config-airbnb eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react eslint-plugin-react-hooks

修改配置文件

下面，让咱们须要根据 Eslint 的文档来配置这些插件。在控制台运行下面命令：

./node_modules/.bin/eslint --init

咱们能够根据项目的需求，来选则相应的配置。执行完毕以后能够看到项目的根目录多了一个 .eslintrc.js 文件。

Eslint 支持多种格式的配置文件，优先级以下：

• 一、 .eslintrc.js
• 二、 .eslintrc.yaml
• 三、 .eslintrc.yml
• 四、 .eslintrc.json
• 五、 .eslintrc
• 六、 package.json

咱们使用官方推荐的 .eslintrc.js 格式就好。

接下来，让咱们使用喜欢的编辑器来打开这个文件，为了便于理解，我增长了一些注释：

module.exports = {
    // 为咱们提供运行环境，一个环境定义了一组预约义的全局变量
    "env": {
        "browser": true,
        "es6": true
    },
    // 一个配置文件能够被基础配置中的已启用的规则继承。
    "extends": [
        "airbnb"
    ],
    // 自定义全局变量
    "globals": {
        "Atomics": "readonly",
        "SharedArrayBuffer": "readonly",
        "_": true,
        "$": true,
    },
    // ESLint 默认使用Espree做为其解析器，你能够在配置文件中指定一个不一样的解析器
    // "parser": "@typescript-eslint/parser",
    // 配置解析器支持的语法
    "parserOptions": {
        "ecmaFeatures": {
            "jsx": true
        },
        "ecmaVersion": 2018,
        "sourceType": "module"
    },
    // ESLint 支持使用第三方插件。在使用插件以前，你必须使用 npm 安装它。
    // 在配置文件里配置插件时，可使用 plugins 关键字来存放插件名字的列表。插件名称能够省略 eslint-plugin- 前缀。
    "plugins": [
        "react",
        // "@typescript-eslint"
    ],
    // ESLint 附带有大量的规则。你可使用注释或配置文件修改你项目中要使用的规则。要改变一个规则设置，你必须将规则 ID 设置为下列值之一：
    // "off" 或 0 - 关闭规则
    // "warn" 或 1 - 开启规则，使用警告级别的错误：warn (不会致使程序退出)
    // "error" 或 2 - 开启规则，使用错误级别的错误：error (当被触发的时候，程序会退出)
    "rules": {
        semi: 0,
        'no-unused-vars': [
            1,
            {
                vars: 'all',
                args: 'after-used',
                ignoreRestSiblings: true,
                varsIgnorePattern: '^_',
                argsIgnorePattern: '^_|^err|^ev' // _xxx, err, error, ev, event
            }
        ],
        'no-useless-escape': 2,
    }
};

Prettier

咱们能够借助 Eslint 来提升咱们编码的质量，可是却没法保证统一代码风格。一个统一的代码风格对于团队来讲是颇有价值的，因此为了达到目的，咱们能够选择使用 Prettier 在保存和提交代码的时候，将代码修改为统一的风格。这样作同时也下降了 Code Review 的成本。它不会代替 Eslint，因此须要和 Eslint 搭配使用。

配置应用

一、 安装依赖

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

二、 修改 Exlint 配置，打开 .eslintrc.js 文件，在扩展中增长 "plugin:prettier/recommended" ：

"extends": [
        "airbnb",
        "plugin:prettier/recommended"
    ]

三、 增长 prettier 配置文件，在根目录建立 .prettierrc.js ：

module.exports = {
  "printWidth": 120, //一行的字符数，若是超过会进行换行，默认为80
  "tabWidth": 2, //一个tab表明几个空格数，默认为2
}

提交时校验

若是，咱们想要使用 git 提交代码时，经过 prettier 来优化代码，还须要借助一些工具来完成。

• husky：一个方便用来处理 pre-commit 、 pre-push 等 githooks 的工具
• lint-staged：对 git 暂存区的代码，运行 linters 的工具

一、 安装依赖

npm i lint-staged husky -D

二、 增长配置

// package.json
{
  ...
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "src/*.{js,jsx,mjs,ts,tsx}": [
      "node_modules/.bin/prettier --write",
      "node_modules/.bin/eslint --fix",
      "git add"
    ],
    "src/*.{css,scss,less,json,html,md,markdown}": [
      "node_modules/.bin/prettier --write",
      "git add"
    ]
  }
  ...
}

三、 测试 commit 命令

这是咱们尝试增长一个组件，并提交代码。这时发现提交不了，有报错：

这个是由于 prettier 的默认规则，和 airbnb 规则不一致致使的。
这里能够参考git示例中的配置，调整一下 .eslintrc.js 文件便可。
这时候再提交代码就会看到：

配置 VS Code 编辑器

一、 在 VS Code 商店中寻找并安装插件 ESlint，Prettier

二、 编辑 settings.json，经过下面路径，能够找到相应的配置文件：

• Windows %APPDATA%\Code\User\settings.json
• macOS $HOME/Library/Application Support/Code/User/settings.json
• Linux $HOME/.config/Code/User/settings.json

而后增长以下参数：

"files.autoSave": "onFocusChange",
  "editor.formatOnSave": true,
  "editor.formatOnType": true,
  "eslint.autoFixOnSave": true,
  "eslint.enable": true,

这样当咱们在保存文件的时候，就会自动优化文件格式了。

到这里，整个项目的搭建，以及编辑器的设置就完成了！🎉🎉🎉

参考

• How to integrate Eslint & Prettier in React
• 使用 ESLint && Prettier 规范代码格式
• 使用ESLint+Prettier来统一前端代码风格
• 使用ESLint+Prettier规范React+Typescript项目
• ESLint 在中大型团队的应用实践
• prettier
• eslint