ESLint + Prettier提高代码质量（一）：基本概念

一个项目保持统一的代码风格还是很重要的，能提高代码的质量和可读性。本文首先会对ESLint和Prettier进行一些核心概念和基本的使用方法的介绍。已经了解基础的可直接阅读第二篇ESLint + Prettier提高代码质量（二）：如何在Vue和React项目中集成。

有人可能不太清楚ESLint和Prettier之间的区别。前者主要是对代码质量的把控，比如当使用了未声明的变量会报错等，当然它也能对代码进行format，但是没有Prettier做得好，Prettier只对代码进行format，不管质量。

ESLint

基本使用

1. 创建配置文件

配置的内容可在package.json的eslintConfig中进行，或者自己手动创建一个.eslintrc.(js,yml,json)文件，也可以使用如下命令（推荐）：

npx eslint --init
复制代码

命令行会有一系列问答，可根据自己需要选择合适的配置。

2. 校验

之后可以使用如下命令对任何文件或者目录进行校验：

npx eslint fileName | directory
复制代码

配置文件详解

rules

配置文件中比较关键的一项是rules，可自行根据团队情况进行配置：

{
    "rules": {
        "semi": ["error", "always"],
        "quotes": ["error", "double"]
    }
}
复制代码

其中第一个参数控制该规则的错误级别，包括以下三个级别：

• “off” or 0：关闭规则
• “warn” or 1：不会引发代码退出
• “error” or 2：代码编译退出

extends

可在其中引入一些第三方的shared configuration，例如eslint-config-airbnb的。下面的配置是采用了通用的Rules中挑勾的规则。

{
    "extends": ["eslint:recommended"] // 格式为："包名:规则"
}
复制代码

eslint-config-前缀需省略。

如果rules和extends都为空，则eslint其实不会对code进行lint。

plugins

对eslint进行扩展。例如增加一些rules，或者export shareable configurations。eslint-plugin-前缀需省略：

{
    "plugins": [
        "react" // 即eslint-plugin-react
    ],
    "extends": [
        "eslint:recommended",
        "plugin:react/recommended" // 格式为：plugin package名/configuration名
    ],
    "rules": {
       "react/no-set-state": "off" // plugin package名/rule名
    }
}
复制代码

overrides

可对某些目录下匹配到的文件使用单独的规则：

  "overrides": [
    {
      "files": ["bin/*.js", "lib/*.js"],
      "excludedFiles": "*.test.js",
      "rules": {
        "quotes": ["error", "single"]
      }
    }
  ]
复制代码

root

eslint会从当前要lint的文件开始一直往上找，直到找到一个标志为root:true的配置文件或者整个文件系统的根目录为止(这个过程中找到的config文件会进行合并)。建议将项目根目录的config文件设置root:true。

env

提供对应环境的全局变量。例如：

{
    "env": {
        "browser": true,
        "node": true
    }
}
复制代码

parserOptions

配置支持的JS，默认是es5。

{
    "parserOptions": {
        "ecmaVersion": "latest", 
        "sourceType": "module",
        "ecmaFeatures": {
            "jsx": true // 注意和支持react不同，支持react需引入eslint-plugin-react
        }
    },
    "rules": {
        "semi": "error"
    }
}
复制代码

与VScode 集成

在插件市场中搜ESLint，安装好插件，然后在IDE settings.json中配置：

    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    }
复制代码

集成 husky 和 lint-staged

提交代码前进行lint和修复。需要集成如下两个工具：

• husky：在git的相应阶段(pre-commit、commit-msg、pre-push)触发配置的命令。
• lint-staged：在git暂存的文件上运行linters，历史文件忽略。

配置husky

1. 安装依赖

npx husky-init && npm install
复制代码

该命令 安装了husky依赖；创建了.husky目录，其中包含pre-commit hook文件，可在里面配置hook触发时的命令；package.json中增加了一条script：

{
    "scripts": {
        "prepare": "husky install"
    }
}

复制代码

2. 配置.husky/pre-commit

之后修改.husky/pre-commithook文件：

#!/bin/sh
. "$(dirname "$0")/_/husky.sh"

# eslint --fix ./src --ext .vue,.js,.ts
复制代码

配置 lint-staged

1. 安装依赖

npm i lint-staged -D
复制代码

2. 在package.json中添加：

{
  // ...
  "lint-staged": {
    "*.{vue,js,ts}": "eslint --fix" // 自行根据需要配置
  },
}
复制代码

表示只对 git 暂存区的.vue、.js、.ts文件执行eslint --fix。

3. 修改.husky/pre-commithook：

#!/bin/sh
. "$(dirname "$0")/_/husky.sh"

# eslint --fix ./src --ext .vue,.js,.ts # 这样会对历史记录文件lint

npx lint-staged # 只对本次add的文件lint
复制代码

这样，在每次执行git commit时，会先对git staged中的文件进行Lint。

Prettier

与eslint的区别是，它只管代码格式，不管是否有什么语法错误，不关注代码质量。支持JS、TS、JSON、CSS、Vue、React等多种语言。

use Prettier for formatting and linters for catching bugs。

基本使用

1. 安装

npm install --save-dev --save-exact prettier
复制代码

其中--save-exact表示安装固定版本，前面没有^、~之类的。建议锁定明确版本号，不然即便有小的更新也可能导致规则改变。

2. 创建配置文件
支持.prettiertc、.prettierrc.[js/json]格式。

• .prettierrc.js：进行具体格式规则配置：

module.exports = {
  semi: false,
  trailingComma: 'all',
  singleQuote: true,
  printWidth: 120,
  tabWidth: 2,
};
复制代码

• .prettierignore中可配置无需format的目录或文件。

3. 使用

npx prettier --write .
复制代码

.表示所有文件，可以指定文件或者目录。

与ESLint一起使用

由于Prettier中关于format的规则和ESLint会有冲突，需要先安装如下的包，关闭ESLint中关于format的规则，采用Prettier中的规则：

• eslint-config-prettier：关闭ESLint中与Prettier产生冲突的stylistic规则。

此外，还能让Prettier作为ESLint的一项规则来使用，需安装如下插件：

• eslint-plugin-prettier：让Prrettier作为一个linter rule运行。这样IDE能直接使用与Linter的集成方案。

配置.eslintrc.js文件，将plugin:prettier/recommended作为最后一个extention：

{
  "extends": ["plugin:prettier/recommended"]
}
复制代码

它展开来就是：

{
  "extends": ["prettier"], // eslint-config-prettier
  "plugins": ["prettier"], // 注册eslint-plugin-prettier
  "rules": {
    "prettier/prettier": "error", // 打开该插件提供的规则，并且是作为eslint的一条规则运行
    "arrow-body-style": "off",
    "prefer-arrow-callback": "off"
  }
}
复制代码

与VScode集成

VScode中安装插件Prettier，然后settings.json中指定formatter：

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "[javascript]": { // 可指定某种语言的文件用prettier
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
   "editor.formatOnSave": true
}
复制代码

注：如果与ESlint一起使用，安装了eslint-plugin-prettier，那么它是作为ESLint的一条规则运行的，无需再单独为prettier配置VSCode，走ESlint的集成就行:

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}
复制代码

如有不清楚或错误的地方欢迎大家留言讨论。如何想了解在Vue和React中的配置可以看第二篇ESLint + Prettier提高代码质量（二）：如何在Vue和React项目中集成。

参考

• ESLint基础：Configuring ESLint
• Prettier基础：Prettier
• ESLint在VSCode中的配置：ESLint plugin