用ESLint和Prettier规范项目代码-一一网

在做项目的时候我们经常会遇到下面两个问题:

代码中有很多波浪线, 不光看着不舒服, 还影响代码质量. (代码质量)
明明只改动了一行代码, 但是diff的时候却出现了很多行差异. (代码格式)

在团队项目中这些细节虽然看似微小, 但其实在潜移默化的影响着团队的效率. 如何在项目前期就建立起良好的规范, 我们可以借助一些工具来帮忙. 下面会简单讲一下ESLint和Prettier两个工具.

ESLint

ESLint是一个npm库, 它可以帮我们识别前端代码并且对不符合规范的代码进行提示.
我们可以新建一个项目用于试验, 项目名称假设叫lint.

mkdir lint
cd lint
yarn init
复制代码

然后新建一个index.js, 写入一个函数.

function hello() {
  let name = "jay"
  console.log("hello there")
}
复制代码

以vscode为例, 在禁用掉vscode的一些基础功能后, 编辑器对代码是没有任何提示的.

下面我们在项目中安装ESLint.

yarn add eslint --dev
复制代码

锁定package.json中eslint的版本号, 以防止团队其它成员由于版本号的不同而导制提示不一致.

用ESLint自带的命令生成配置文件(.eslintrc.js)

⚠️ 直接输入eslint有可能会提示命令找不到bash: eslint: command not found, 这种情况下需要将:./node_modules/.bin添加进PATH环境变量, 也就是让系统在执行命令的时候自动去找./node_modules/.bin文件夹. 以bash为例.

vim ~/.bashrc
复制代码

或者直接运行./node_modules/.bin/eslint --init 也是一样的效果.

生成好了配置文件后, 运行命令

eslint index.js
复制代码

eslint就会提示我们代码不符合规范的地方

但是在正式的项目中我们不可能每次都使用命令来检查代码, 这就需要vscode的eslint插件来帮忙了.

ESLint插件

ESLint插件和ESLint不同, 插件的作用是将ESLint的功能集成到编辑器中(以vscode为例), 让我们在写代码的同时就直接将不符合规范的地方提示出来. 它能起作用的前提是项目本地或者全局已经安装了ESLint库.

开启了ESLint后就可以看到提示了. 注意vscode右下角的eslint已经开启.

Husky-提交前的强制检查

光提示还不够, 为了防止不良代码被提交进仓库, 我们可以利用git的hook来做提交前的检验. 比如在pre-commit的时候做代码检查. 更多关于git hook可以参考这篇文章. 但是自己来做git hook还是比较麻烦的, 我们可以利用Husky来帮助我们.

Husky就是git hook的辅助工具, 它可以帮助我们维护hook命令. 下面以Husky v6版本为例演示安装过程.

yarn add husky --dev
husky install
复制代码

在package.json中添加脚本, 这样可以保证新用户在yarn install后可以自动激活git hook

"scripts": {
    "prepare": "husky install"
  },
复制代码

添加hook

在运行了husky install后会生成一个.husky文件夹

我们可以使用husky add <file> [cmd]来添加一个hook

husky add .husky/pre-commit "npx eslint index.js"
复制代码

运行完上面的命令后会在.husky文件夹中增加一个pre-commit文件, 添加的命令就在这个文件里面.

这个时候我们提交代码时就会就会执行npx eslint index.js, 然后提示代码检查没有通过.

Lint-Staged

提交前的回调设置成功了?, 但我们又遇到了另外的问题, 如果每次提交前都执行npx eslint src/*来检查所有的文件, 光检查就会花费很多时间, 这显然是不合理的. 我们只要检查提交的那些文件就可以了而不是所有文件. lint-staged库就是为了实现这个目标的.

安装Lint-Staged

yarn add lint-staged --dev
复制代码

在package.json中增加一个

"scripts": {
    "prepare": "husky install"
  },
  // 增加的
  "lint-staged": {
    "*.{js,jsx}": "eslint"
  },
  "devDependencies": {
    "eslint": "7.28.0",
    "husky": "^6.0.0",
    "lint-staged": "^11.0.0"
  }
复制代码

在之前新增的.husky/pre-commit文件中将原来的命令更改为npx lint-staged

这个时候再提交代码, hook就会执行lint-staged命令, 这时就只会检查提交的那些文件了.

至此, 我们利用ESLint帮助我们解决了代码质量的问题.

对于代码格式的问题, 比如结尾是否要加;号, 字符串是用双引号""还是单引号'', 长对象是否需要自动换行等等… 这些问题虽然不影响代码质量, 但是如果每个人的格式都不一样, 就会出现文章开头的第二个问题, 最终也会影响团队的效率. 这就需要Prettier的帮助了.

Prettier

Prettier跟ESLint很类似, 也是分为Prettier库以及一个Prettier插件.

我们参考官网介绍如何安装

yarn add --dev --exact prettier
复制代码

⚠️这里锁定版本号非常重要. 确保团队中每个人的版本都是一致的.⚠️

创建配置文件.prettierrc.json, 写入一条规则比如:

{
  "singleQuote": true
}
复制代码

创建 .prettierignore文件, 告诉命令行和编辑器忽略格式化这些文件, 比如

# Ignore artifacts:
build
coverage
复制代码

全局格式化代码

prettier --write .
复制代码

或者格式化某一个文件

prettier --write src/index.js
复制代码

跟ESLint一样, 在正式的项目中我们不可能每次都使用命令来格式化代码, 这就需要安装插件让编辑器来自动帮我们格式化.

Prettier插件

安装Prettier插件(以vscode为例)

编辑vscode的settings.json设置Prettier为默认的格式化工具, 同时设置保存时格式代码formatOnSave

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  
  "editor.formatOnSave": true
}
复制代码

这时按CTRL+S保存一下代码, 代码就自动格式化了.?

⚠️注意一个Prettier插件跟ESLint插件不一样的地方. ESLint插件的运行需要依靠本地先安装ESLint库, 但是Prettier插件却不需要. 如果项目本地没有安装Prettier库, 而仅仅只是编辑器安装了Prettier插件, 编辑器仍然可以格式化代码. 但是这种方式是强烈不建议的, 官方也是强调需要先在项目本地安装Prettier库, 这样编辑器在格式化的时候就会优先选用本地的库, 从而保证格式化的版本都是一致的.⚠️