使用eslint + prettier + husky + lint-staged 约束项目的最佳实践！

前言

大家好，我是HoMeTown，最近在搭建一个公司与某一线大厂有合作，需要做一个性能极其优化的微信小程序，我们组正好刚从企微项目里抽出身来，所以这个艰巨的任务就交给我们来完成了，首先开了一天会，跟合作方的前端经理PM 确定好了技术选型以及规范，分工细则下来以后，得到项目架构&少许业务开发的任务，优化交给合作方去做，因此这个项目会有很多人参与进来，一个强有力的项目约束是十分重要的！

eslint

概念

eslint是一个集大成的语法校验工具，他会帮你去规范你的代码，也会帮你fix一部分小问题，支持extends、plugin、rules等属性，他的原理我也在 【源码角度】7分钟带你搞懂ESLint核心原理！这片文章里讲过，感兴趣的朋友可以了解一下，接下来，看看具体配置方法。

这里不做属性以及规则属性的说明，网上一大把，直接贴配置，参考 eslint中文文档

安装

安装所需依赖

"@babel/core": "^7.16.7",
"@babel/eslint-parser": "^7.18.9",
"@babel/eslint-plugin": "^7.18.10",
"@ecomfe/eslint-config": "^7.4.0",
"@typescript-eslint/eslint-plugin": "^5.17.0",
"@typescript-eslint/parser": "^5.17.0",
"eslint": "^7.19.0ear",
"eslint-plugin-prettier": "^4.0.0",
"eslint-plugin-import": "^2.25.4",
1
2
3
4
5
6
7
8
9

接下来在根目录新建.eslintrc.js

// https://eslint.bootcss.com/docs/rules/
module.exports = {
  root: true,
  env: {
    es6: true,
    browser: true,
    node: true
  },
  parser: '@typescript-eslint/parser', // 添加解析器
  overrides: [ // 为特定的文件指示处理器
    {
      files: ['*.ts'], // 校验所有的ts文件
      extends: [ // 继承eslint规则
        'eslint:recommended',
        'plugin:@typescript-eslint/recommended',
        'plugin:@typescript-eslint/recommended-requiring-type-checking'
      ],
      parserOptions: {
        project: './tsconfig.json',
        ecmaVersion: 2018,
        sourceType: 'module'
      }
    }
  ],
  globals: { // 微信小程序
    wx: true,
    App: true,
    Page: true,
    getCurrentPages: true,
    getApp: true,
    Component: true,
    requirePlugin: true,
    requireMiniProgram: true
  },
  plugins: ['@typescript-eslint', 'prettier']
}

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
26
27
28
29
30
31
32
33
34
35
36
37

新建.eslintignore，忽略不需要被校验的文件

# .eslintignore
typings
node_modules
1
2
3

vscode安装扩展eslint，项目中新建.vscode/settings.json

