代码格式化: prettier（代码结构美化）
使用vue-cli自带prettier配置
语法规范校验: eslint（检测代码语法质量）
使用vue-cli自带eslint配置
样式语法规范校验：stylelint
- 安装依赖
npm i
stylelint-config-standard
stylelint-config-prettier
postcss-html 针对vue文件
postcss-scss 针对sass文件
--save -D
- 样式配置文件
module.exports = {
extends: [
'stylelint-config-standard',
'stylelint-config-prettier',
],
overrides: [
{
"files": ["**/*.vue"],
"customSyntax": "postcss-html"
}
],
ignoreFiles: ['**/*.js', '**/*.jsx', '**/*.tsx', '**/*.ts', '**/*.json', ],
};
- 脚本配置
"stylelint": "stylelint **/*.{css,scss,vue} --fix" //全局检查样式错误,可修复
- 踩坑：对vue文件的style校验校验问题：
方法一：
针对.vue文件："stylelint": "stylelint **/*.{vue} --fix --custom-syntax postcss-html"
方法二：
在配置文件里，设置在overrides属性设置专门的解析插件
提交规范校验：husky+lint-staged+commitizen +commitlint
husky
是一个git hook工具，可以帮助我们触发git提交的各个阶段
1.安装依赖
npx husky-init && npm install
它做了3件事情：
a.安装husky相关的依赖
b.在项目目录下自动创建 .husky 文件夹
c.在package.json中添加一个脚本，该脚本会在husky工作的合适时机，在内部被自动调用
lint-staged
在提交代码时，只对git暂存的文件进行代码检查
1.安装依赖
npm i lint-staged -d
2.检查暂存文件的脚本配置
"lint-staged": {
"**/*.{js,jsx,ts,tsx,vue}": [
"npm run eslint",
"git add"
],
"**/*.{css,less,scss,vue}": [
"npm run stylelint",
"git add"
]
},
commitizen
是一个帮助我们编写规范 commit message 的工具，会校验git commit -m 'xxxx' 是否符合规范,(如:feat: xxx)
- 安装依赖
//安装完毕后会在.bin目录下生成一个工具 --- cz
npm install commitizen -D
npx commitizen init cz-conventional-changelog --save-dev --save-exact
//以上代码，会在package.json里加入一下配置
"config": {
"commitizen": {
"path": "./node_modules/cz-conventional-changelog"
}
}
2.脚本配置
"scripts": {
"commit": "cz"
}
3.执行代码提交指令，根据提示完成提交步骤，过程中会对代码进行错误审查
git cz
4.提交成功/失败
commitlint
根据代码是否符合各种规范，来限制提交
1.安装依赖
npm i @commitlint/config-conventional @commitlint/cli -D
2.依赖配置
module.exports = {
extends: ['@commitlint/config-conventional']
}
3.完成以上配置以后，使用husky生成commit-msg文件，验证提交信息
npx husky add .husky/commit-msg "npx --no-install commitlint --edit $1"
npm 和npx的区别
a. npx（包执行器）不需要下载包到本地，直接执行
b. npm（包管理器）一般都是通过package.json, 下载在node_modules里面，然后引用本地的文件包
package.json
{
"name": "project-name",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"test:unit": "vue-cli-service test:unit",
"prettier": "prettier --write .",//全局修复prettier格式
"lint": "vue-cli-service lint",//全局检查代码错误
"prepare": "husky install", //代码提交规范的工具hook
"commit": "cz",//代码提交规范
"eslint": "eslint --fix --ext .js,.ts,.vue src",//全局检查eslint错误,可修复
"stylelint": "stylelint **/*.{css,scss,vue} --fix" //全局检查样式错误,可修复
},
"lint-staged": {
"**/*.{js,jsx,ts,tsx,vue}": [
"npm run eslint",
"git add"
],
"**/*.{css,less,scss,vue}": [
"npm run stylelint",
"git add"
]
},
"dependencies": {
"core-js": "^3.6.5",
"vue": "^3.0.0",
"vue-router": "^4.0.0-0",
"vuex": "^4.0.0-0"
},
"devDependencies": {
"@commitlint/cli": "^17.4.2",
"@commitlint/config-conventional": "^17.4.2",
"@types/jest": "^24.0.19",
"@typescript-eslint/eslint-plugin": "^4.18.0",
"@typescript-eslint/parser": "^4.18.0",
"@vue/cli-plugin-babel": "~4.5.13",
"@vue/cli-plugin-eslint": "~4.5.13",
"@vue/cli-plugin-router": "~4.5.13",
"@vue/cli-plugin-typescript": "~4.5.13",
"@vue/cli-plugin-unit-jest": "~4.5.13",
"@vue/cli-plugin-vuex": "~4.5.13",
"@vue/cli-service": "~4.5.13",
"@vue/compiler-sfc": "^3.0.0",
"@vue/eslint-config-prettier": "^6.0.0",
"@vue/eslint-config-typescript": "^7.0.0",
"@vue/test-utils": "^2.0.0-0",
"commitizen": "^4.2.6",
"cz-conventional-changelog": "^3.3.0",
"eslint": "^6.7.2",
"eslint-plugin-prettier": "^3.3.1",
"eslint-plugin-vue": "^7.0.0",
"husky": "^8.0.0",
"lint-staged": "^13.1.0",
"postcss-html": "^1.5.0",
"postcss-scss": "^4.0.6",
"prettier": "^2.2.1",
"sass": "^1.26.5",
"sass-loader": "^8.0.2",
"stylelint": "^14.16.1",
"stylelint-config-prettier": "^9.0.4",
"stylelint-config-standard": "^29.0.0",
"stylelint-scss": "^4.3.0",
"typescript": "~4.1.5",
"vue-jest": "^5.0.0-0"
},
"config": {
"commitizen": {
"path": "./node_modules/cz-conventional-changelog"
}
}
}
参考
前端工程化：Prettier+ESLint+lint-staged+commitlint+Hooks+CI 自动化配置处理
