前端规范化实践：团队协作与代码质量

1、前端代码规范化的好处

1.1、提高代码可读性

代码结构和风格保持一致，开发者能够快速理解代码的意图和逻辑，无论是自己回顾旧代码还是团队成员之间的协作，都能减少理解成本。

1.2、提升代码可维护性

当需要对代码进行修改或扩展功能时，能够更快速地定位和修改相关部分。随着项目的迭代，减少因代码混乱导致的维护困难和成本增加。

1.3、增强团队协作效率

有助于团队成员遵循统一的工作流程，提高开发效率。例如，在代码审查过程中，统一的规范使得审查工作更加高效，能够更快地发现和解决问题。新成员能够更快地熟悉代码融入团队项目。

1.4、提高代码质量

避免一些常见的错误和潜在的漏洞，例如变量命名不规范、代码重复等问题，从而提高代码的稳定性和可靠性。

2、eslint配置

eslint.nodejs.cn/docs/latest...

3、prettier格式化规则配置

eslint偏向于把控项目的代码质量，而prettier更偏向于统一项目的编码风格。eslint有小部分的代码格式化功能，一般都是和prettier结合使用

ruby 复制代码

{
    // 配置文件的元数据，指向 Prettier 配置文件的 JSON 模式
    "$schema": "https://json.schemastore.org/prettierrc",
    // 每行代码的最大字符数，超过这个长度会进行换行
    "printWidth": 100,
    // 每个缩进级别的空格数量
    "tabWidth": 2,
    // 是否使用制表符（Tab）进行缩进
    "useTabs": false,
    // 是否在语句末尾添加分号
    "semi": false,
    // 是否使用单引号代替双引号
    "singleQuote": true,
    // 对象属性引号的使用规则，"as-needed" 表示仅在必要时添加引号
    "quoteProps": "as-needed",
    // JSX 中是否使用单引号
    "jsxSingleQuote": false,
    // 多行代码时，是否在末尾添加逗号，"es5" 表示遵循 ES5 规范添加逗号
    "trailingComma": "es5",
    // 对象字面量的大括号内是否添加空格
    "bracketSpacing": true,
    // 箭头函数参数是否总是添加括号
    "arrowParens": "always",
    // 格式化范围的起始位置
    "rangeStart": 0,
    // 格式化范围的结束位置，这里使用最大安全整数表示无限范围
    "rangeEnd": 9007199254740991,
    // 是否要求代码文件开头有特定的格式化指令
    "requirePragma": false,
    // 是否在格式化后的文件开头插入格式化指令
    "insertPragma": false,
    // 文档换行的规则，"always" 表示总是换行
    "proseWrap": "always",
    // HTML 中空白字符的敏感规则，"css" 表示遵循 CSS 盒模型规则
    "htmlWhitespaceSensitivity": "css",
    // 换行符的类型，"lf" 表示使用 Unix 风格的换行符
    "endOfLine": "lf"
}

{
"$schema": "https://json.schemastore.org/prettierrc",
"printWidth": 100,
"tabWidth": 2,
"useTabs": false,
"semi": false,
"singleQuote": true,
"quoteProps": "as-needed",
"jsxSingleQuote": false,
"trailingComma": "es5",
"bracketSpacing": true,
"arrowParens": "always",
"rangeStart": 0,
"rangeEnd": 9007199254740991,
"requirePragma": false,
"insertPragma": false,
"proseWrap": "always",
"htmlWhitespaceSensitivity": "css",
"endOfLine": "lf"
}

4、安装vite-plugin-eslint

vite的一个插件，让项目可以方便的得到eslint支持，完成eslint配置后，可以快速的将其集成进vite之中，便于在代码不符合eslint规范时给出提示

csharp 复制代码

yarn add -D vite-plugin-eslint

vite.config.js配置eslintPlugin

css 复制代码

import eslintPlugin from 'vite-plugin-eslint'
plugins: [vue(), eslintPlugin()]

5、安装Husky

Husky 是一个用于在 git 进程的不同阶段运行脚本的工具，例如 add、commit、push 等；Husky会规范我们的代码管理工作

sql 复制代码

yarn add -D husky
npx husky init

常用的 git hooks
pre-commit：由 git commit 调用，在 commit 之前执行
commit-msg：由 git commit 或 git merge 调用
pre-merge-commit：由 git merge 调用，在 merge 之前执行
pre-push：被 git push 调用，在 git push 之前执行，防止进行推送

csharp 复制代码

yarn add -D lint-staged

在package.json添加如何下代码

css 复制代码

