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

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

文中涉及到的工具:eslintstylelintprettierls-lintcommitlinthuskylint-stagedmrm

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

ESLint

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

1. 安装

shell 复制代码
npm install eslint eslint-config-prettier --save-dev

2. 配置

  • 在项目根目录创建 .eslintrc.js 文件
shell 复制代码
touch .eslintrc.js
  • 修改 .eslintrc.js 配置
javascript 复制代码
module.exports = {
 env: {
   browser: true,
   es2021: true,
 },
 parserOptions: {
   sourceType: 'module',
 },
 extends: ["eslint:recommended", "prettier"]
}

更多配置请参考官方 文档

  • 修改 package.json
shell 复制代码
npm set-script lint "npx eslint --ext .js,.jsx,.vue src"
json 复制代码
{
  "scripts": {
    "lint": "npx eslint --ext .js,.jsx,.vue src"
  }
}

Stylelint

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

1. 安装

shell 复制代码
npm install -D stylelint stylelint-config-standard stylelint-config-prettier

2. 配置

  • 在项目根目录创建 .stylelintrc.js 文件
shell 复制代码
touch .stylelintrc.js
  • 修改 .stylelintrc.js 配置
javascript 复制代码
module.exports = {
  extends: ['stylelint-config-standard', 'stylelint-config-prettier'],
};

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

  • 修改 package.json
shell 复制代码
npm set-script lint "stylelint --fix \"src/**/*.{css,sass,scss}\""
json 复制代码
{
 "scripts": {
   "lint:css": "stylelint --fix \"src/**/*.{css,sass,scss}\"",
 }
}

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

Prettier

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

1. 安装

shell 复制代码
npm install prettier --save-dev

2. 配置

  • 创建配置文件
shell 复制代码
touch .prettierrc.js
  • 修改 .prettierrc.js 配置
javascript 复制代码
module.exports = {
  tabWidth: 2,
  semi: true,
  printWidth: 80,
  singleQuote: true,
  quoteProps: 'consistent',
  htmlWhitespaceSensitivity: 'strict',
};

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

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

3. 使用

shell 复制代码
npx prettier . --write

ls-lint

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

1. 安装

shell 复制代码
npm install @ls-lint/ls-lint

2. 配置

  • 在项目根目录创建 .ls-lint.yml 文件
shell 复制代码
touch .ls-lint.yml
  • 修改 .ls-lint.yml 配置
yaml 复制代码
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
shell 复制代码
npm set-script lint:ls "ls-lint"
json 复制代码
{
  "scripts": {
    "lint:ls": "ls-lint",
  }
}

Commitlint

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

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

1. 安装

shell 复制代码
npm install --save-dev @commitlint/{config-conventional,cli}

2. 配置

  • 在项目根目录下创建 commitlint.config.js 文件
shell 复制代码
echo "module.exports = {extends: ['@commitlint/config-conventional']}" > commitlint.config.js
javascript 复制代码
module.exports = {
  extends: ['@commitlint/config-conventional']
}

3. 工具

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

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

  • 安装命令行工具
shell 复制代码
npm install -D commitizen cz-git
  • 修改 package.json
shell 复制代码
npm set-script commit "git-cz"
json 复制代码
{
  "scripts": {
    "commit": "git-cz",
  },
}

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

json 复制代码
{
  "config": { 
    "commitizen": { "path": "node_modules/cz-git" } 
  }
}

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

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

Husky

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

1. 安装

shell 复制代码
npm install husky --save-dev

2. 初始化 husky

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

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

shell 复制代码
npx husky install

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

shell 复制代码
npm set-script prepare "husky install"
json 复制代码
{
  "scripts": {
    "prepare": "husky install"
  }
}

3. 增加 commit-msg 钩子

shell 复制代码
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. 安装

shell 复制代码
npm install lint-staged --save-dev

2. 配置

修改 package.json 文件

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

3. 增加 pre-commit 钩子

shell 复制代码
npx husky add .husky/pre-commit 'npx lint-staged'

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

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

mrm

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

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

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

shell 复制代码
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

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

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

  • 配置 ESLint
shell 复制代码
npx mrm@2 eslint

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

  • 配置 Prettier
shell 复制代码
npx mrm@2 prettier

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

  • 配置 lint-staged
shell 复制代码
npx mrm@2 lint-staged 

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

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

总结

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

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

相关推荐
ZL不懂前端36 分钟前
Content Security Policy (CSP)
前端·javascript·面试
乐闻x39 分钟前
ESLint 使用教程(一):从零配置 ESLint
javascript·eslint
我血条子呢1 小时前
[Vue]防止路由重复跳转
前端·javascript·vue.js
半开半落1 小时前
nuxt3安装pinia报错500[vite-node] [ERR_LOAD_URL]问题解决
前端·javascript·vue.js·nuxt
理想不理想v2 小时前
vue经典前端面试题
前端·javascript·vue.js
小阮的学习笔记2 小时前
Vue3中使用LogicFlow实现简单流程图
javascript·vue.js·流程图
YBN娜2 小时前
Vue实现登录功能
前端·javascript·vue.js
阳光开朗大男孩 = ̄ω ̄=2 小时前
CSS——选择器、PxCook软件、盒子模型
前端·javascript·css
小政爱学习!2 小时前
封装axios、环境变量、api解耦、解决跨域、全局组件注入
开发语言·前端·javascript