一、为什么需要代码规范工具

刚开始写Vue项目时，很多人会觉得："功能能跑就行，代码风格无所谓"。但随着项目变大，你会发现：

  • 同事的代码缩进用2空格，你习惯用4个
  • 有人写分号有人不写
  • 单引号和双引号混用

这些差异会导致：

  1. Git提交时出现大量无意义格式变更
  2. 代码review时总要纠结风格问题
  3. 新人接手项目要花时间适应各种写法

解决方案就是：用工具自动统一风格。这就像给团队配备"代码格式复印机"，所有人输出的代码都长一个样。

二、ESLint：代码质量检查员

2.1 基本配置

（示例技术栈：Vue 3 + JavaScript）

// .eslintrc.js
module.exports = {
  root: true,
  env: {
    node: true,
  },
  extends: [
    'eslint:recommended',       // ESLint官方推荐规则
    'plugin:vue/vue3-recommended', // Vue3专用规则
    'prettier'                 // 避免与Prettier冲突
  ],
  rules: {
    'vue/multi-word-component-names': 'off', // 允许单单词组件名
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off' // 生产环境禁用console
  }
}

2.2 核心功能

  • 错误检查：比如使用了未定义的变量
  • 风格建议：比如函数参数应该换行
  • 自动修复：运行eslint --fix能自动修正部分问题

2.3 注意事项

  1. 团队内部要先确定规则集，建议从eslint:recommended开始
  2. Vue项目需要安装专用插件：eslint-plugin-vue
  3. 遇到特殊规则可以通过rules单独配置

三、Prettier：代码格式化专家

3.1 配置示例

// .prettierrc
{
  "semi": false,          // 不加分号
  "singleQuote": true,    // 使用单引号
  "tabWidth": 2,          // 缩进2空格
  "trailingComma": "none" // 不加末尾逗号
}

3.2 与ESLint配合

安装eslint-config-prettier解决规则冲突：

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

然后在ESLint配置中扩展它：

extends: [
  // ...其他配置
  'prettier' // 必须放在最后
]

四、Git Hooks：提交前的自动检查

4.1 Husky + lint-staged配置

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

4.2 工作流程

  1. 当你执行git commit时
  2. 自动触发对暂存区文件的lint和format
  3. 如果有错误会阻止提交

五、完整示例：Vue组件规范

<!-- UserProfile.vue -->
<script setup>
// 使用ref定义响应式数据
const userInfo = ref({
  name: '张三',
  age: 28
})

// 计算属性
const isAdult = computed(() => userInfo.value.age >= 18)

// 方法采用驼峰命名
const updateAge = () => {
  userInfo.value.age++
}
</script>

<template>
  <!-- 组件根元素单个div -->
  <div class="user-profile">
    <!-- 属性使用连字符 -->
    <user-avatar :image-url="avatar" />
    
    <!-- v-if和v-for不写在同一元素 -->
    <template v-if="isAdult">
      <p v-for="item in items" :key="item.id">{{ item.text }}</p>
    </template>
  </div>
</template>

<style scoped>
/* CSS使用BEM命名规范 */
.user-profile {
  &__header {
    font-size: 1.2rem;
  }
}
</style>

六、技术方案对比

工具 优点 缺点
ESLint 可定制性强，支持语法检查 配置复杂
Prettier 格式化能力强，零配置 不能检查代码逻辑问题
Git Hooks 强制规范，避免漏检查 可能拖慢提交速度

七、常见问题解决

  1. VS Code保存时不自动格式化
    检查设置中是否启用：

    "editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode"

  2. 某些文件需要特殊规则
    创建覆盖规则：

    // .eslintrc.js
overrides: [
  {
    files: ['*.test.js'],
    rules: {
      'no-undef': 'off'
    }
  }
]

八、总结建议

  1. 新项目：建议直接使用Vue官方推荐的@vue/eslint-config-prettier
  2. 老项目：逐步引入，先加Prettier再补ESLint规则
  3. 团队协作：把配置文件纳入版本控制，确保所有人规则一致

这套方案就像给代码上了"三道保险"：

  • ESLint负责代码质量
  • Prettier统一代码外观
  • Git Hooks确保提交前必过检查

刚开始可能会觉得麻烦，但习惯后会发现：争论代码风格的时间减少了60%以上，团队可以更专注于业务逻辑开发。