Eslint+Prettier+Husky+Commitlint+Lint-staged+Commitizen：快速搭建标准化编程规范项目

2023-12-14 01:23:30

绪论：

在前端开发中，为了保证代码风格的统一和质量，我们通常会使用一些工具来帮助我们管理和规范代码。Eslint、Prettier、Husky、Commitlint、Lint-staged和Commitizen都是这样的工具。它们可以帮助我们自动格式化代码、检查代码风格、规范提交信息等。本文将带你快速搭建一套使用这些工具的标准化编程规范项目。

1. 安装必备工具：

首先，我们需要安装必要的工具。可以使用npm或yarn安装工具，本文以npm为例。

npm install -g eslint prettier husky commitlint lint-staged commitizen

安装完成后，可以通过以下命令检查是否安装成功：

eslint -v
prettier -v
husky -v
commitlint -v
lint-staged -v
commitizen -v

2. 初始化项目：

接下来，创建一个新的项目。

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

3. 安装Eslint和Prettier：

接下来，我们需要安装Eslint和Prettier，并配置相关的规则。

npm install eslint-config-airbnb-base eslint-plugin-import eslint-plugin-jsx-a11y --save-dev
npm install prettier --save-dev

在package.json文件中添加如下内容：

{
  "eslintConfig": {
    "extends": "airbnb-base"
  },
  "prettier": {
    "semi": true,
    "trailingComma": "all",
    "singleQuote": true,
    "printWidth": 100
  }
}

4. 安装Husky和Commitlint：

接下来，我们需要安装Husky和Commitlint，并配置相关的规则。

npm install husky commitlint-config-conventional --save-dev

在package.json文件中添加如下内容：

{
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "commitlint": {
    "extends": ["@commitlint/config-conventional"]
  }
}

5. 安装Lint-staged和Commitizen：

接下来，我们需要安装Lint-staged和Commitizen，并配置相关的规则。

npm install lint-staged commitizen --save-dev

在package.json文件中添加如下内容：

{
  "lint-staged": {
    "*.{js,jsx}": ["eslint --fix", "prettier --write"]
  },
  "commitizen": {
    "path": "./node_modules/cz-conventional-changelog"
  }
}