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']
   };