ESLint
ESLint 是在 ECMAScript/JavaScript 代码中识别和报告模式匹配的工具,它的目标是保证代码的一致性和避免错误。
安装
pnpm add eslint -D
初始化
npx eslint --init
根据提示选择适合的项进行初始化(脚手架创建的项目可能会自带,就不用自己生成了)。最终会在根目录下生成文件 .eslintrc.js
,内容大致如下:
添加 lint
命令
在 package.json
文件中的 script
中添加
运行
pnpm lint
如果写一行代码就要执行一遍 lint
命令,这效率就太低了。所以我们可以配合 vscode 的 ESLint 插件,并在设置文件中添加以下内容,实现每次保存代码时,自动尽可能修复代码的错误。
Prettier
Prettier 是代码格式化工具
安装
pnpm add prettier eslint-config-prettier eslint-plugin-prettier -D
eslint-config-prettier:关闭所有不必要或可能与 Prettier
冲突的 ESLint
规则
eslint-plugin-prettier:将 Prettier
作为 ESLint
规则运行
eslint-plugin-prettier
附带一个可一次性设置两者的配置 eslint-plugin-prettier/recommended
参考
初始化
创建文件 .prettierrc.js
,并填入以下内容
添加 format
命令
在 package.json
中的 scripts
中添加(自行修改匹配的文件)
运行
pnpm format
配合 vscode 的 Prettier - Code formatter 插件,并在设置文件中添加以下内容,实现每次保存代码时,自动格式化代码。
lint-staged
对 git 暂存的文件运行 linter,不要让 💩 溜进你的代码库!
安装
pnpm add lint-staged -D
添加 lint-staged
命令
在 package.json
中添加
默认情况下,lint-staged
将同时运行配置的任务,所以注意匹配文件重叠问题。参考
运行
npx lint-staged
husky
husky
是一个用来管理git hook
的工具,git hook
即在我们使用git
提交代码的过程中会触发的钩子
安装
pnpm add husky -D
初始化
npx husky init
将在根目录生成文件 .husky
,同时将在 package.json
文件中添加下面的命令(这条命令是让以后别人 git clone
代码后,安装依赖之后自动运行这条命令,从而自动初始化 husky
)
添加 hooks
实现在运行 git commit
时,在之前运行命令 npx lint-staged
。运行出错会中断 git commit
的执行
commitlint
是一个验证 git commit message 内容的工具
安装
pnpm add @commitlint/cli @commitlint/config-conventional -D
初始化
添加 husky
钩子(在 commit-msg
触发时,执行对 commit
消息的验证)
修改 package.json
添加 commitlint
使用的共享配置