超详细一次搞定Eslint + Prettier + husky + lint-staged前端代码工作流

我们使用热门构建工具vite创建项目，并选择react + ts模板。关于Eslint + Prettier + husky + lint-staged配置同样适用于webpack、Vue创建的项目，稍有不同的地方下文会提到，请放心食用。

1、使用vite创建项目

yarn create vite

输入项目名并选择 react + ts

success Installed "create-vite@3.0.0" with binaries:
  - create-vite
  - cva
✔ Project name: … my-app
✔ Select a framework: › react
✔ Select a variant: › react-ts
Done. Now run:

  cd my-app
  yarn
  yarn dev

2、安装Eslint

yarn add -D eslint

3、初始化配置Eslint

npm init @eslint/config

或者

npx exlint --init

3.1、选择模式：

选检查语法并发现问题

? How would you like to use ESLint? …
  To check syntax only
❯ To check syntax and find problems
  To check syntax, find problems, and enforce code style

3.2、选择模块化语法：

选JavaScript modules

✔ How would you like to use ESLint? · problems
? What type of modules does your project use? …
❯ JavaScript modules (import/export)
  CommonJS (require/exports)
  None of these

3.3、选择js框架：

选React

? Which framework does your project use? …
❯ React
  Vue.js
  None of these

3.4、是否使用ts

我选择是

? Does your project use TypeScript? › No / Yes

3.5、选择代码运行环境

用空格选中browser + node

? Where does your code run? …  (Press <space> to select, <a> to toggle all, <i> to invert selection)
✔ Browser
✔ Node

3.6、 选择配置文件格式

选JavaScript

? What format do you want your config file to be in? …
❯ JavaScript
  YAML
  JSON

3.7、安装三个依赖

选择是 （eslint解析react和ts的依赖）

The config that you've selected requires the following dependencies:
eslint-plugin-react@latest 
@typescript-eslint/eslint-plugin@latest 
@typescript-eslint/parser@latest
? Would you like to install them now? › No / Yes

3.8、选择包管理器

选择yarn

? Which package manager do you want to use? …
  npm
❯ yarn
  pnpm

4、安装完成

在项目根目录生成.eslintrc.cjs文件
这里就是上面3步骤初始化的文件,后面的配置都写这里

// .eslintrc.cjs
module.exports = {
    env: {
        browser: true,
        es2021: true,
        node: true
      },

    extends: "eslint:recommended", //eslint推荐的规则（过于严格）

    parserOptions: {
        ecmaVersion: 'latest',
        sourceType: 'module'
  },
  rules: {

  }
}

5、继续安装依赖

使用vite的同学安装 vite-plugin-eslint

yarn add -D vite-plugin-eslint

使用webpack的同学安装 eslint-webpack-plugin

yarn add -D eslint-webpack-plugin

以上两个依赖的作用都是在yarn dev时自动检查eslint规范

安装eslint解析器 @babel/core @babel/eslint-parser

yarn add -D @babel/core             
yarn add -D @babel/eslint-parser

6、配置vite.config.js 或 webpack.config.js

// vite.config.js
import react from '@vitejs/plugin-react';
import { defineConfig } from 'vite';
import eslintPlugin from 'vite-plugin-eslint';
export default defineConfig({
  plugins: [
    react(),
    eslintPlugin({
      include: ['src/**/*.tsx', 'src/**/*.ts', 'src/*.ts', 'src/*.tsx'], // eslint校验的文件类型
    }),
  ],
});

// webpack.config.js
const ESLintPlugin = require('eslint-webpack-plugin');

module.exports = {
  // ...
  plugins: [new ESLintPlugin(options)],
  // ...
};

7、配置eslintrc.cjs

此处我们使用腾讯的 AlloyTeam Eslint
它会覆盖eslint推荐的规则，并且兼容prettier

yarn add -D eslint-config-alloy

// eslintrc.cjs
module.exports = {
  extends: [
    'alloy',
    'alloy/react',
    'alloy/typescript',
  ],
  env: {
    // 你的环境变量（包含多个预定义的全局变量）
    //
    // browser: true,
    // node: true,
    // mocha: true,
    // jest: true,
    // jquery: true
  },
  globals: {
    // 你的全局变量（设置为 false 表示它不允许被重新赋值）
    //
    // myGlobal: false
  },
  rules: {
    // 自定义你的规则
  },
};

