如何利用 `ESLint` 和 `Prettier`，在 Vue 项目中实现代码风格的一致性？

Vue 项目代码风格统一：ESLint + Prettier 黄金搭档

各位靓仔靓女，晚上好！我是你们的老朋友，今天给大家带来一场关于 Vue 项目代码风格统一的“相声”——哦不，是技术讲座。主题就是如何利用 ESLint 和 Prettier 这对黄金搭档，让你的 Vue 项目代码像复制粘贴一样整齐划一，告别代码风格混乱的噩梦。

为什么要统一代码风格？

俗话说得好，“人靠衣装，佛靠金装，代码靠风格”。统一的代码风格，好处多多：

• 提高可读性： 想象一下，你接手一个项目，代码缩进忽长忽短，命名五花八门，注释像谜语一样，是不是想立刻原地爆炸？统一的风格能让代码更易读，更容易理解。
• 减少错误： 某些代码风格问题，例如不必要的全局变量，可能导致潜在的 bug。 ESLint 可以帮助你提前发现并解决这些问题。
• 提升团队协作效率： 团队成员遵循统一的风格，避免了不必要的争论，提高了代码审查的效率。大家把精力都放在业务逻辑上，而不是纠结是用两个空格还是四个空格。
• 看起来更专业： 干净整洁的代码，能给别人留下一个专业的好印象，就像一个衣冠楚楚的程序员。

ESLint：代码质量的“老中医”

ESLint 是一个代码检查工具，可以帮助你找出代码中的潜在问题，并强制执行特定的代码风格规则。它可以像老中医一样，诊断你的代码，并给出治疗方案。

1. 安装 ESLint：

首先，在你的 Vue 项目中安装 ESLint：

npm install eslint --save-dev
# 或者
yarn add eslint --dev

2. 初始化 ESLint 配置：

运行以下命令，生成 ESLint 配置文件：

npx eslint --init
# 或者
yarn run eslint --init

这个命令会引导你选择 ESLint 的配置方式。你可以选择：

• 使用流行的风格指南： 例如 Airbnb、Standard 或 Google。这些风格指南都经过了广泛的实践检验，可以作为你的起点。
• 手动配置： 根据你的需求，自定义 ESLint 规则。

3. 配置 ESLint：

这里以使用 Airbnb 风格指南为例，介绍 ESLint 的配置。在初始化过程中，选择 "Use a popular style guide" -> "Airbnb"。 然后选择 JavaScript 模块格式 (ESM) 和使用的框架 (Vue)。

安装完成后，会在项目根目录下生成一个 .eslintrc.js (或者 .eslintrc.json、.eslintrc.yml 等) 文件。这个文件就是 ESLint 的配置文件。

.eslintrc.js 示例：

module.exports = {
  "env": {
    "browser": true,
    "es2021": true,
    "node": true
  },
  "extends": [
    "eslint:recommended",
    "plugin:vue/essential",
    "airbnb-base"
  ],
  "parserOptions": {
    "ecmaVersion": 12,
    "sourceType": "module"
  },
  "plugins": [
    "vue"
  ],
  "rules": {
    "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
    "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
    "indent": ["error", 2], // 使用 2 个空格缩进
    "quotes": ["error", "single"], // 使用单引号
    "semi": ["error", "never"] // 不要使用分号
  }
};

配置项说明：

配置项	说明
env	指定代码运行的环境。 例如 browser: true 表示代码在浏览器环境中运行，可以使用 window 等全局变量。 es2021: true 表示支持 ES2021 语法。 node: true 表示代码在 Node.js 环境中运行。
extends	继承 ESLint 配置。 这里继承了 ESLint 推荐的规则 (eslint:recommended)、 Vue.js 官方推荐的规则 (plugin:vue/essential) 和 Airbnb 风格指南 (airbnb-base)。 ESLint 会按照顺序应用这些配置，后面的配置会覆盖前面的配置。
parserOptions	指定 JavaScript 语法解析器选项。 ecmaVersion: 12 表示使用 ES12 语法。 sourceType: "module" 表示代码使用 ES 模块语法。
plugins	插件。 这里使用了 vue 插件，用于支持 Vue.js 相关的语法。
rules	自定义规则。 这里覆盖了 Airbnb 风格指南中的一些规则。 no-console 和 no-debugger 规则表示在生产环境中禁止使用 console.log 和 debugger 语句。 indent 规则表示使用 2 个空格缩进。 quotes 规则表示使用单引号。 semi 规则表示不要使用分号。