{
  // 主题
  "workbench.colorTheme": "Atom One Light",
  // 缩进
  "editor.tabSize": 2,
  // 保存eslint校验
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "eslint.format.enable": true,
  // 校验那些文件
  "eslint.validate": ["typescript", "javascript", "vue", "html"],
  "nuxt.isNuxtApp": false,
  // 终端显示
  "eslint.alwaysShowStatus": true,
  // 加载配置文件
  "eslint.options": { "configFile": ".eslintrc.js" }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

vscode展示如下图，表示开启成功

在package.json中新增命令：

"lint": "eslint --fix ./ --ext .ts --ext .js",
1

测试

执行npm run lint

随便修改一个文件

再执行npm run lint

可以看到已经报错了~

配置成功

prettier

概念

prettier是一个代码格式化工具，配合vscode自动保存可以保证代码风格的统一。

安装

"prettier": "^2.5.1",
1

在项目根目录新建.prettierrc.js，规则参考 Prettier

// .prettierrc.js
module.exports = {
  printWidth: 120,
  tabWidth: 2,
  useTabs: false,
  semi: false,
  singleQuote: true,

  // 对象的 key 仅在必要时用引号
  quoteProps: 'as-needed',

  // jsx 不使用单引号，而使用双引号
  jsxSingleQuote: false,

  // 末尾不需要逗号
  trailingComma: 'none',

  // 大括号内的首尾需要空格
  bracketSpacing: true,

  // jsx 标签的反尖括号需要换行
  jsxBracketSameLine: false,

  // 箭头函数，只有一个参数的时候，无需括号
  arrowParens: 'avoid',

  // 每个文件格式化的范围是文件的全部内容
  rangeStart: 0,

  rangeEnd: Infinity,

  // 不需要写文件开头的 @prettier
  requirePragma: false,

  // 不需要自动在文件开头插入 @prettier
  insertPragma: false,

  // 使用默认的折行标准
  proseWrap: 'preserve',

  // 根据显示样式决定 html 要不要折行
  htmlWhitespaceSensitivity: 'css',

  // 换行符使用 lf
  endOfLine: 'lf'
}
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
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46

新建.prettierignore文件忽略不需要进行格式化的文件

# .prettierignore

/node_modules
# OS
.DS_Store
.idea
.editorconfig
.npmrc
package-lock.json
# Ignored suffix
*.log
*.md
*.svg
*.png
*ignore
## Built-files
.cache
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

在.vscode/settings.json中新增一个属性，保存自动格式化

"editor.formatOnSave": true
1

在package.json中新增命令

"prettier": "prettier --config .prettierrc.js --write './**/*.{js,ts,scss,css,json}'",
1

测试

执行命令npm run prettier，他会把你配置的所以需要格式化的文件全部过一遍，并且给你格式化，其实如果配置了formatOnSave是不会再有可格式化的文件的，但是保险起见，在配置git hook的时候，还是跑一下比较好。

成功

husky

概念

husky是一个git hook工具，用于你在提交代码的时候进行自定义的操作。

安装

"husky": "^7.0.4",
1

在package.json中新增命令

1

执行命令创建.husky/pre-commit文件

npx husky add .husky/pre-commit "npm run prettier && npm run lint"   
1

根目录下生成如下文件，表示成功

pre-commit内容如下：

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

npm run prettier && npm run lint
1
2
3
4

husky默认会跑全部的文件，但是我们其实只校验我们提交( git add . )的文件代码格式，而不是去校验所有的文件的格式，就需要使用lint-staged了

lint-staged

安装

"lint-staged": "^12.3.7"
1

项目根目录新建.lintstagedrc.js文件

// .lintstagedrc.js
module.exports = {
  '*.js': ['prettier --config .prettierrc.js --write', 'eslint --fix --ext .js'],
  '*.ts': ['prettier --config .prettierrc.js --write', 'eslint --fix --ext .ts'],
  '*.json': 'prettier --config .prettierrc.js --write'
}
1
2
3
4
5
6

全部完成以后，当执行git commit -m "xxx"命令时，会对add的文件进行prettier&eslint

完结

往期回顾

• 【小程序】爆肝 3 天总结的微信小程序优化指南（收藏夹吃灰吧！）🔥🔥

• 【VUE】从源码角度说清楚MVVM！实现v-model！真的很简单！🔥

• 【CSS】5分钟带你彻底搞懂 W3C & IE 盒模型！🔥🔥

• 【CSS】有意思的BFC：Block Formatting Context（块格式化上下文）！🤡

• 【CSS】聊一聊CSS像素、设备像素、设备独立像素、dpr、ppi 之间的区别

• 【性能】7分钟带你了解【尤大】都在使用的 Chrome Runtime Performance Debug！

• 【源码角度】7分钟带你搞懂ESLint核心原理！

• 【JavaScript】手把手教你写高质量 JavaScript 异步代码！

• 我用前端【最新】技术栈完成了一个生产标准的项目【Vue3 + TS + Vite + Pinia + Windicss + NavieUI】

• 【npm】package-lock.json冲突及问题排查思路！

• 【JavaScript】关于解决JS 计算精度问题（toFixed, Math.round, 运算表达式） ！

• 【Vite】Vite设置好了Proxy，但接口却404！解决方案来了！

• 【TypeScript】超详细的笔记式教程！进阶！！【下】

• 【TypeScript】超详细的笔记式教程！进阶！！【中】

• 【TypeScript】超详细的笔记式教程！进阶！！【上】

• … 查看更多 …