Eslint, Prettier 与 Husky 详细配置

在现代前端开发中，团队协作的效率和项目的可维护性至关重要。保证代码风格的统一、提前发现潜在的语法错误，是提升代码质量的关键。今天，我们将详细讲解三个前端开发中必不可少的“三剑客”：Eslint、Prettier 和 Husky。

• Eslint: 一个强大的 JavaScript 和 TypeScript 代码检查工具，用于发现并修复代码中的问题。

• Prettier: 一个“有主见”的代码格式化工具，能自动统一整个项目的代码风格。

• Husky: 一个让 Git Hooks 变得简单的工具，我们用它来在提交代码前自动执行代码检查和格式化。

1. 核心工具介绍

Eslint

Eslint 的核心价值在于代码质量。它通过静态分析代码，能够发现：

• 语法错误：例如，使用了未定义的变量。

• 代码风格问题：例如，要求使用单引号而不是双引号。

• 潜在的 Bug：例如，switch 语句缺少 break。

• 不推荐的写法：例如，在循环中使用了 await。

Eslint 是高度可配置的，你可以通过各种规则、插件（plugins）和扩展（extends）来定制它，以适应你的项目需求（例如集成 Vue、React、TypeScript 的规则）。

Prettier

Prettier 的核心价值在于代码风格统一。它不关心代码质量，只负责格式化。它会解析你的代码，然后用自己的一套规则重新输出，确保整个项目代码风格完全一致。这可以终结团队中关于“用不用分号”、“tab 还是 space”之类的“圣战”，让所有人专注于业务逻辑。

Eslint vs Prettier:

简单来说：

• Eslint = 代码质量检查 + 部分格式化

• Prettier = 纯代码格式化

为了达到最佳效果，我们通常会让 Prettier 负责所有格式化工作，同时关闭 Eslint 中与格式化相关的规则，避免冲突。

Husky

Husky 是一个 Git Hooks 工具。Git Hooks 是 Git 在特定事件（如 commit, push）发生前或后执行的脚本。Husky 让我们能轻松地在 package.json 中配置这些钩子。

我们将使用 Husky 在 git commit 之前，自动运行 Eslint 和 Prettier，确保提交到代码库的代码都是符合规范的。

2. 基础配置：Eslint + Prettier 协同工作

这个步骤是通用的，无论用 Webpack 还是 Vite。

第 1 步：安装依赖

首先，我们需要安装所有必要的开发依赖。

Bash

# yarn
yarn add eslint prettier eslint-plugin-prettier eslint-config-prettier -D

# npm
npm install eslint prettier eslint-plugin-prettier eslint-config-prettier --save-dev

如果你的项目使用 TypeScript 或 Vue，还需安装额外插件：

Bash

# TypeScript
yarn add @typescript-eslint/parser @typescript-eslint/eslint-plugin -D

# Vue (以 Vue 3 为例)
yarn add eslint-plugin-vue -D

第 2 步：配置 Eslint (.eslintrc.js 或 .eslintrc.cjs)

在项目根目录创建 .eslintrc.js 文件。使用 .cjs 后缀可以避免在 package.json 中设置 "type": "module" 时可能出现的问题。

JavaScript

// .eslintrc.cjs
module.exports = {
  // 表示这是根配置文件，Eslint 不会再向上层目录查找
  root: true,
  
  // 指定代码运行的环境，如 browser、node、es2021
  env: {
    browser: true,
    node: true,
    es2021: true,
  },
  
  // 解析器，用于解析代码。对于 TypeScript，需要使用 @typescript-eslint/parser
  parser: 'vue-eslint-parser', // 如果是 Vue 项目
  // parser: '@typescript-eslint/parser', // 如果是纯 TS 项目

  // 解析器选项
  parserOptions: {
    ecmaVersion: 'latest',
    sourceType: 'module',
    parser: '@typescript-eslint/parser', // 在 Vue 项目中，<script> 部分由 ts-parser 解析
  },
  
  // 使用的插件
  plugins: [
    'vue', // Vue 插件
    '@typescript-eslint', // TypeScript 插件
    'prettier', // Prettier 插件
  ],
  
  // 继承的规则集。规则集是别人预设好的一系列规则。
  // 顺序很重要，后面的会覆盖前面的
  extends: [
    "prettier",
    'eslint:recommended', // Eslint 官方推荐的基础规则
    'plugin:vue/vue3-recommended', // Vue 3 推荐规则
    'plugin:@typescript-eslint/recommended', // TypeScript 推荐规则

    //'plugin:prettier/recommended', // **关键**：简化配置

  ],
  
  // 自定义规则，可以覆盖 extends 中的规则
  // 0 = off, 1 = warn, 2 = error
  rules: {
    "prettier/prettier": "error",
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    // 可以在这里添加或覆盖你想要的规则
    // 例如：'@typescript-eslint/no-explicit-any': 'off'
  },
};

