在日常工作中,为了保证良好的代码规范,增加项目质量和可维护性,我们经常会使用一些工具来检查代码的规范性。本文将为你介绍一些常用的工具配置方案,以及如何使用自动化工具去简化配置。
文中涉及到的工具:eslint
、stylelint
、prettier
、ls-lint
、commitlint
、husky
、 lint-staged
、mrm
文章代码和配置较多,建议做为笔记收藏,以备不时之需。
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}\"",
}
}
在实际项目中,ESLint
和 Stylelint
主要用于代码检查和修复,而代码美化可以使用 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
一般是配合 ESLint
、Stylelint
一起使用来进行代码规范检查。但有时候它们的某些规则可能与 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
配合使用。通过配置 husky
的 commit-msg
钩子,可以在提交代码时自动运行 commitlint 进行提交信息的检查。
同时,husky 还可以与 eslint
、stylelint
、ls-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
:添加 ESLintprettier
:添加 Prettierstylelint
:添加 Stylelintlint-staged
:添加 lint-stagedtypescript
:添加 TypeScriptgitignore
:添加 .gitignorepackage
:添加 package.jsonjest
:添加 Jesttravis
:添加 Travis CI
执行这些预设任务时,会根据任务的需求自动创建或更新相应的文件,并安装必要的依赖项。你也可以自定义任务,以满足项目的特定需求。
上文中用到的 eslint
、prettier
、stylelint
等都包含在预设任务里面,现在我们使用 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 仓库中查看。