4. 运行 ESLint：

在 package.json 文件中添加一个 script，用于运行 ESLint：

{
  "scripts": {
    "lint": "eslint --ext .js,.vue src"
  }
}

然后运行：

npm run lint
# 或者
yarn lint

ESLint 会检查 src 目录下所有 .js 和 .vue 文件，并输出错误和警告信息。

5. 集成到编辑器：

为了方便起见，建议将 ESLint 集成到你的编辑器中。这样可以在你编写代码的同时，实时检查代码风格问题。 常见的编辑器都有 ESLint 插件，例如 VS Code 的 ESLint 插件。 安装插件后，需要配置插件使用你的项目中的 ESLint 配置文件。

自定义 ESLint 规则：

如果你觉得 Airbnb 风格指南不符合你的需求，可以自定义 ESLint 规则。 在 .eslintrc.js 文件的 rules 字段中添加或修改规则。 例如，如果你想允许使用 console.log 语句，可以这样配置：

module.exports = {
  // ...
  "rules": {
    "no-console": "off" // 关闭 no-console 规则
  }
};

ESLint 规则有很多，可以参考 ESLint 官方文档：https://eslint.org/docs/rules/

Prettier：代码格式的“美容师”

Prettier 是一个代码格式化工具，可以自动格式化你的代码，使其符合特定的风格规则。它可以像美容师一样，给你的代码做个“SPA”，让它焕然一新。

1. 安装 Prettier：

npm install prettier --save-dev
# 或者
yarn add prettier --dev

2. 创建 Prettier 配置文件：

在项目根目录下创建一个 .prettierrc.js (或者 .prettierrc.json、.prettierrc.yml 等) 文件，用于配置 Prettier。

.prettierrc.js 示例：

module.exports = {
  semi: false, // 不要使用分号
  singleQuote: true, // 使用单引号
  trailingComma: 'all', // 在多行逗号分隔的句法结构中，始终添加尾随逗号
  printWidth: 120, // 超过多少字符换行
  tabWidth: 2, // tab的空格数
  useTabs: false, // 使用space替代tab
  bracketSpacing: true, // 在对象字面量中，{} 之间使用空格。
  arrowParens: 'avoid', // 只有一个参数的箭头函数的参数是否带圆括号（always, avoid）
  endOfLine: 'auto', // 结尾是 lf 还是 crlf 由系统决定
}

配置项说明：

配置项	说明
semi	是否在语句末尾添加分号。 false 表示不要添加分号。
singleQuote	是否使用单引号。 true 表示使用单引号。
trailingComma	在多行逗号分隔的句法结构中，是否添加尾随逗号。 all 表示始终添加尾随逗号。
printWidth	指定代码行的最大长度。 超过这个长度，Prettier 会自动换行。
tabWidth	指定缩进的空格数。
useTabs	是否使用 tab 缩进。 false 表示使用空格缩进。
bracketSpacing	在对象字面量中，是否在花括号之间添加空格。 true 表示添加空格。
arrowParens	只有一个参数的箭头函数的参数是否带圆括号。 avoid 表示尽量避免带圆括号。
endOfLine	结尾是 lf 还是 crlf 由系统决定。

3. 运行 Prettier：

在 package.json 文件中添加一个 script，用于运行 Prettier：

{
  "scripts": {
    "format": "prettier --write src/**/*.{js,vue}"
  }
}

然后运行：

npm run format
# 或者
yarn format

Prettier 会格式化 src 目录下所有 .js 和 .vue 文件。

4. 集成到编辑器：

