一行代码便可配置的eslint+prettier+husky+commitlint，让你的编码更加优雅

前端

2023-09-15 17:56:25

1. 前言

作为一名合格的工程师，在代码编写过程中，保持良好的编码风格和统一的代码格式是十分重要的。这不仅可以提高代码的可读性和可维护性，还可以减少代码错误的产生。

传统的代码格式化和代码校验方式需要手动进行，费时费力。因此，我们强烈推荐使用ESLint、Prettier、Husky和Commitlint等工具来构建一个自动化代码格式化和代码校验环境。

2. 环境准备

安装Node.js
安装npm
安装编辑器（如VSCode）

3. 安装工具

3.1 ESLint

ESLint是一个JavaScript代码静态检查工具。它可以帮助你发现代码中的问题，如语法错误、拼写错误、代码风格不一致等。

3.2 Prettier

Prettier是一个代码格式化工具。它可以自动将代码格式化成一致的风格，消除手动的格式化工作。

3.3 Husky

Husky是一个Git钩子工具。它允许你在提交代码时执行一些任务，如运行ESLint和Prettier。

3.4 Commitlint

Commitlint是一个提交消息校验工具。它可以帮助你确保提交消息的格式和内容符合规范。

4. 配置工具

4.1 安装ESLint

npm install --save-dev eslint

4.2 配置ESLint

在项目根目录下创建.eslintrc.js文件，并添加以下内容：

module.exports = {
  extends: ['eslint:recommended'],
  rules: {
    // 你可以在这里添加或修改ESLint规则
  }
};

4.3 安装Prettier

npm install --save-dev prettier

4.4 配置Prettier

在项目根目录下创建.prettierrc.js文件，并添加以下内容：

module.exports = {
  // 你可以在这里添加或修改Prettier规则
};

4.5 安装Husky

npm install --save-dev husky

4.6 配置Husky

在项目根目录下创建.huskyrc文件，并添加以下内容：

#!/bin/sh

# 在提交代码之前运行ESLint和Prettier
npx eslint --fix .
npx prettier --write .

# 在提交消息之前运行Commitlint
npx commitlint --edit

4.7 安装Commitlint

npm install --save-dev commitlint

4.8 配置Commitlint

在项目根目录下创建.commitlintrc.js文件，并添加以下内容：

module.exports = {
  rules: {
    'body-leading-blank': [1, 'always'],
    'footer-leading-blank': [1, 'always'],
    'header-max-length': [2, 'always', 72],
    'scope-case': [2, 'always', 'lower-case'],
    'subject-case': [2, 'always', 'sentence-case'],
    'subject-empty': [2, 'never'],
    'subject-full-stop': [2, 'never'],
    'type-case': [2, 'always', 'lower-case'],
    'type-empty': [2, 'never'],
    'type-enum': [
      2,
      'always',
      ['build', 'chore', 'ci', 'docs', 'feat', 'fix', 'perf', 'refactor', 'revert', 'style', 'test']
    ]
  }
};