高效前端：代码规范工具配置指南

在日常工作中，为了保证良好的代码规范，增加项目质量和可维护性，我们经常会使用一些工具来检查代码的规范性。本文将为你介绍一些常用的工具配置方案，以及如何使用自动化工具去简化配置。

文中涉及到的工具：eslint、stylelint、prettier、ls-lint、commitlint、husky、 lint-staged、mrm

文章代码和配置较多，建议做为笔记收藏，以备不时之需。

ESLint

ESLint 一个开源的 JavaScript 代码检查工具。

1. 安装

npm install eslint eslint-config-prettier --save-dev

2. 配置

• 在项目根目录创建 .eslintrc.js 文件

touch .eslintrc.js

• 修改 .eslintrc.js 配置

module.exports = {
 env: {
   browser: true,
   es2021: true,
 },
 parserOptions: {
   sourceType: 'module',
 },
 extends: ["eslint:recommended", "prettier"]
}

更多配置请参考官方 文档

• 修改 package.json

npm set-script lint "npx eslint --ext .js,.jsx,.vue src"

{
  "scripts": {
    "lint": "npx eslint --ext .js,.jsx,.vue src"
  }
}

Stylelint

Stylelint 是一个用于检查CSS代码错误和编码风格的工具。

1. 安装

npm install -D stylelint stylelint-config-standard stylelint-config-prettier

2. 配置

• 在项目根目录创建 .stylelintrc.js 文件

touch .stylelintrc.js

• 修改 .stylelintrc.js 配置

module.exports = {
  extends: ['stylelint-config-standard', 'stylelint-config-prettier'],
};

你可以在 awesome-stylelint 中查找插件，更多配置请查看官方文档

• 修改 package.json

npm set-script lint "stylelint --fix \"src/**/*.{css,sass,scss}\""

{
 "scripts": {
   "lint:css": "stylelint --fix \"src/**/*.{css,sass,scss}\"",
 }
}

在实际项目中，ESLint 和 Stylelint 主要用于代码检查和修复，而代码美化可以使用 Prettier 来完成。

Prettier

Prettier 是一个代码格式化工具，支持多种语言和工具。

1. 安装

npm install prettier --save-dev

2. 配置

• 创建配置文件

touch .prettierrc.js

• 修改 .prettierrc.js 配置

module.exports = {
  tabWidth: 2,
  semi: true,
  printWidth: 80,
  singleQuote: true,
  quoteProps: 'consistent',
  htmlWhitespaceSensitivity: 'strict',
};

在项目中 Prettier 一般是配合 ESLint、Stylelint 一起使用来进行代码规范检查。但有时候它们的某些规则可能与 Prettier 相冲突，因此需要我们添加一些适配 Prettier 的配置以解决这些问题。

例如，在 ESLint 中安装 eslint-config-prettier，在 Stylelint 中安装 stylelint-config-prettier ，以便他们更好地配合 Prettier 使用。

3. 使用

npx prettier . --write

ls-lint

ls-lint 是一个极快的文件和目录名称 linter , 可以帮我们规范项目中的文件和目录命名，保证一致性。

1. 安装

npm install @ls-lint/ls-lint

2. 配置

• 在项目根目录创建 .ls-lint.yml 文件

touch .ls-lint.yml

• 修改 .ls-lint.yml 配置

ls:
  .dir: kebab-case
  src:
    .js: camelCase | PascalCase
    .ts: kebab-case
    .vue: kebab-case | regex:^App$
    .d.ts: camelCase

ignore:
  - node_modules
  - public

更多规则和配置可查看官方文档

• 修改 package.json

npm set-script lint:ls "ls-lint"

{
  "scripts": {
    "lint:ls": "ls-lint",
  }
}

Commitlint

Commitlint 是一个用于检查Git提交信息是否符合规范的工具。

常用代码提交规范请参考 Angular

1. 安装

npm install --save-dev @commitlint/{config-conventional,cli}

2. 配置

• 在项目根目录下创建 commitlint.config.js 文件

echo "module.exports = {extends: ['@commitlint/config-conventional']}" > commitlint.config.js

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

3. 工具

commitizen：基于Node.js的命令行工具，辅助生成标准化规范化的提交信息。

cz-git：一款工程性更强，轻量级，高度自定义，标准输出格式的 commitizen 适配器。

• 安装命令行工具

npm install -D commitizen cz-git

• 修改 package.json

npm set-script commit "git-cz"

{
  "scripts": {
    "commit": "git-cz",
  },
}