注意：plugin:prettier/recommended 是一个简写，它实际上做了三件事：

1. extends: ["prettier"] (即 eslint-config-prettier)

2. plugins: ["prettier"] (即 eslint-plugin-prettier)

3. rules: { "prettier/prettier": "error" }

第 3 步：配置 Prettier (.prettierrc.json)

在项目根目录创建 .prettierrc.json 文件。这是 Prettier 的配置文件，用于定义你的代码风格。

JSON

{
  "semi": false,
  "singleQuote": true,
  "printWidth": 120,
  "tabWidth": 2,
  "trailingComma": "es5",
  "arrowParens": "always",
  "bracketSpacing": true
}

• semi: 是否在句末使用分号。

• singleQuote: 是否使用单引号。

• printWidth: 每行最大字符数。

• trailingComma: 在多行输入的最后一个元素后添加逗号。

• arrowParens: 箭头函数参数是否总是有括号。

第 4 步：创建忽略文件

我们不希望对 node_modules 或构建产物进行检查和格式化。

创建 .eslintignore：

node_modules
dist
*.js
# 如果有其他不想检查的文件或目录，也加进来

创建 .prettierignore：

node_modules
dist
# 通常与 .eslintignore 内容相似

第 5 步：添加 NPM 脚本

在 package.json 中添加脚本，方便手动执行检查和格式化。

JSON

"scripts": {
  "lint": "eslint . --ext .vue,.js,.ts,.jsx,.tsx --fix",
  "format": "prettier --write \"./**/*.{vue,js,ts,jsx,tsx,json,css,md}\""
}

• lint: 检查所有指定后缀的文件，并尝试自动修复（--fix）。

• format: 使用 Prettier 格式化所有指定类型的文件。

现在，你可以运行 pnpm lint 或 pnpm run lint 来检查和修复代码了。

3. 自动化流程：Husky + lint-staged

手动运行脚本很麻烦，也容易忘记。我们用 Husky 和 lint-staged 实现提交前自动检查。

lint-staged 的好处是，它只对你**本次修改并暂存（staged）**的文件进行操作，而不是整个项目，速度非常快。

第 1 步：安装依赖

Bash

# yarn
yarn add husky lint-staged -D

# npm
npm install husky lint-staged --save-dev

第 2 步：初始化 Husky

Bash

# 启用 Git Hooks
npx husky install

# (可选) 让 husky 在 install 后自动启用
npm set-script prepare "husky install"

执行后，会生成一个 .husky 目录。

第 3 步：创建 pre-commit 钩子

我们希望在 git commit 之前运行 lint-staged。

Bash

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

这会在 .husky 目录下创建一个 pre-commit 文件，内容就是 npx lint-staged。

第 4 步：配置 lint-staged

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

JSON

"lint-staged": {
  "*.{vue,js,ts,jsx,tsx}": [
    "eslint --fix",
    "prettier --write"
  ],
  "*.{json,css,md}": [
    "prettier --write"
  ]
}

这个配置意味着：

• 对于所有暂存的 vue, js, ts 等文件，先执行 eslint --fix，再执行 prettier --write。

• 对于 json, css, md 等文件，只执行 prettier --write。

现在，当你执行 git commit 时，Husky 会自动对你暂存的文件执行上述命令。如果有 Eslint 错误无法自动修复，提交将会被阻止。

