Lint 规范

warning

下面的插件要注意版本变化导致配置方式有变化，先查看官方文档和 GitHub

Husky

husky 可以在执行 git 命令时，执行自定义的程序脚本，可以理解成一个能运行脚本的平台。用于在项目里添加 git hooks，在 commit 前校验代码规范、commit 信息规范等。

# 安装
pnpm add -D husky

# 初始化
pnpm exec husky init

添加钩子：

echo "npm test" > .husky/pre-commit

V9 之前的版本：

# 激活
pnpm exec husky install

# 生成 script 命令
npm pkg set scripts.prepare="husky install"

绕过校验：git commit -m 'msg' --no-verify，或者简写成：git commit -m 'msg' -n

lint-staged

对暂存区执行脚本（git add）

github

# 安装
pnpm add -D lint-staged

# 向husky中添加lint-staged
npx husky add .husky/pre-commit 'npx lint-staged'

配置 lint-staged 可以在package.json中，或者创建.lintstagedrc文件

在package.json文件中配置：

{
  "scripts": {
    "lint-staged": "lint-staged",
    "lint-staged:js": "eslint --ext .js,.jsx,.ts,.tsx"
  },
  "lint-staged": {
    "**/*.{js,jsx,ts,tsx}": "npm run lint-staged:js",
    "**/*.{js,jsx,tsx,ts,less,md,json}": ["prettier --write"]
  }
}

更详细示例：

{
  "name": "automate",
  "scripts": {
    "lint": "npm run lint:js && npm run lint:prettier && npm run tsc",
    "lint-staged": "lint-staged",
    "lint-staged:js": "eslint --ext .js,.jsx,.ts,.tsx",
    "lint:fix": "eslint --fix --cache --ext .js,.jsx,.ts,.tsx --format=pretty ./src ",
    "lint:js": "eslint --cache --ext .js,.jsx,.ts,.tsx --format=pretty ./src",
    "lint:prettier": "prettier -c --write \"**/**.{js,jsx,tsx,ts,less,md,json}\" --end-of-line auto",
    "prepare": "husky install",
    "prettier": "prettier -c --write \"**/**.{js,jsx,tsx,ts,less,md,json}\"",
    "tsc": "tsc --noEmit"
  },
  "lint-staged": {
    "**/*.{js,jsx,ts,tsx}": "npm run lint-staged:js",
    "**/*.{js,jsx,tsx,ts,less,md,json}": ["prettier --write"]
  }
}

.lintstagedrc配置

{
  "**/*.{js,jsx,ts,tsx}": "npm run lint-staged:js",
  "**/*.{js,jsx,tsx,ts,less,md,json}": ["prettier --write"]
}

Commitlint

commitlint 是在运行 git commmit -m 'xxx' 时，用来检测提交信息是否符合定义的规范

github

优点：

清晰的提交记录
自动生成 changlog 日志

type 类型：

feat: 新功能
fix: 修复问题
docs: 文档修改
style: 代码格式修改，如修改了空格、格式缩进，不改变代码逻辑
refactor: 代码重构，没有加新功能或者修复问题
perf: 性能优化，比如提升性能、体验
test: 测试用例，包括单元测试、集成测试等
build: 改变了构造工具或外部依赖项
chore: 改变构建流程、或者增加依赖库、工具等
revert: 回滚到上一个版本
ci 持续集成修改

# 安装
pnpm add -D @commitlint/{config-conventional,cli}

# 创建 commitlint.config.js 或者 .cjs
echo "module.exports = {extends: ['@commitlint/config-conventional']}" > commitlint.config.js

# 添加
npx husky add .husky/commit-msg 'npx --no -- commitlint --edit "$1"'

commitzen

git 的规范化提交工具，通过命令行交互，辅助填写 commit 信息

github

提交时只需使用 git cz 或仅使用 cz，而不是 git commit

pnpm add commitizen -g

# 使用 cz-conventional-changelog 适配器初始化项目
commitizen init cz-conventional-changelog --pnpm --save-dev --save-exact

Prettier

保存文件自动格式化代码

github

安装 vscode 插件：Prettier - Code formatter

# 安装
pnpm add --save-dev --save-exact prettier

创建.prettierrc配置文件

示例：

{
  "singleQuote": true,
  "printWidth": 120,
  "htmlWhitespaceSensitivity": "ignore",
  "tabWidth": 2,
  "trailingComma": "none",
  "bracketSpacing": true
}

创建.prettierignore配置文件，忽视不需要格式化的文件

示例：

**/*.svg
/dist
.dockerignore
.DS_Store
.eslintignore
*.png
*.toml
docker
.editorconfig
Dockerfile*
.gitignore
.prettierignore
LICENSE
.eslintcache
*.lock
yarn-error.log
.history
CNAME
/build
/public

格式化所有文件

# npm
npx prettier . --write

# pnpm
pnpm exec prettier . --write

Eslint

检测代码语法规范和错误

安装

安装 vscode 插件：Eslint，该扩展使用安装在打开的工作区文件夹中的 ESLint 库

在项目中安装：

pnpm add eslint -D

生成配置文件

在 vscode 中打开命令面板（cmd + shift + p），输入：Create ESLint configuration，按照提示生成配置文件

忽略文件

在项目根目录新建.eslintignore文件，写入文件路径，eslint 就会忽略对这些的文件的检查

dist

Stylelint

检测和格式化样式文件语法

安装 vscode 插件：stylelint

Editorconfig

官网

统一编辑器设置

安装 vscode 插件：EditorConfig for VS Code

添加.editorconfig配置文件，示例：

# http://editorconfig.org
root = true

[*]
indent_style = space
indent_size = 2
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true

[*.md]
trim_trailing_whitespace = false

[Makefile]
indent_style = tab

Husky​

lint-staged​

Commitlint​

commitzen​

Prettier​

Eslint​

安装​

生成配置文件​

忽略文件​

Stylelint​

Editorconfig​

Husky

lint-staged

Commitlint

commitzen

Prettier

Eslint

安装

生成配置文件

忽略文件

Stylelint

Editorconfig