在 Vue 项目中，如何集成和配置 ESLint 和 Prettier，确保团队代码风格的一致性？ - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

各位靓仔靓女，大家好！今天咱们来聊聊 Vue 项目里如何把 ESLint 和 Prettier 这对好基友安排明白，让团队代码风格统一得像复制粘贴一样。

开场白：代码风格，颜值即正义

各位都是写代码的，应该深有体会：看着一份风格统一、赏心悦目的代码，心情都会好很多。反之，缩进忽长忽短，引号单双乱飞，简直是对程序员眼睛的折磨。所以，统一代码风格，绝不仅仅是美观问题，更是团队协作效率和项目可维护性的保障。

ESLint 负责代码质量，Prettier 负责代码格式化，两者配合，简直是代码界的“美颜+质检”。下面，我们就一步一步地把它们请到咱们的 Vue 项目里来。

第一步：安装依赖，兵马未动粮草先行

首先，我们需要安装 ESLint 和 Prettier 相关的依赖包。打开你的终端，进入 Vue 项目根目录，输入以下命令：

npm install eslint prettier eslint-plugin-vue eslint-config-prettier eslint-plugin-prettier -D
# 或者使用 yarn
yarn add eslint prettier eslint-plugin-vue eslint-config-prettier eslint-plugin-prettier -D

这里解释一下这些包都是干啥的：

eslint: ESLint 的核心包，负责代码检查。
prettier: Prettier 的核心包，负责代码格式化。
eslint-plugin-vue: ESLint 的 Vue 插件，专门用于检查 Vue 代码。
eslint-config-prettier: 解决 ESLint 和 Prettier 冲突的配置，让 Prettier 接管格式化，ESLint 专注于代码质量检查。
eslint-plugin-prettier: 将 Prettier 集成到 ESLint 中，让 ESLint 通过 Prettier 来格式化代码。

-D 参数表示将这些包作为开发依赖安装，因为它们只在开发阶段使用。

第二步：初始化 ESLint，打造代码规范的基石

安装完依赖后，我们需要初始化 ESLint。在终端输入以下命令：

npx eslint --init
# 或者使用 yarn
yarn eslint --init

这个命令会引导你进行一系列选择，根据你的项目情况进行配置。我来模拟一下这个过程，并给出一些建议：

? 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

# 建议选择 "To check syntax, find problems, and enforce code style"，让 ESLint 检查语法、发现问题，并强制执行代码风格。

? What type of modules does your project use? ...
> JavaScript modules (import/export)
  CommonJS (require/exports)
  None of these

# 如果你的项目使用 ES Modules (import/export)，就选择 "JavaScript modules (import/export)"。如果是 CommonJS (require/exports)，就选择 "CommonJS (require/exports)"。现在的 Vue 项目一般都用 ES Modules。

? Which framework does your project use? ...
> React
  Vue.js
  Svelte
  None of these

# 必须选择 "Vue.js"。

? Does your project use TypeScript? ...
> No / Yes

# 如果你的项目使用 TypeScript，就选择 "Yes"，否则选择 "No"。

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

# 根据你的代码运行环境选择。Vue 项目一般都在浏览器中运行，所以选择 "Browser"。如果你的项目也包含 Node.js 代码，可以同时选择 "Browser" 和 "Node"。

? How would you like to define a style for your project? ...
> Use a popular style guide
  Answer questions about your style
  Inspect your JavaScript file(s)

# 建议选择 "Use a popular style guide"，使用流行的代码风格指南。

? Which style guide do you want to follow? ...
> Airbnb: https://github.com/airbnb/javascript
  Standard: https://github.com/standard/standard
  Google: https://github.com/google/eslint-config-google
  XO: https://github.com/xojs/eslint-config-xo

# 这里可以根据你的喜好选择一个代码风格指南。Airbnb、Standard 和 Google 都是比较流行的选择。我个人比较喜欢 Airbnb 的风格，因为它比较严格，能帮助你写出更规范的代码。

? What format do you want your config file to be in? ...
> JavaScript
  YAML
  JSON

# 选择配置文件格式。建议选择 "JavaScript"，因为 JavaScript 格式更灵活，方便修改。

