Vue 3 代码规范实战：用 ESLint、Prettier 与 lint-staged 把风格问题拦在提交前

为什么要把规范拦在提交前

代码评审里最没价值的争论就是格式：缩进几个空格、单引号还是双引号、import 顺序。把这些交给工具，人和人只评审逻辑。本文用 ESLint + Prettier + lint-staged + husky 在 git 提交时自动格式化并拦截问题。

一、安装与基本配置

先装依赖，Vue 3 项目用 @vue/eslint-config-typescript 与 eslint-plugin-vue 即可。

npm i -D eslint prettier eslint-plugin-vue \
  @vue/eslint-config-typescript eslint-config-prettier

// .eslintrc.cjs
module.exports = {
  root: true,
  extends: [
    "plugin:vue/vue3-recommended",
    "eslint:recommended",
    "@vue/eslint-config-typescript",
    "prettier",
  ],
  rules: {
    "vue/multi-word-component-names": "off",
    "@typescript-eslint/no-unused-vars": ["warn", { argsIgnorePattern: "^_" }],
  },
};

二、让 Prettier 与 ESLint 不打架

eslint-config-prettier 把 ESLint 里和格式有关的规则关掉，格式完全交给 Prettier。Prettier 配置只关心风格，不关心逻辑。

{
  "semi": true,
  "singleQuote": false,
  "printWidth": 100,
  "trailingComma": "all"
}

三、用 lint-staged 只检查本次改动

全量 lint 很慢，lint-staged 只跑本次提交的文件。配合 husky 在 pre-commit 钩子里触发，速度可控。

// package.json 片段
{
  "lint-staged": {
    "*.{vue,ts,js}": ["eslint --fix", "prettier --write"]
  }
}

npx husky init
echo "npx lint-staged" > .husky/pre-commit

四、一条命令做 CI 校验

本地钩子可以被 --no-verify 跳过，所以 CI 里要再跑一遍，保证合并到主干的代码一定达标。

npm run lint -- --max-warnings=0

小结

ESLint 管逻辑风险（未使用变量、危险写法），Prettier 管格式，lint-staged 把范围收窄到本次改动，husky 把执行点卡在提交瞬间，CI 做最后兜底。四件套齐了，代码风格就从“靠自觉”变成“靠流程”。