全部21 条规范

设置 HTML lang 属性必须

指定文档语言

使用 HTML5 文档类型必须

声明文档类型

图片必须添加 alt 属性必须

图片添加替代文本

使用语义化标签推荐

优先使用语义化标签

CSS 类名使用小写短横线必须

kebab-case 命名

预处理器使用嵌套规则推荐

SCSS/Less 嵌套层级控制

使用 CSS 变量管理主题色推荐

CSS 自定义属性

避免使用 !important必须

不要使用 important

变量使用 camelCase必须

驼峰命名法

优先使用 const，其次 let推荐

避免使用 var

使用严格相等 ===必须

禁止使用 ==

使用可选链操作符推荐

?. 安全访问属性

使用空值合并运算符 ??推荐

?? 默认值

避免使用 any必须

禁止 any

优先使用 interface 定义类型推荐

interface vs type

显式声明函数返回类型推荐

返回类型声明

优先使用 Composition API推荐

组合式 API

Props 使用 TypeScript 类型推荐

Props 类型定义

文件命名规范推荐

统一的文件命名

注释规范推荐

清晰有用的注释

使用 ESLint/Prettier 自动化必须

自动化代码规范

规范详情

设置 HTML lang 属性

必须遵守HTML

html 标签必须设置 lang 属性，帮助搜索引擎和屏幕阅读器正确解析文档语言。

✅ 推荐写法

<html lang="zh-CN">
  <!-- 中文页面 -->
</html>

<html lang="en-US">
  <!-- 英文页面 -->
</html>

❌ 避免写法

<html>
  <!-- 缺少 lang 属性 -->
</html>

缺少 lang 属性会影响 SEO 和可访问性，屏幕阅读器无法选择正确的语音。

编码规范指南

前端编码规范参考工具，收录 HTML、CSS/SCSS、JavaScript、TypeScript、Vue、React 等主流技术栈的编码规范，包括命名约定、代码风格、最佳实践、ESLint/Prettier 配置等。

功能特点

规范全面：覆盖主流前端技术栈
等级区分：必须/推荐/可选三级规范
对比示例：推荐写法 vs 避免写法对比
详细说明：每条规范的详细解释
工具配置：ESLint/Prettier 配置参考

规范分类

HTML 规范

设置 HTML lang 属性
使用 HTML5 文档类型
图片必须添加 alt 属性
使用语义化标签

CSS 规范

类名使用小写短横线（kebab-case）
预处理器嵌套层级控制
使用 CSS 变量管理主题色
避免使用 !important

JavaScript 规范

变量使用 camelCase
优先使用 const，其次 let
使用严格相等 ===
使用可选链操作符 ?.
使用空值合并运算符 ??

TypeScript 规范

避免使用 any
优先使用 interface
显式声明函数返回类型

Vue 规范

优先使用 Composition API
Props 使用 TypeScript 类型

React 规范

函数组件优先
Hooks 使用规则

通用规范

文件命名约定
注释规范
ESLint/Prettier 自动化

命名约定速查

类型	规范	示例
CSS 类名	kebab-case	`.user-profile`
JS/TS 变量	camelCase	`userName`
JS/TS 常量	UPPER_SNAKE_CASE	`MAX_RETRY`
组件文件名	PascalCase	`UserProfile.vue`
工具文件名	camelCase	`httpClient.ts`

使用场景

团队规范：制定团队编码规范参考
Code Review：检查代码是否符合规范
新手培训：帮助新人快速掌握团队规范
项目初始化：配置 ESLint/Prettier 规则

工具推荐

ESLint：代码质量检查
Prettier：代码格式化
Stylelint：CSS/SCSS 规范
commitlint：提交信息规范

注意事项

规范是团队共识，可根据项目调整
使用自动化工具减少人工检查
新规范先在部分文件试点