Checking peerDependencies of eslint-config-airbnb@latest
The following packages are not compatible with the current eslint-config-airbnb installation.
eslint-plugin-import@^2.27.5: Required by eslint-config-airbnb@latest
eslint@>=5.0.0: Required by eslint-plugin-import@^2.27.5
eslint@>=7.23.0: Required by [email protected]
eslint-plugin-jsx-a11y@^6.6.1: Required by eslint-config-airbnb@latest
eslint@>=5.0.0: Required by eslint-plugin-jsx-a11y@^6.6.1
eslint-plugin-react@^7.31.8: Required by eslint-config-airbnb@latest
eslint@>=5.0.0: Required by eslint-plugin-react@^7.31.8
Would you like to install them now with npm? ...
> No / Yes

# 这里会提示你安装一些 peerDependencies。选择 "Yes" 安装即可。

完成以上步骤后，ESLint 会在你的项目根目录下生成一个 .eslintrc.js 文件（或者 .eslintrc.yaml 或 .eslintrc.json，取决于你选择的配置文件格式）。这个文件就是 ESLint 的配置文件，你可以根据自己的需要修改它。

第三步：配置 ESLint，让它更懂你的代码

打开 .eslintrc.js 文件，你会看到一些基本的配置。我们需要对它进行一些修改，让 ESLint 更好地适应 Vue 项目。

首先，我们需要添加对 Vue 插件的支持。在 extends 数组中添加 'plugin:vue/vue3-essential'（如果你使用的是 Vue 3）或 'plugin:vue/essential'（如果你使用的是 Vue 2）。

然后，我们需要配置 Prettier。在 extends 数组中添加 'plugin:prettier/recommended'。这个配置会启用 ESLint 的 Prettier 插件，让 ESLint 使用 Prettier 来格式化代码。

最后，我们需要配置一些自定义的规则。在 rules 对象中添加你需要的规则。例如，你可以添加以下规则来强制使用单引号：

module.exports = {
  root: true,
  env: {
    node: true
  },
  'extends': [
    'plugin:vue/vue3-essential',
    'eslint:recommended',
    '@vue/eslint-config-typescript',
    'plugin:prettier/recommended'
  ],
  parserOptions: {
    ecmaVersion: 2020
  },
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'quotes': ['error', 'single'], // 强制使用单引号
    'semi': ['error', 'never'], // 禁止使用分号
    'vue/multi-word-component-names': 'off' // 关闭组件命名警告
  }
}

这里解释一下几个常用的规则：

'no-console': 禁止在生产环境中使用 console.log。
'no-debugger': 禁止在生产环境中使用 debugger。
'quotes': 强制使用单引号或双引号。
'semi': 强制使用或禁止使用分号。
'vue/multi-word-component-names': 关闭组件命名警告，Vue CLI 创建的项目默认开启了这个警告，要求组件名必须是多个单词组成，如果你觉得没必要，可以关闭它。

第四步：配置 Prettier，打造代码格式化的利器

接下来，我们需要配置 Prettier。在项目根目录下创建一个 .prettierrc.js 文件，并添加以下配置：

module.exports = {
  semi: false, // 禁止使用分号
  singleQuote: true, // 使用单引号
  trailingComma: 'all', // 在多行逗号分隔的语法结构中，始终添加尾随逗号
  printWidth: 120, // 最大行长
  tabWidth: 2, // Tab 键宽度
  useTabs: false, // 不使用 Tab 键
};

这里解释一下几个常用的配置：

semi: 是否使用分号。
singleQuote: 是否使用单引号。
trailingComma: 是否在多行逗号分隔的语法结构中添加尾随逗号。
printWidth: 最大行长。超过这个长度的代码会被 Prettier 自动换行。
tabWidth: Tab 键宽度。
useTabs: 是否使用 Tab 键进行缩进。

你还可以根据自己的喜好添加其他的配置。Prettier 提供了很多配置选项，可以参考 Prettier 的官方文档。

第五步：忽略文件，让 ESLint 和 Prettier 各司其职

有些文件我们不需要 ESLint 和 Prettier 进行检查和格式化，例如 node_modules 目录下的文件。为了忽略这些文件，我们需要在项目根目录下创建一个 .eslintignore 文件和 .prettierignore 文件，并添加需要忽略的文件或目录。

.eslintignore 文件的内容如下：

node_modules
dist

.prettierignore 文件的内容如下：

node_modules
dist

这两个文件的内容可以保持一致。

第六步：集成到 VS Code，提升开发效率

