2、代码规范：集成ESLint与Prettier，配置统一的代码风格和校验规则

说实话，代码规范这件事，我见过太多团队栽跟头了。

刚入行那会儿，我总觉得代码能跑就行。直到有一次接手一个老项目，打开文件一看——有的用双引号，有的用单引号；有的行尾加分号，有的不加；缩进更是五花八门，2格、4格、甚至还有Tab和空格混用的。那天我光格式化代码就花了大半天。嗯，从那以后，我再也不敢忽视代码规范了。

这一章，我们就来聊聊怎么用ESLint和Prettier，给Vue项目定一套「铁规矩」。

2.1 为什么需要ESLint + Prettier？

先搞清楚这两个工具的分工：

• ESLint：负责「逻辑校验」。比如你定义了一个变量但没使用，它会报错。它管的是代码质量。
• Prettier：负责「格式美化」。比如一行代码太长自动换行，引号统一用单引号。它管的是代码颜值。

你想想看，如果只装ESLint，你写出来的代码可能逻辑没问题，但格式乱七八糟。如果只装Prettier，代码倒是好看了，但可能藏着未使用的变量、重复的import等隐患。所以，两者必须一起上。

2.2 安装与基础配置

我个人习惯在项目初始化时就装好这些工具。如果你是用Vite创建的项目，可以这样操作：

npm install -D eslint prettier eslint-plugin-vue eslint-config-prettier

这里解释一下每个包的作用：

包名	作用
eslint	核心校验工具
prettier	核心格式化工具
eslint-plugin-vue	Vue专属的ESLint规则集
eslint-config-prettier	关闭ESLint中与Prettier冲突的规则

2.3 配置ESLint

在项目根目录创建 .eslintrc.cjs 文件（Vite项目推荐用cjs后缀）：

module.exports = {
  root: true,
  env: {
    browser: true,
    es2021: true,
    node: true,
  },
  extends: [
    'eslint:recommended',
    'plugin:vue/vue3-recommended',
    'prettier',
  ],
  parserOptions: {
    ecmaVersion: 'latest',
    sourceType: 'module',
  },
  rules: {
    // 这里可以覆盖或补充规则
    'vue/multi-word-component-names': 'off',
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
  },
};

这里有个坑，我踩过。你看 vue/multi-word-component-names 这条规则，默认要求组件名必须是多个单词。但像 Home.vue、About.vue 这种单文件组件，其实很常见。所以我一般直接关掉它。

2.4 配置Prettier

创建 .prettierrc 文件：

{
  "semi": false,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "all",
  "printWidth": 100,
  "arrowParens": "always"
}

这些配置项什么意思？我简单说一下：

• semi: false —— 不要分号。我个人觉得Vue项目里分号有点多余，当然这看团队习惯。
• singleQuote: true —— 统一单引号。双引号在HTML里容易跟属性值混淆。
• tabWidth: 2 —— 缩进2格。Vue官方也是这么推荐的。
• trailingComma: "all" —— 所有地方都加尾逗号。这样加新属性时不会产生多余的git diff。
• printWidth: 100 —— 每行最多100字符。超过就自动换行。
• arrowParens: "always" —— 箭头函数参数始终加括号。比如 (x) => x 而不是 x => x。

2.5 集成到项目中

配置好了，怎么用？我建议做两件事：

第一，添加npm脚本。 在 package.json 里加上：

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

这样你随时可以运行 npm run lint 检查代码，或者 npm run format 一键格式化。

第二，配置编辑器自动格式化。 以VS Code为例，在 .vscode/settings.json 里加上：

{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode"
}

这样每次保存文件，ESLint自动修复问题，Prettier自动格式化代码。你只管写，剩下的交给工具。

2.6 避坑指南

我曾经在一个项目里遇到过这样的问题：ESLint和Prettier明明都配置好了，但保存文件时，ESLint报的错和Prettier格式化的结果互相打架。比如ESLint要求缩进4格，Prettier却改成2格。

后来发现，是因为 eslint-config-prettier 没有放在 extends 数组的最后。记住，它必须最后加载，才能覆盖掉前面所有的样式规则。

还有一个常见问题：团队里有人用WebStorm，有人用VS Code，格式化效果不一样。我的建议是——统一用Prettier作为唯一的格式化工具，并且在项目里放一个 .editorconfig 文件，保证跨编辑器的基本一致性。

root = true

[*]
indent_style = space
indent_size = 2
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true

说白了，代码规范这件事，不是靠人自觉，而是靠工具强制。你想想看，如果每次提交代码前，ESLint和Prettier自动帮你检查、格式化，哪还有那么多扯皮的事？

嗯，这一章就到这里。下一章我们聊聊怎么配置Git提交规范，让每一次commit都干干净净。