修改 package.json 指定使用的适配器

{
  "config": { 
    "commitizen": { "path": "node_modules/cz-git" } 
  }
}

实际工作中，我们不会单独使用 commitlint ，而是与 husky 配合使用。通过配置 husky 的 commit-msg 钩子，可以在提交代码时自动运行 commitlint 进行提交信息的检查。

同时，husky 还可以与 eslint、stylelint、ls-lint 一起使用，形成完整的工作流，实现代码任务的自动化。

Husky

Husky 是一个Git Hooks工具，用于在提交代码时运行相应的脚本进行规范检查。

1. 安装

npm install husky --save-dev

2. 初始化 husky

初始化 husky，并创建 .husky 文件夹。

不同版本的 husky 配置可能不一样，具体配置可查看文档。

npx husky install

在 package.json 中增加 prepare 钩子，用于在 npm install 之后自动初始化 Husky

npm set-script prepare "husky install"

{
  "scripts": {
    "prepare": "husky install"
  }
}

3. 增加 commit-msg 钩子

npx husky add .husky/commit-msg 'npx --no -- commitlint --edit ${1}'

默认情况下，所有 git hooks 都在$GIT_DIR/hooks目录下，请参见 git-hooks。

使用 husky 配置的 linter 会检查所有文件，如果只想检查我们修改过（或新增）的文件，可以配合 lint-staged 工具使用。

lint-staged

lint-staged 是一个在 git 暂存区文件上运行 linter 的工具，可以避免对所有文件都运行 linter 任务。

1. 安装

npm install lint-staged --save-dev

2. 配置

修改 package.json 文件

{
  "lint-staged": {
    "*.{js,ts}": "eslint --fix",
    "*.{css,scss,sass}": "stylelint --fix",
    "**/*": "prettier --write",
    "src/**": "ls-lint"
  }
}

3. 增加 pre-commit 钩子

npx husky add .husky/pre-commit 'npx lint-staged'

到这里基本上所有工具都配置完成了，但是相信很多小伙伴一定觉得太麻烦，那有没有工具能简化我们的配置呢？

接下来我给大家推荐一个集成工具，使用 mrm 来简化这些工作。

mrm

mrm 是一个命令行工具，提供了一系列预定义的任务，用于帮助开发者自动化执行项目配置。

mrm 可以执行各种任务，包括添加常见的配置文件（如 .gitignore、.eslintrc）、安装依赖项、创建文档文件等。它提供了许多预设任务，可以根据项目需要进行选择和执行。

你可以通过执行以下命令查看所有支持的预设任务：

npx mrm@2

以下是一些常用的 mrm 预设任务：

• eslint：添加 ESLint
• prettier：添加 Prettier
• stylelint：添加 Stylelint
• lint-staged：添加 lint-staged
• typescript：添加 TypeScript
• gitignore：添加 .gitignore
• package：添加 package.json
• jest：添加 Jest
• travis：添加 Travis CI

执行这些预设任务时，会根据任务的需求自动创建或更新相应的文件，并安装必要的依赖项。你也可以自定义任务，以满足项目的特定需求。

上文中用到的 eslint、prettier、stylelint 等都包含在预设任务里面，现在我们使用 mrm 去完成这些配置。

配置 ESLint

npx mrm@2 eslint

执行该命令后，mrm 会自动创建 .eslintrc.json、.eslintignore 和 .gitignore 文件，并更新 package.json 文件，以添加相应的脚本和安装 ESLint 依赖。

配置 Prettier

npx mrm@2 prettier

执行该命令后，mrm 会自动创建 .prettierrc 文件，并更新 package.json 文件，以添加相应的脚本和安装 Prettier 依赖。

配置 lint-staged

npx mrm@2 lint-staged 

执行该命令后，mrm 会在 package.json 中添加 lint-staged 配置项，并在根目录下创建一个 .husky 目录，里面包含了执行 npx lint-staged 命令的基本配置。

除此之外，你也可以尝试其他任务。mrm 适用于新项目的初始化，也可以应用于已有项目的配置更新。它不会覆盖已有的配置，而是会根据项目本身或环境推断配置。

总结

通过配置这些工具，我们可以实现代码的自动检查和修复，与版本控制系统集成，确保团队成员遵守相同的代码规范。这些工具能够显著提高代码质量和开发效率，同时减少开发中的错误和问题。

如果你想体验一下完整的配置 Demo，可以在 GitHub 仓库中查看。