为了在 VS Code 中使用 ESLint 和 Prettier，我们需要安装一些插件。

首先，安装 ESLint 插件。在 VS Code 的扩展商店中搜索 "ESLint"，找到 ESLint 插件并安装。

然后，安装 Prettier 插件。在 VS Code 的扩展商店中搜索 "Prettier – Code formatter"，找到 Prettier 插件并安装。

安装完插件后，我们需要配置 VS Code，让它在保存文件时自动格式化代码。打开 VS Code 的设置，搜索 "editor.formatOnSave"，勾选 "Editor: Format On Save" 选项。

然后，搜索 "eslint.validate"，点击 "Edit in settings.json" 链接，在 settings.json 文件中添加以下配置：

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "vue",
    "typescript",
    "typescriptreact"
  ]
}

这个配置会让 VS Code 在保存文件时使用 Prettier 进行格式化，并使用 ESLint 对 JavaScript、JavaScriptReact、Vue、TypeScript 和 TypeScriptReact 文件进行检查。

第七步：配置 Git Hooks，保证代码质量的最后一道防线

为了保证提交到 Git 仓库的代码都是符合规范的，我们可以使用 Git Hooks。Git Hooks 可以在 Git 提交、推送等操作前后执行一些脚本。我们可以使用 Git Hooks 来运行 ESLint 和 Prettier，检查代码是否符合规范，如果不符合，就阻止提交。

这里我们使用 husky 和 lint-staged 这两个工具来实现 Git Hooks。

首先，安装 husky 和 lint-staged：

npm install husky lint-staged -D
# 或者使用 yarn
yarn add husky lint-staged -D

然后，启用 Git Hooks：

npx husky install
# 或者使用 yarn
yarn husky install

这个命令会在你的项目根目录下创建一个 .husky 目录，用于存放 Git Hooks 脚本。

然后，配置 package.json 文件，添加以下配置：

{
  "scripts": {
    "lint": "eslint --ext .js,.vue,.ts src",
    "format": "prettier --write src",
    "prepare": "husky install"
  },
  "lint-staged": {
    "*.{js,vue,ts}": [
      "eslint --fix",
      "prettier --write"
    ]
  }
}

这里解释一下这些配置：

lint: 用于手动运行 ESLint 的命令。
format: 用于手动运行 Prettier 的命令。
prepare: 在 npm install 或 yarn install 后自动运行 husky install 命令，启用 Git Hooks。
lint-staged: 配置需要在 Git 暂存区中的文件上运行的命令。这里配置了对 .js、.vue 和 .ts 文件运行 ESLint 和 Prettier。

最后，创建一个 .husky/pre-commit 文件，并添加以下内容：

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

npx lint-staged
# 或者使用 yarn
yarn lint-staged

这个文件会在每次提交代码前运行 lint-staged 命令，检查暂存区中的代码是否符合规范。如果不符合，提交会被阻止。

总结：代码规范，从我做起

好了，到这里，我们就完成了 ESLint 和 Prettier 在 Vue 项目中的集成和配置。总结一下步骤：

步骤	操作
1	安装依赖：`npm install eslint prettier eslint-plugin-vue eslint-config-prettier eslint-plugin-prettier -D`
2	初始化 ESLint：`npx eslint --init`
3	配置 ESLint：修改 `.eslintrc.js` 文件，添加对 Vue 插件的支持，配置 Prettier，添加自定义规则。
4	配置 Prettier：创建 `.prettierrc.js` 文件，添加 Prettier 配置。
5	忽略文件：创建 `.eslintignore` 文件和 `.prettierignore` 文件，添加需要忽略的文件或目录。
6	集成到 VS Code：安装 ESLint 插件和 Prettier 插件，配置 VS Code，让它在保存文件时自动格式化代码。
7	配置 Git Hooks：安装 `husky` 和 `lint-staged`，启用 Git Hooks，配置 `package.json` 文件，创建 `.husky/pre-commit` 文件。

通过以上步骤，我们就可以让 ESLint 和 Prettier 自动检查和格式化代码，保证团队代码风格的一致性，提高开发效率和项目可维护性。

记住，代码规范不仅仅是工具的事情，更是每个程序员的责任。从我做起，从现在做起，让我们的代码更加规范、更加美观！

今天的分享就到这里，感谢大家的聆听！如果有什么问题，欢迎随时提问。

发表回复 取消回复

发表回复取消回复