ESLint
ESLint 是在 ECMAScript/JavaScript 代码中识别和报告模式匹配的工具,它的目标是保证代码的一致性和避免错误。
安装
pnpm add eslint -D
初始化
npx eslint --init
根据提示选择适合的项进行初始化(脚手架创建的项目可能会自带,就不用自己生成了)。最终会在根目录下生成文件 .eslintrc.js
,内容大致如下:
module.exports = {
env: {
browser: true,
es2021: true,
node: true
},
extends: ['eslint:recommended', 'plugin:vue/essential'],
parserOptions: {
ecmaVersion: 'latest',
sourceType: 'module'
},
plugins: ['vue'],
rules: {
'vue/multi-word-component-names': 'off',
'vue/valid-v-slot': 'off'
},
globals: {
workbox: 'readonly'
}
}
添加 lint
命令
在 package.json
文件中的 script
中添加
{
"scripts": {
"lint": "eslint .",
"lint:fix": "eslint --fix ."
}
}
运行
pnpm lint
如果写一行代码就要执行一遍 lint
命令,这效率就太低了。所以我们可以配合 vscode 的 ESLint 插件,并在设置文件中添加以下内容,实现每次保存代码时,自动尽可能修复代码的错误。
"editor.codeActionsOnSave": {
"source.fixAll": "explicit",
"source.fixAll.eslint": "explicit"
}
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
参考
import tseslint from 'typescript-eslint'
import eslintPluginPrettierRecommended from 'eslint-plugin-prettier/recommended'
export default tseslint.config(
// 其他的配置添加在上面
eslintPluginPrettierRecommended
)
初始化
创建文件 .prettierrc.js
,并填入以下内容
/** @type {import("prettier").Options} */
module.exports = {
printWidth: 160,
useTabs: false,
semi: false,
singleQuote: true,
arrowParens: 'avoid',
trailingComma: 'none',
endOfLine: 'lf'
}
添加 format
命令
在 package.json
中的 scripts
中添加(自行修改匹配的文件)
{
"scripts": {
"format": "prettier --write ."
}
}
运行
pnpm format
配合 vscode 的 Prettier - Code formatter 插件,并在设置文件中添加以下内容,实现每次保存代码时,自动格式化代码。
{
"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode"
}
lint-staged
对 git 暂存的文件运行 linter,不要让 💩 溜进你的代码库!
安装
pnpm add lint-staged -D
添加 lint-staged
命令
在 package.json
中添加
"lint-staged": {
"*.{js,cjs,ts,tsx,vue}": [
"prettier --write",
"eslint --fix"
],
"*.{md,css,scss,json,yaml}": "prettier --write"
}
默认情况下,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
)
{
"scripts": {
"prepare": "husky"
}
}
添加 hooks
实现在运行 git commit
时,在之前运行命令 npx lint-staged
。运行出错会中断 git commit
的执行
echo "npx lint-staged" > .husky/pre-commit
commitlint
是一个验证 git commit message 内容的工具
安装
pnpm add @commitlint/cli @commitlint/config-conventional -D
初始化
添加 husky
钩子(在 commit-msg
触发时,执行对 commit
消息的验证)
echo "npx --no -- commitlint --edit \$1" > .husky/commit-msg
修改 package.json
添加 commitlint
使用的共享配置
{
"commitlint": {
"extends": ["@commitlint/config-conventional"]
}
}