前端代码规范（前端代码规范 eslint）

## 前端代码规范### 简介随着 Web 应用的日益复杂化，团队合作开发已成为常态。为了提高代码的可读性、可维护性和可复用性，制定一套统一的前端代码规范至关重要。本文将详细介绍前端代码规范的各个方面，帮助团队构建高质量的 Web 应用。### 一、 代码风格#### 1. 缩进与空格- 使用

4个空格

进行缩进，避免使用制表符。 - 在操作符两侧添加空格，例如 `a + b` 而不是 `a+b`。 - 在函数定义的参数列表中，逗号后添加空格。 - 代码块之间使用空行分隔，提高代码的可读性。#### 2. 命名规范-

变量和函数名

使用

驼峰命名法

，例如 `userName`、`getUserData()`。 -

常量

使用

全大写字母

，单词之间用下划线分隔，例如 `MAX_USER_COUNT`。 -

类名

使用

帕斯卡命名法

，例如 `UserInfo`、`ShoppingCart`。 -

文件名

应该清晰明了，与文件内容相关，可以使用驼峰命名法或使用 `-` 分隔单词，例如 `user-info.js` 或 `userInfo.js`。#### 3. 语句规则- 每行代码尽量不要超过

80 个字符

。 - 避免使用分号结尾，除非一行代码中包含多个语句。 - 使用单引号 `'` 包裹字符串，除非字符串中包含单引号，则使用双引号 `"` 包裹。 - 使用模板字符串拼接字符串，提高代码可读性。### 二、 HTML 代码规范#### 1. 语义化标签- 使用语义化的 HTML 标签，例如 `