前端规范指南，让团队代码如出一辙！ESLint + Prettier + husky + lint-staged

本文从两个方向出发：1、git提交规范；2、代码风格统一

假如团队中的小伙伴在提交代码时没有遵循规范要求，例如只写了一个"修改"或"更新，这会给团队中其他小伙伴造成困扰呢，不得不花时间查看代码和推测逻辑。

不仅会浪费了时间和精力，可能会导致以下问题：

1. 可读性差
2. 维护困难
3. 变更历史不透明
4. 自动化工具的不兼容

如何统一代码风格，规范提交呢呢？ 推荐使用 ESLint + Prettier + husky + lint-staged

1、eslint (https://www.npmjs.com/package/eslint))
代码检测工具，检测并提示错误或警告信息
2、 husky (https://www.npmjs.com/package/husky))
Git hooks 工具, 可以在执行 git 命令时，执行自定义的脚本程序
3 、 lint-staged (https://www.npmjs.com/package/lint-staged))
对暂存区 (git add) 文件执行脚本 检测 校验
4、 prettier (https://www.npmjs.com/package/prettier))
代码自动化格式化工具，更好的代码风格效果
建议安装 -prettierc https://www.npmjs.com/package/prettierrc
快速生成pretter配置文件模板
【eslint和prettier冲突解决】eslint-config-prettier (https://www.npmjs.com/package/eslint-config-prettier))
5、 Commitizen (https://github.com/commitizen-tools/commitizen))
生成符合规范化提交信息的工具
6、commitlint（https://www.npmjs.com/package/@commitlint/config-conventional）
定义提交规则， 并检测内容是否符合定义的规范！

如项目中未有.gitgnore文件，建议先创建Git 忽略提交文件：

在项目跟目录创建一个 “.gitignore” 的文件来指定需要被忽略的文件或目录。
以下是一个简单的例子

# git配置文件-忽略提交文件
# **/xx目录 忽略指定目录下的所有文件
**/node_modules
**/package-lock.json

ESlint

eslint 是一个代码检测工具，用于检测代码中潜在的问题和错误，作用提高代码质量和规范。

安装步骤：

1、安装eslint

npm install eslint

2、快速构建 eslint 配置文件

npm init @eslint/config

参考如下gif操作：

执行完成后，自动生成 eslint 配置文件.eslintrc.js
可在 .eslintrc.js 中配置 rules 定义校验规则

    rules: {
   
         indent: ['error', 4], // 用于指定代码缩进的方式，这里配置为使用四个空格进行缩进。
        'linebreak-style': [0, 'error', 'windows'], // 用于指定换行符的风格，这里配置为使用 Windows 风格的换行符（\r\n）。
        quotes: ['error', 'single'], // 用于指定字符串的引号风格，这里配置为使用单引号作为字符串的引号。
        semi: ['error', 'always'], //用于指定是否需要在语句末尾添加分号，这里配置为必须始终添加分号。
        '@typescript-eslint/no-explicit-any': ['off'] // 用于配置 TypeScript 中的 "any" 类型的使用规则，这里配置为关闭禁止显式使用 "any" 类型的检查。
    }

husky：

husky 是一个 Git 钩子（Git hooks）工具，它可以让你在 Git 事件发生时执行脚本，进行代码格式化、测试等操作。

常见的钩子

1. pre-commit：在执行提交操作之前触发。适合用于在提交代码之前运行代码检查、格式化等操作。
2. commit-msg：在提交消息（Commit Message）编写完成后触发。可用于验证提交消息的格式、添加自定义规范等。
3. pre-push：在执行推送操作之前触发。适合用于在推送代码前运行测试、构建或其他自动化流程。
4. pre-receive：在接收到推送操作之前触发。通常可用于在推送到远程仓库之前进行更严格的代码检查和验证。
5. prepare-commit-msg：在打开提交消息编辑器之前触发。可以用于自动生成提交消息、添加代码相关的信息等。
6. post-commit：在提交操作完成后触发。适合用于执行提交后的自动化流程、生成文档等。

具体的使用步骤如下：

安装

注意！husky 是git项目的钩子函数，确保当前项目有 .git 配置文件，如没有 建议 git init 初始化

1. 在项目根目录下运行以下命令安装 husky：

npm install husky --save-dev

2. 启用git 钩子 输入以下命令

npm pkg set scripts.prepare="husky install"

安装成功后会在 package.json 文件中 script 中生成命令

注意！如为自动生成需手动添加，将以下内容粘贴到 package.json 文件中

// package.json