- 引入
eslint
使用pnpm create @eslint/config
进行eslint
配置。配置可执行命令"lint": "eslint \"src/**/*.{vue,ts,tsx,js,jsx}\" --fix"
- 引入
husky 和 lint-staged
在提交过程中进行校验和fix
安装pnpm add husky lint-staged -D
。
配置prepare": "husky install"
并执行npm run prepare
执行npx husky add .husky/pre-commit "npx lint-staged"
生成钩子函数文件
配置lint-staged
"lint-staged": {
"src/**/*.{vue,ts}": [
"prettier --write .",
"eslint --fix --cache"
],
"*.md": [
"prettier --write"
]
},
配置prettier
,安装eslint-plugin-prettier 和 eslint-config-prettier
,然后在eslintrc
中配置
extends: [
'prettier',
],
- 配置
commitlint
安装pnpm add @commitlint/cli @commitlint/config-conventional -D
创建.commitlintrc.cjs
文件,添加默认规范@commitlint/config-conventional
可能记不住命令,添加信息的命令行展示pnpm add -D commitizen @commitlint/cz-commitlint
,然后配置
"commit": "git add . && git-cz",
,并且配置config
。每次要提交就运行npm run commit
"config": {
"commitizen": {
"path": "@commitlint/cz-commitlint"
}
},
上面我们应用的是commitlint
插件的cz
其实有更好的方式使用自定义配置的git-cz
, 安装commitizen git-cz
。然后将上面的配置path
引入到git-cz
的地址"./node_modules/git-cz"
,创建changelog.config.cjs
,配置自定义的git
提交提示
- 解决点击穿透,这是因为 web 页面在点击的时候会判断是否是放大,所以有一个 300ms 的延迟,通过 viewpoint 解决
- 多个指令的覆盖问题