同样，建议将 Prettier 集成到你的编辑器中。 常见的编辑器都有 Prettier 插件，例如 VS Code 的 Prettier 插件。 安装插件后，需要配置插件使用你的项目中的 Prettier 配置文件。 还可以配置编辑器在保存文件时自动格式化代码。

ESLint + Prettier：珠联璧合，天下无敌

ESLint 负责代码质量，Prettier 负责代码格式。它们两个配合使用，可以实现代码风格的完全统一。

1. 安装相关依赖：

npm install eslint-plugin-prettier eslint-config-prettier --save-dev
# 或者
yarn add eslint-plugin-prettier eslint-config-prettier --dev

• eslint-plugin-prettier： 将 Prettier 作为 ESLint 的一个规则运行，这样可以在 ESLint 中检查代码格式问题。
• eslint-config-prettier： 关闭所有与 Prettier 冲突的 ESLint 规则，避免 ESLint 和 Prettier 产生冲突。

2. 配置 ESLint：

修改 .eslintrc.js 文件：

module.exports = {
  // ...
  "extends": [
    "eslint:recommended",
    "plugin:vue/essential",
    "airbnb-base",
    "plugin:prettier/recommended" // 放在最后，覆盖之前的配置
  ],
  "plugins": [
    "vue",
    "prettier"
  ],
  "rules": {
    // ...
  }
};

• 在 extends 数组中添加 plugin:prettier/recommended。 确保它在最后，这样可以覆盖之前的配置。
• 在 plugins 数组中添加 prettier。

3. 修改 package.json：

修改 lint 命令，使其也运行 Prettier：

{
  "scripts": {
    "lint": "eslint --ext .js,.vue src --fix" ,
    "format": "prettier --write src/**/*.{js,vue}"
  }
}

加上 --fix 参数，ESLint 会自动修复一些简单的代码风格问题。

工作流程：

1. 你编写代码。
2. 保存文件时，Prettier 自动格式化代码。
3. 运行 ESLint，检查代码质量和格式问题。
4. ESLint 自动修复一些简单的代码风格问题。
5. 你手动修复 ESLint 报告的错误和警告。

Git Hooks：代码提交前的“守门员”

Git Hooks 是一些在 Git 操作前后自动运行的脚本。 我们可以使用 Git Hooks 在代码提交前运行 ESLint 和 Prettier，确保提交的代码符合代码风格规范。

1. 安装 Husky 和 lint-staged：

npm install husky lint-staged --save-dev
# 或者
yarn add husky lint-staged --dev

• husky： 可以让你轻松地使用 Git Hooks。
• lint-staged： 只对 Git 暂存区中的文件运行 ESLint 和 Prettier，提高效率。

2. 配置 Husky 和 lint-staged：

在 package.json 文件中添加以下配置：

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

• husky.hooks.pre-commit： 指定在 pre-commit 钩子中运行 lint-staged 命令。 pre-commit 钩子在 git commit 命令执行前运行。
• lint-staged： 指定要运行的命令。 这里对 src 目录下所有 .js 和 .vue 文件运行 eslint --fix 和 prettier --write 命令，然后使用 git add 命令将修改后的文件添加到暂存区。

3. 启用 Husky：

运行以下命令启用 Husky：

npx husky install
# 或者
yarn husky install

工作流程：

1. 你修改代码。
2. 运行 git commit 命令。
3. Husky 触发 pre-commit 钩子，运行 lint-staged 命令。
4. lint-staged 对暂存区中的文件运行 ESLint 和 Prettier。
5. 如果 ESLint 或 Prettier 发现错误，会阻止提交。
6. 你修复错误，然后重新提交。

总结

通过 ESLint 和 Prettier 这对黄金搭档，我们可以轻松地实现 Vue 项目代码风格的统一。 ESLint 负责代码质量，Prettier 负责代码格式，Git Hooks 负责代码提交前的检查。 它们三个配合使用，可以打造一个高质量、易维护的 Vue 项目。

最后，希望大家都能写出赏心悦目的代码，让你的同事和未来的自己感谢你！ 谢谢大家！