web项目规范配置（husky、eslint、lint-staged、commit）

在现代Web开发中，规范配置有助于保持代码质量和一致性。通过使用Husky、ESLint、lint-staged和Commit规范，可以实现自动化的代码质量检查和规范化的提交流程。下面是详细的配置指南。

一、初始化项目

首先，确保你有一个Node.js项目。如果还没有，可以通过以下命令初始化：

mkdir my-web-project
cd my-web-project
npm init -y
​

二、安装必要的依赖

安装Husky、ESLint、lint-staged以及相关的依赖：

npm install --save-dev husky eslint lint-staged @commitlint/config-conventional @commitlint/cli
​

三、配置ESLint

ESLint是一个静态代码分析工具，用于识别和修复JavaScript中的问题。

1. 初始化ESLint配置：

   npx eslint --init
   ​
   

   按照提示选择你的配置选项。例如，可以选择检查语法、找到问题和强制代码风格，选择JavaScript模块、React等。

2. 创建或修改 .eslintrc.json文件，确保包含以下内容：

   {
     "env": {
       "browser": true,
       "es2021": true
     },
     "extends": [
       "eslint:recommended",
       "plugin:react/recommended",
       "plugin:@typescript-eslint/recommended"
     ],
     "parserOptions": {
       "ecmaFeatures": {
         "jsx": true
       },
       "ecmaVersion": 12,
       "sourceType": "module"
     },
     "plugins": [
       "react",
       "@typescript-eslint"
     ],
     "rules": {
       "semi": ["error", "always"],
       "quotes": ["error", "double"]
     }
   }
   ​
   

四、配置lint-staged

lint-staged用于在提交代码之前运行ESLint，只检查暂存区中的文件。

1. 在 package.json中添加以下配置：

   "lint-staged": {
     "*.js": [
       "eslint --fix",
       "git add"
     ]
   }
   ​
   

五、配置Husky

Husky用于在Git hooks中执行自定义脚本，比如在提交代码之前运行ESLint。

1. 初始化Husky：

   npx husky install
   ​
   

2. 在 package.json中添加husky钩子：

   "husky": {
     "hooks": {
       "pre-commit": "lint-staged",
       "commit-msg": "npx --no-install commitlint --edit $1"
     }
   }
   ​
   

3. 创建Husky配置文件：

   npx husky add .husky/pre-commit "npx lint-staged"
   ​
   

六、配置Commitlint

Commitlint用于强制执行规范化的提交消息格式。

1. 创建 commitlint.config.js文件，并添加以下内容：

   module.exports = {
     extends: ['@commitlint/config-conventional']
   };
   ​
   

分析说明表

结论

通过上述配置，可以确保在Web项目开发过程中自动进行代码质量检查和规范化提交。Husky、ESLint、lint-staged和Commitlint共同作用，使得每次提交代码之前都会自动检查代码风格和语法问题，防止不符合规范的代码进入代码库。这不仅提高了代码质量，还保证了团队协作中的一致性。希望这些配置指南能帮助你建立高效的开发流程。