4. 编辑器集成：提升开发体验

自动化流程能保证入库代码的质量，但最好的体验是在保存文件时就自动修复和格式化。我们以最流行的 VS Code 为例。

1. 安装插件：

   • ESLint

   • Prettier - Code formatter

2. 配置 VS Code (.vscode/settings.json)：

   在项目根目录创建 .vscode/settings.json 文件，这会让整个团队共享同样的编辑器配置。

   JSON

   {
     // 指定 Prettier 为默认格式化器
     "editor.defaultFormatter": "esbenp.prettier-vscode",
   
     // 开启保存时自动格式化
     "editor.formatOnSave": true,
   
     // 开启保存时自动执行 Eslint 修复
     "editor.codeActionsOnSave": {
       "source.fixAll.eslint": "explicit"
     },
   
     // 对不同语言指定不同的默认格式化器 (可选，但推荐)
     "[javascript]": {
       "editor.defaultFormatter": "esbenp.prettier-vscode"
     },
     "[typescript]": {
       "editor.defaultFormatter": "esbenp.prettier-vscode"
     },
     "[vue]": {
       "editor.defaultFormatter": "esbenp.prettier-vscode"
     }
   }
   

配置完成后，当你保存文件时，VS Code 会自动格式化代码并修复 Eslint 错误，非常流畅！

5. 构建工具集成：Webpack 与 Vite

将 Eslint 集成到构建流程中，可以在开发和构建时，在终端和浏览器控制台直接看到错误，提供即时反馈。

在 Webpack 中集成

我们需要使用 eslint-webpack-plugin。

1. 安装依赖：

   Bash

   # yarn
   yarn add eslint-webpack-plugin -D
   
   # npm
   npm install eslint-webpack-plugin --save-dev
   

2. 配置 webpack.config.js：

   JavaScript

   const ESLintPlugin = require('eslint-webpack-plugin');
   
   module.exports = {
     // ... 其他 webpack 配置
     plugins: [
       new ESLintPlugin({
         // 指定要检查的文件扩展名
         extensions: ['js', 'ts', 'vue'],
         // 在编译时输出 Eslint 错误
         emitWarning: true,
         emitError: true,
         // 启用 Eslint 自动修复
         fix: true,
         // 指定 Eslint 配置文件
         configFile: '.eslintrc.js',
       }),
     ],
   };
   

   配置完成后，当你运行 webpack-dev-server 或执行构建时，Eslint 会自动运行。如果有错误，它们会显示在你的终端和浏览器的开发者工具控制台中。

在 Vite 中集成

在 Vite 中，我们使用 vite-plugin-eslint。

1. 安装依赖：

   Bash

   # yarn
   yarn add vite-plugin-eslint -D
   
   # npm
   npm install vite-plugin-eslint --save-dev
   

2. 配置 vite.config.js (或 vite.config.ts)：

   JavaScript

   import { defineConfig } from 'vite';
   import vue from '@vitejs/plugin-vue';
   import eslintPlugin from 'vite-plugin-eslint';
   
   export default defineConfig({
     plugins: [
       vue(),
       eslintPlugin({
         // 在 vite-plugin-eslint 中启用 Eslint 自动修复
         fix: true,
         // 指定要缓存的文件，以提高性能
         cache: false,
         // 指定要检查的文件
         include: ['src/**/*.js', 'src/**/*.vue', 'src/**/*.ts'],
       }),
     ],
     // ... 其他 vite 配置
   });
   

   这样，当你启动 Vite 开发服务器时，vite-plugin-eslint 会在后台运行。代码中的 Eslint 错误会直接在浏览器界面上以遮罩层（overlay）的形式显示，非常直观。

6. 总结

通过以上六个步骤，我们已经为项目建立了一套强大而完善的代码规范工作流：

1. Eslint 和 Prettier 负责定义代码质量和风格规范。

2. VS Code 插件在开发时提供即时格式化和修复，提升个人效率。

3. Husky 和 lint-staged 在代码提交前强制检查，保证入库代码的质量和一致性。

4. Webpack/Vite 插件在开发和构建过程中提供即时反馈，尽早发现问题。