使用eslint、lint-staged、husky搭建前端项目

随着前端开发的项目越来越复杂，参与人数越来越多，创建一个统一风格的、规范化的项目对于一个团队来说至关重要。因此前端项目，需要包括eslint校验、prettier代码优化、husky+lint-staged代码提交校验。

项目搭建

新建 vangle 项目
cd vangle 进入项目

初始化 package.json 文件

pnpm init

没安装 pnpm 的需要提前安装一下

npm i pnpm -g

• 新建 packages 目录，里面存放我们要开发的项目，例如 components、cli 等
• 创建 pnpm-workspace.yaml 文件，并指定 packages

# pnpm-workspace.yaml
packages:
  - 'packages/*'

• 安装 typescript 并初始化 tsconfig.json 文件

# -w 表示在要把包下载到根目录
pnpm add typescript -D -w
npx tsc --init

参考配置：

{
  "compilerOptions": {
    "baseUrl": ".",
    "target": "es2016",
    "sourceMap": false,
    "module": "esnext",
    "esModuleInterop": true,
    "strict": true,
    "jsx": "preserve",
    "types": ["node"],
    "rootDir": "."
  }
}

添加代码规范

prettier

Prettier是一个固执己见（提供了一份自认为是合适大多数人的代码风格）的代码格式化程序。

它支持的代码如下：

• JavaScript
• JSX
• Angular
• Vue
• Flow
• TypeScript
• CSS, Less, and SCSS
• HTML
• Ember/Handlebars
• JSON
• GraphQL
• Markdown, 包括 GFM 和 MDX
• YAML

Prettier相比于ESLint/TSLint/stylelint等工具对代码风格控制等更加细致。因此通常用Prettier来让代码更漂亮，用linter来捕捉代码语法上的错误。

安装依赖

pnpm add prettier -D -w

根目录创建 .prettierrc.js

module.exports = {
  semi: false,
  singleQuote: true,
  printWidth: 80,
  trailingComma: 'none',
  arrowParens: 'avoid'
}

eslint

ESLint 是一个根据方案识别并报告 ECMAScript/JavaScript代码问题的工具，其目的是使代码风格更加一致并避免错误。

• ESLint 使用 Espree 对 JavaScript 进行解析。
• ESLint 在代码中使用 AST 评估方案。
• ESLint 完全是插件式的，每个规则都是一个插件，你可以在运行时中添加更多插件。

安装依赖

pnpm add eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin -D -w

配合 prettier

当 ESLint 的规则和 Prettier 的规则相冲突时，就会发现一个尴尬的问题，用其中一种来格式化代码，另一种就会报错。prettier 官方提供了一款工具 eslint-config-prettier 来解决这个问题，本质上这个工具其实就是禁用掉了一些不必要的以及和 Prettier 相冲突的 ESLint 规则。

pnpm add eslint-config-prettier eslint-plugin-prettier -D -w

完成eslint配置

yarn eslint --init

等待安装完成，可以看到目录下多了一个.eslintrc的文件

参考配置如下：

module.exports = {
  parser: '@typescript-eslint/parser',
  extends: [
    'eslint:recommended',
    'plugin:@typescript-eslint/recommended',
    'prettier',
    'plugin:prettier/recommended'
  ],
  env: {
    browser: true,
    es2021: true
  },
  extends: ['eslint:recommended'],
  plugins: ['@typescript-eslint', 'prettier'],
  parserOptions: {
    ecmaVersion: 'latest',
    sourceType: 'module'
  },
  rules: {
    'prettier/prettier': 'error',
    'no-extra-semi': 'off',
    '@typescript-eslint/camelcase': 'off',
    '@typescript-eslint/ban-ts-ignore': 'off',
    '@typescript-eslint/no-var-requires': 'off',
    '@typescript-eslint/no-extra-semi': 'off',
    '@typescript-eslint/no-explicit-any': 'off',
    '@typescript-eslint/no-empty-function': 'off',
    '@typescript-eslint/no-non-null-assertion': 'off',
    '@typescript-eslint/explicit-function-return-type': 'off',
    '@typescript-eslint/explicit-module-boundary-types': 'off',
    '@typescript-eslint/no-empty-interface': 'off'
  }
}

当执行eslint则会执行代码检查，加上–fix可以自动修改部分问题

package.json 中添加执行命令

"scripts": {
  "prettier": "prettier --write .",
  "lint": "eslint --ext .ts packages/*/**.ts",
  "lint:fix": "eslint --ext .ts packages/*/**.ts --fix"
},

这时我们可以在 packages 下创建 components/index.ts，写一些不符合规则的代码然后运行命令试试效果

husky + lint-staged

husky它可以在项目中植入你设定的 git hooks，在 git提交代码的前后，你预设的git hooks可以得到执行，以对代码、文件等进行预设的检查，一旦检查不通过，就可以阻止当前的代码提交，避免了不规范的代码和git` 提交出现在项目中。

在提交代码前对项目进行lint是非常有必要的，避免提交了不规范或者错误的代码。但在整个项目上运行lint是很慢的，因此借助于lint-staged可以仅对暂存区中的文件进行lint操作。lint-staged可以配合husky使用。

安装依赖，前提项目中先有git仓库

pnpm add husky lint-staged -D -w

执行 npx husky install 创建.husky 目录，该目录下有一个 pre-commit 文件在每次提交代码的时候会执行，可以修改里面的运行脚本，自定义提交需要做的工作，如果没有 pre-commit 文件可以手动创建

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

npx lint-staged

在 package.json 中添加 lint-staged 配置

{
  "lint-staged": {
    "*.{js,jsx,vue,ts,tsx}": [
      "eslint --ext .ts packages/*/**.ts --fix" // 这里也可以写我们上面定义好的命令，如：pnpm lint:fix
    ],
    "*.{ts,tsx,js,jsx,cjs,mjs,css,scss,less,md,vue}": "prettier --write"
  }
}

工具配合使用

我们在项目的某个需求开发完，需要提交代码时会执行git commit命令，这个命令会触发 husky 的 pre-commit 钩子，在这个钩子中调用了lint-staged命令，将暂存区中的文件进行匹配并作为eslint和prettier的输入，分别进行语法检查修复和代码格式化。

现在我们可以试着提交一下代码，如果不符合 eslint 校验规则的会自动修复，修复完成后需要再次提交

如果提交的时候eslint报错，但又想提交，则执行

git commit -m '提交' --no-verify