前端代码规范落地实践，统一团队开发风格

一、为什么需要代码规范？

团队协作开发时，每个人写代码的习惯不同：有人喜欢用空格缩进，有人偏爱制表符；有人写组件时把所有逻辑堆在一个文件里，有人则拆分成多个小模块。如果没有统一规范，项目会逐渐变成"缝合怪"——能运行但难以维护。

举个例子（技术栈：JavaScript + Vue 3）：

// 不规范示例：混合使用单引号/双引号，缩进随意
const badExample = {
  name: "张三",
  age:28,
  hobbies: ['篮球','游泳','游戏']
}

// 规范示例：统一单引号，2空格缩进
const goodExample = {
  name: '张三',
  age: 28,
  hobbies: ['篮球', '游泳', '游戏']
}

二、如何制定规范？

1. 基础规则

• 缩进：统一用2个空格（比制表符更通用）
• 引号：优先单引号（减少Shift键磨损）
• 分号：要么全加要么全不加

2. Vue组件规范示例

<template>
  <!-- 组件名用 PascalCase -->
  <UserCard :user-data="user" />
</template>

<script setup>
// 导入顺序：第三方库 -> 本地组件
import { ref } from 'vue'
import UserCard from './UserCard.vue'

// 变量命名：驼峰式
const user = ref({
  userName: '李四',
  userId: '123'
})
</script>

<style scoped>
/* 选择器用 kebab-case */
.user-card {
  font-size: 14px;
}
</style>

三、自动化工具落地

1. ESLint配置示例

在.eslintrc.js中添加：

module.exports = {
  rules: {
    'quotes': ['error', 'single'], // 强制单引号
    'indent': ['error', 2],        // 2空格缩进
    'vue/multi-word-component-names': 'off' // 允许单单词组件名
  }
}

2. Git提交拦截

通过husky在提交时自动检查：

# 安装依赖
npm install husky lint-staged --save-dev

# package.json配置
"lint-staged": {
  "*.{js,vue}": "eslint --fix"
}

四、解决落地阻力

1. 渐进式策略

• 第一阶段：只检查新代码
• 第二阶段：逐步改造旧代码

2. 常见问题处理

// 特殊场景例外处理（通过注释临时禁用规则）
/* eslint-disable-next-line no-alert */
alert('临时调试用') 

五、持续维护技巧

1. 每周代码审查时抽查规范执行情况
2. 在README.md中维护"规范速查表"
3. 用VSCode插件自动格式化（推荐Prettier）

六、效果评估

实施三个月后：

• 代码冲突减少40%
• 新人上手时间缩短60%
• Code Review效率提升明显