%20(2).svg)
项目简介
本项目是一个基于前端工具链的代码规范与提交自动化示例，集成了 ESLint、Prettier、Husky、Commitlint 和 Standard - version 等工具，旨在帮助开发者提高代码质量、统一代码风格，并通过自动化工具简化版本管理和提交流程。
项目的主要特性和功能
- ESLint：提供 JavaScript 和 TypeScript 的代码检查和语法规范，支持 React 和 React Hooks。
- Prettier：自动格式化代码，确保代码风格一致。
- Husky：在 Git 提交前自动执行代码检查和格式化，确保提交的代码符合规范。
- Commitlint：校验 Git 提交信息，确保提交信息符合 Conventional Commits 规范。
- Standard - version：自动生成 changelog、版本号，并自动打 tag 和 commit，简化版本管理和发布流程。
安装使用步骤
假设用户已经下载了本项目的源码文件，按以下步骤操作：
1. 安装依赖：使用 pnpm 或 npm 安装项目所需的依赖。
bash
pnpm install
2. 配置 ESLint：在项目根目录下创建 .eslintrc.cjs 文件，配置 ESLint 规则和插件。
bash
module.exports = {
env: {
node: true,
es2021: true
},
extends: [
'eslint:recommended',
'plugin:react/recommended',
'plugin:@typescript-eslint/recommended',
'prettier'
],
parser: '@typescript-eslint/parser',
parserOptions: {
ecmaFeatures: {
jsx: true
},
ecmaVersion: 'latest',
sourceType: 'module'
},
plugins: ['react', '@typescript-eslint', 'react-hooks', 'prettier'],
rules: {
quotes: ['error', 'single'],
semi: 'off',
'prettier/prettier': 'error'
}
}
3. 配置 Prettier：在项目根目录下创建 .prettierrc 文件，配置 Prettier 的格式化规则。
json
{
"singleQuote": true,
"semi": false,
"trailingComma": "none",
"arrowParens": "avoid",
"tabWidth": 2,
"printWidth": 120
}
4. 配置 Husky：初始化 Husky 钩子，并在 package.json 中添加 prepare 脚本。
bash
npx husky install
在 package.json 中添加：
json
"scripts": {
"prepare": "husky install"
}
5. 配置 Commitlint：在项目根目录下创建 .commitlintrc.cjs 文件，配置 Commitlint 规则。
bash
module.exports = {
extends: ['@commitlint/config-conventional']
}
6. 配置 Standard - version：在 package.json 中添加 release 脚本。
json
"scripts": {
"release": "standard-version"
}
7. 执行代码检查和格式化：使用以下命令执行 ESLint 和 Prettier。
bash
npm run lint
npm run prettier
8. 提交代码：使用 git commit 命令提交代码时，Husky 会自动执行代码检查和格式化，并校验提交信息。
bash
git add .
git commit -m "feat: add new feature"
9. 版本管理和发布：使用 npm run release 命令自动生成 changelog、版本号，并自动打 tag 和 commit。
bash
npm run release
10. 推送代码：将代码和 tag 推送到远程仓库。
bash
git push --follow-tags origin main
通过以上步骤，您可以快速集成并使用这些工具，提升代码质量和开发效率。
下载地址
点击下载 【提取码: 4003】【解压密码: www.makuang.net】