Eslint+stylelint+prettier+commitlint规范项目开发流程详解

2024-01-16 10:25:04

前言

在前端开发中，代码风格规范是一个非常重要的环节。它可以使代码更易于阅读、维护和理解，并有助于减少错误的发生。目前，业界比较流行的代码风格规范工具有Eslint、Stylelint、Prettier和Commitlint。本文将详细讲解如何使用这四个工具来规范项目开发，帮助你轻松实现代码风格一致、代码质量提升、代码可读性增强。

Eslint

Eslint是一个用于检查JavaScript代码风格的工具。它可以帮助你发现代码中的错误、警告和潜在的问题。Eslint提供了一系列的规则，你可以根据自己的需要选择启用或禁用这些规则。

安装Eslint

npm install --save-dev eslint

配置Eslint

在项目根目录下创建.eslintrc.js文件，并添加如下配置：

module.exports = {
  "extends": "eslint:recommended",
  "rules": {
    "semi": ["error", "always"],
    "quotes": ["error", "double"],
    "no-trailing-spaces": ["error"],
    "no-multiple-empty-lines": ["error"]
  }
};

运行Eslint

npx eslint .

Stylelint

Stylelint是一个用于检查CSS代码风格的工具。它可以帮助你发现代码中的错误、警告和潜在的问题。Stylelint提供了一系列的规则，你可以根据自己的需要选择启用或禁用这些规则。

安装Stylelint

npm install --save-dev stylelint

配置Stylelint

在项目根目录下创建.stylelintrc.js文件，并添加如下配置：

module.exports = {
  "extends": "stylelint-config-standard",
  "rules": {
    "indentation": ["error", 2],
    "max-nesting-depth": ["error", 3],
    "no-empty-source": ["error"],
    "no-eol-whitespace": ["error"]
  }
};

运行Stylelint

npx stylelint .

Prettier

Prettier是一个用于格式化代码的工具。它可以帮助你自动格式化代码，使代码更易于阅读和理解。Prettier提供了一系列的配置选项，你可以根据自己的需要进行配置。

安装Prettier

npm install --save-dev prettier

配置Prettier

在项目根目录下创建.prettierrc.js文件，并添加如下配置：

module.exports = {
  "semi": true,
  "trailingComma": "es5",
  "singleQuote": true,
  "printWidth": 80
};

运行Prettier

npx prettier .

Commitlint

Commitlint是一个用于检查提交消息的工具。它可以帮助你确保提交消息符合规范，并防止出现不规范的提交消息。Commitlint提供了一系列的规则，你可以根据自己的需要选择启用或禁用这些规则。

安装Commitlint

npm install --save-dev commitlint

配置Commitlint

在项目根目录下创建.commitlintrc.js文件，并添加如下配置：

module.exports = {
  "extends": ["@commitlint/config-conventional"],
  "rules": {
    "subject-max-length": [2, "always", 72],
    "subject-min-length": [2, "always", 3],
    "body-max-length": [2, "always", 200],
    "body-min-length": [2, "always", 10]
  }
};