ctr+s时,对文件格式化检查并自动修复(由三部分共同起作用)
- eslint、prettier、stylelint相关规则的配置
- eslint、prettier、stylelint的vscode插件安装
- vscode中的settings.json或者项目中的settings.json
"editor.codeActionsOnSave": {
"source.fixAll": true,
"source.fixAll.eslint": true,
"source.fixAll.stylelint": true
},
"stylelint.validate": ["css", "less", "scss", "vue"],
"[vue]": {
"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode",
}
使用命令批量校验修改文件
在package.json中添加脚本
“lint”: "eslint \"src/**/*.{js,vue,ts}\" --fix",
"prettier-format": "prettier --config .prettierrc.cjs \"src/**/*.{vue,js,ts}\" --write",
"lint:css": "stylelint **/*.{html,vue,css,sass,scss,less} --fix"
安装配置eslint
-相关依赖
eslint
eslint-config-airbnb-base
eslint-plugin-vue
eslint-plugin-import
- 初始化配置文件
eslint init ->生成.eslintrc.js
module.exports = {
"env": {
"browser": true,
"es2021": true,
"node": true
},
// eslint-config-xx,xx前的可以省略掉
"extends":[
"eslint:recommended",
"plugin:vue/vue3-essential",
"plugin:@typescript-eslint/recommended"
],
//解析器,将代码转化成抽象语法树,然后由eslint等对树进行检查
parser:"@typescript-eslint/parser",
parserOptions:{
...
},
// 全局定义的宏,定义一些全局变量,使用时就会不报错
global: {
defineProps: "readonly"
},
// eslint-plugin可以省略
plugins: ["vue", "@typescript-eslint"],
settings{
"import/resolver": {
// 设置项目内别名
alias:{
map:[["@","./src"]]
}
},
// 允许的扩展名
"import/extensions":[".js",".jsx",".ts"]
},
rules:{
// 自定义规则,覆盖extends中的第三方库的规则
}
}
- .eslintrcignore
.vscode
dist
/public
.husky
/bin
.eslintrc.js
/src/mock/*
安装配置prettier
- 相关依赖
prettier
eslint-config-prettier
eslint-plugin-prettier
- 配置文件
在根目录新建prettierrc.cjs文件
module.exports= {
// 一行最多多少个字符
printWidth:80,
// 使用2个空格缩进
tabWidth:2,
// 结尾是否需要分号
semi: true,
// 使用单引号
singleQuote: true
}
- .prettierignore
/dist/*
.local
.output.js
/node_modules/**
src/.DS_Store
**/*.svg
**/*.sh
/public
components.d.ts
安装配置stylelint
- 相关依赖
stylelint
stylelint-config-standard
- 配置文件
// 根目录新建.stylelintrc.cjs
module.exports = {
extends: [
"stylelint-config-standard"
]
}
- .stylelintignore
/dist/*
/public/*
git commit时,对暂存区文件校验
1、安装husky、lint-staged
npm i husky lint-staged -D
2、husky install ->多一个husky的隐藏文件夹
3、npx husky add .husky/pre-commit "npx lint-staged" ->多一个pre-commit的bash文件
4、package.json中加lint-staged项
"lint-staged": {
"*.{js,jsx,vue,ts,tsx}": ["npm run lint", "npm run prettier-format"],
"*.{vue,less,css,sass}":["npm run lint:css"]
}
git commit时,对commit msg进行校验
1、npm i @commitlint/cli @commitlint/config-conventional -D
2、npx husky add .husky/commit-msg "npx --no -- commitlint --edit ${1}" ->多一个commit-msg的bash文件
3、新增commitlint.config.cjs文件
module.exports = {
extends: ['@commitlint/config-conventional'],
rules: {
'type-enum':[
2,
'always',
['fix','feat','docs',test','perf']
]
}
}