// 表示在执行git commit 的时候，会触发pre-commit里的npx lint-staged命令，从而触发package.json里的lint-staged的命令。从而触发eslint . --fix和prettier --write src/
"lint-staged": {
    "*.{js,jsx,ts,tsx,vue}": [
      "eslint . --fix",
      "prettier --write src/"
    ]
  }

添加git hooks，pre-commit钩子; 添加的是lint-staged 对git暂存区代码的格式化操作，在.husky/pre-commit文件，添加新的指令

bash 复制代码

检查代码命令：
npx lint-staged

将命令添加到.husky/pre-commit文件中

6、commitlint: 安装，制定提交规范

sql 复制代码

yarn add -D @commitlint/config-conventional @commitlint/cli

根目录下新建commitlint.config.js，根据需要引入commitlint规范：

php 复制代码

/**
 * 配置 commitlint 规则，确保提交信息符合规范
 * 继承自 @commitlint/config-conventional 配置
 */
export default {
  // 继承 @commitlint/config-conventional 规则集
  extends: ['@commitlint/config-conventional'],
  // 自定义规则配置
  rules: {
    // 提交信息主体前必须有一个空行
    'body-leading-blank': [1, 'always'],
    // 提交信息主体每行最大长度为 100 个字符
    'body-max-line-length': [2, 'always', 100],
    // 提交信息脚注前必须有一个空行
    'footer-leading-blank': [1, 'always'],
    // 提交信息脚注每行最大长度为 100 个字符
    'footer-max-line-length': [2, 'always', 100],
    // 提交信息头部最大长度为 100 个字符
    'header-max-length': [2, 'always', 100],
    // 提交信息的作用域（scope）必须为小写
    'scope-case': [2, 'always', 'lower-case'],
    // 提交信息的主题（subject）不能使用句子首字母大写、单词首字母大写、帕斯卡命名法、全大写
    'subject-case': [2, 'never', ['sentence-case', 'start-case', 'pascal-case', 'upper-case']],
    // 提交信息的主题（subject）不能为空
    'subject-empty': [2, 'never'],
    // 提交信息的主题（subject）末尾不能使用句号
    'subject-full-stop': [2, 'never', '.'],
    // 提交信息的类型（type）必须为小写
    'type-case': [2, 'always', 'lower-case'],
    // 提交信息的类型（type）不能为空
    'type-empty': [2, 'never'],
    // 提交信息的类型（type）必须是指定枚举值中的一个
    'type-enum': [
      2,
      'always',
      [
        // 影响构建系统或外部依赖项的更改
        'build',
        // 日常事务性的更改
        'chore',
        // 更改 CI 配置文件和脚本
        'ci',
        // 文档修改
        'docs',
        // 新增功能
        'feature',
        // bug 修复
        'fix',
        // 性能优化
        'perf',
        // 代码重构
        'refactor',
        // 回滚操作
        'revert',
        // 代码格式调整
        'style',
        // 测试相关更改
        'test',
        // 翻译相关更改
        'translation',
        // 安全相关更改
        'security',
      ],
    ],
  },
}

在.husky目录下新建commit-msg文件，将原来的语句注释掉，写入新的指令

css 复制代码

npx --no-install commitlint --edit $1

7、自定义eslint规则插件

AST 语法树(Abstract Syntax Tree 即抽象语法树)

astexplorer.net/

javascript 复制代码

//自定义 ESLint 规则：禁止使用 "demo" 作为变量名
export const noDemoVars = {
  meta: {
    messages: {
      // 定义错误消息，当变量名使用 "demo" 时会触发此消息
      noDemoVarsMsg: '不能使用"demo"作为变量名',
    },
  },
  create(context) {
    return {
      VariableDeclarator(node) {
        const variableName = node.id.name
        if (variableName === 'demo') {
          context.report({
            // 指定错误发生的节点
            node: node.id,
            // 指定错误消息的标识符
            messageId: 'noDemoVarsMsg',
          })
        }
      },
    }
  },
}

arduino 复制代码

// 从规则文件中导入
import { noDemoVars } from './noDemoVars.js'

/**
 * 导出规则对象，包含规则名称和对应的规则定义
 */
export const eslintPlugin = {
  // 规则名称为 require-get-prefix，对应导入的 meta 和 create 函数
  rules: {
    'no-demo-vars': noDemoVars,
  },
}

eslint.config.js中配置自定义插件

css 复制代码

// 引入自定义插件
import { eslintPlugin } from './plugins/eslintPlugin.js'

{
    files: ['src/**/*.{js,mjs,jsx,vue}'],
    plugins: { demo: eslintPlugin },
    rules: {
      'demo/no-demo-vars': 'error',
    },
  },