8、安装prettier规范代码格式

yarn add -D prettier

安装后在项目根目录创建.prettierrc.cjs文件
AlloyTeam 提供了一套 Prettier 配置，此配置直接继承。

// .prettierrc.cjs
module.exports = {
  // 一行最多 120 字符
  printWidth: 120,
  // 使用 2 个空格缩进
  tabWidth: 2,
  // 不使用缩进符，而使用空格
  useTabs: false,
  // 行尾需要有分号
  semi: true,
  // 使用单引号
  singleQuote: true,
  // 对象的 key 仅在必要时用引号
  quoteProps: 'as-needed',
  // jsx 不使用单引号，而使用双引号
  jsxSingleQuote: false,
  // 末尾需要有逗号
  trailingComma: 'all',
  // 大括号内的首尾需要空格
  bracketSpacing: true,
  // jsx 标签的反尖括号需要换行
  bracketSameLine: false,
  // 箭头函数，只有一个参数的时候，也需要括号
  arrowParens: 'always',
  // 每个文件格式化的范围是文件的全部内容
  rangeStart: 0,
  rangeEnd: Infinity,
  // 不需要写文件开头的 @prettier
  requirePragma: false,
  // 不需要自动在文件开头插入 @prettier
  insertPragma: false,
  // 使用默认的折行标准
  proseWrap: 'preserve',
  // 根据显示样式决定 html 要不要折行
  htmlWhitespaceSensitivity: 'css',
  // vue 文件中的 script 和 style 内不用缩进
  vueIndentScriptAndStyle: false,
  // 换行符使用 lf
  endOfLine: 'lf',
  // 格式化嵌入的内容
  embeddedLanguageFormatting: 'auto',
};

9、配置VScode

安装Eslint插件、Prettier插件

// 配置vscode
// 打开：设置 -> 文本编辑器 -> 字体 -> 在 settings.json 中编辑
// settings.json文件
{
  "files.eol": "\n",
  "editor.tabSize": 2,
 // 保存时将代码按照eslint规则修复
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true,
  },
 // 默认格式化插件
  "editor.defaultFormatter": "esbenp.prettier-vscode",
 // 添加eslint支持
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact"
  ] 
}

10、安装并配置husky + lint-staged

安装依赖

yarn add -D husky
yarn add -D lint-staged

husky

一个为 git 客户端增加 hook 的工具。安装后，它会自动在仓库中的 .husky/ 目录下增加相应的钩子；比如 pre-commit 钩子就会在你执行 git commit 的触发。我们可以在 pre-commit 中实现一些比如 lint 检查、单元测试、代码美化等操作。

package.json 需要添加 prepare 脚本

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

做完以上工作，就可以使用 husky 创建一个 hook 了

npx husky add .husky/pre-commit "npx lint-staged"

lint-staged

一个仅仅过滤出 Git 代码暂存区文件(被 git add 的文件)的工具；这个很实用，因为我们如果对整个项目的代码做一个检查，可能耗时很长，如果是老项目，要对之前的代码做一个代码规范检查并修改的话，这可能就麻烦了，可能导致项目改动很大。所以这个 lint-staged，对团队项目和开源项目来说，是一个很好的工具，它是对个人要提交的代码的一个规范和约束。

此时我们已经实现了监听 Git hooks，接下来我们需要在 pre-commit 这个 hook 使用 Lint-staged 对代码进行 prettier 的自动化修复和 ESLint 的检查，如果发现不符合代码规范的文件则直接退出 commit。

并且 Lint-staged 只会对 Git 暂存区(git add 的代码)内的代码进行检查而不是全量代码，且会自动将 prettier 格式化后的代码添加到此次 commit 中。

在 package.json 中配置

{
 "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "*.{ts,tsx,js}": [
      "eslint --fix",
      "prettier --write",
      "git add"
    ]
  },
}

对于commit-msg的约束，因为不同公司有各自的规范，本文暂不配置。
综上，一套完整的Eslint + Prettier + husky + lint-staged前端代码工作流就搞定了。