文章目录
前言
vue3 + ts + eslint + prettierrc + styleLint + husky + +lint-staged + commitizen + commitlint
eslint 规则检验
prettierrc 格式化代码
styleLint css sass 检验格式化
husky git提交勾子
lint-staged 处理缓存区的文件 格式化
commitizen 帮助书写正确的commit信息
commitlint 用来commit -m “内容” 对内容做校验
StyleLint配置
安装相关依赖
npm i -D sass stylelint@14.9.1 postcss-html stylelint-config-html stylelint-order postcss stylelint-config-prettier stylelint-config-recommended-vue stylelint-config-standard-scss@4.0.0 stylelint-config-standard-vue@1.0.0 stylelint-no-unsupported-browser-features@5.0.3
package.json配置命令
“lint:st”: “stylelint src/**/*.{vue,scss,css,sass,less} --fix”
创建.stylelintrc.cjs
module.exports = {
extends: [
'stylelint-config-standard', // 配置stylelint拓展插件
'stylelint-config-html/vue', // 配置 vue 中 template 样式格式化
'stylelint-config-standard-scss', // 配置stylelint scss插件
'stylelint-config-recommended-vue/scss', // 配置 vue 中 scss 样式格式化
'stylelint-config-recess-order', // 配置stylelint css属性书写顺序插件,
'stylelint-config-prettier', // 配置stylelint和prettier兼容
],
overrides: [
{
files: ['**/*.(scss|css|vue|html)'],
customSyntax: 'postcss-scss',
},
{
files: ['**/*.(html|vue)'],
customSyntax: 'postcss-html',
},
],
ignoreFiles: ['**/*.js', '**/*.jsx', '**/*.tsx', '**/*.ts', '**/*.json', '**/*.md', '**/*.yaml'],
/**
* null => 关闭该规则
* always => 必须
*/
rules: {
'value-keyword-case': null, // 在 css 中使用 v-bind，不报错
'no-descending-specificity': null, // 禁止在具有较高优先级的选择器后出现被其覆盖的较低优先级的选择器
'function-url-quotes': 'always', // 要求或禁止 URL 的引号 "always(必须加上引号)"|"never(没有引号)"
'no-empty-source': null, // 关闭禁止空源码
'selector-class-pattern': null, // 关闭强制选择器类名的格式
'property-no-unknown': null, // 禁止未知的属性(true 为不允许)
'value-no-vendor-prefix': null, // 关闭 属性值前缀 --webkit-box
'property-no-vendor-prefix': null, // 关闭 属性前缀 -webkit-mask
'selector-pseudo-class-no-unknown': [
// 不允许未知的选择器
true,
{
ignorePseudoClasses: ['global', 'v-deep', 'deep', '///'], // 忽略属性，修改element默认样式的时候能使用到
},
],
},
}
创建.stylelintignore
# .stylelintignore
# 旧的不需打包的样式库
*.min.css
# 其他类型文件
*.js
*.jpg
*.png
*.eot
*.ttf
*.woff
*.json
# 测试和打包目录
/test/
/dist/
/node_modules/
/lib/
安装Stylelint插件
配置格式自动保存修复,按下图
"editor.formatOnSave": true, //开启自动修复
"editor.defaultFormatter": "esbenp.prettier-vscode", //指定格式化的插件为Prettier
"[vue]": {
//局部设置，优先级较高，此处的局部设置，是防止用户区设置干扰到工作区设置
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"editor.codeActionsOnSave": {
"source.fixAll": true, // 开启自动修复
"source.fixAll.stylelint": true // 开启stylelint自动修复
},
// 配置stylelint检查的文件类型范围
"stylelint.validate": ["css", "less", "postcss", "scss", "sass", "vue"],
"stylelint.enable": true,
"css.validate": false,
"less.validate": false,
"scss.validate": false
husky配置 及 lint-staged commitizen commitlint配置
husky
配置背景为一个根目录下多个项目需要和.git配合使用，否则会报错
cross-var 可npm变量使用在package.json里面
npm i -D cross-var lint-staged commitizen @commitlint/config-conventional @commitlint/cli
“prepare”: “cd … && cross-var husky install $npm_package_name/.husky”
运行代码生成 .husky
npm run prepare
npx husky add .husky/pre-commit "npm run lint"
替换.pre-commit
#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"
cd $(dirname -- "$0")
npm run lint
package.json添加
"lint-staged": {
"*.{js,jsx,ts,tsx}": [
"eslint --fix",
"prettier --write"
],
"{!(package)*.json,*.code-snippets,.!(browserslist)*rc}": [
"prettier --write--parser json"
],
"package.json": [
"prettier --write"
],
"*.vue": [
"eslint --fix",
"prettier --write",
"stylelint --fix"
],
"*.{scss,less,styl,html}": [
"stylelint --fix",
"prettier --write"
],
"*.md": [
"prettier --write"
]
}
执行以下代码检查暂存区规范
npx lint-staged
此命令配合per-commit husky勾子
commitizen初始化
npx commitizen init cz-conventional-changelog --save-dev --save-exact
安装完成会在package.json下多出，path为当前目录路径 ，如果husky .git在项目上一层，路径需要.git算起
vue_ts/node_modules/cz-conventional-changelog
路径跟随husky
"config": {
"commitizen": {
"path": "./node_modules/cz-conventional-changelog"
}
}
npm i cz-conventional-changelog-zh //中文包
//修改路径
"config": {
"commitizen": {
"path": "./node_modules/cz-conventional-changelog-zh"
}
}
执行npx cz 相当于git commit提交，npx cz会以提问形式提交
commitlint初始化
创建commitlint.config.cjs
module.exports = {
extends: ['@commitlint/config-conventional'],
rules: {
'body-leading-blank': [2, 'always'],
'footer-leading-blank': [1, 'always'],
'header-max-length': [2, 'always', 108],
'subject-empty': [2, 'never'],
'type-empty': [2, 'never'],
'subject-case': [0],
'type-enum': [
2,
'always',
[
'feat', // { value: 'feat', name: 'feat: 新增功能feature' },
'fix', // { value: 'fix', name: 'fix: 修复bug缺陷' },
'perf', // { value: 'types', name: 'types: 类型修改' },
'style', // { value: 'docs', name: 'docs: 仅仅修改了文档变更，比如readme，changelog等' },
'docs', // { value: 'perf', name: 'perf: 性能优化' },
'test', // { value: 'style', name: 'style: 代码格式（不影响功能，例如空格、分号等格式修正）' },
'refactor', // { value: 'refactor', name: 'refactor: 代码重构（不包括 bug 修复、功能新增）' },
'build', // { value: 'test', name: 'test: 添加、修改测试用例' },
'ci', // { value: 'build', name: 'build: 构建流程、外部依赖变更（如升级 npm 包、修改 webpack 配置等）' },
'chore', // { value: 'ci', name: 'ci: 修改 CI 配置、脚本' },
'revert', // { value: 'revert', name: 'revert: 回滚 commit' },
'wip', // { value: 'wip', name: 'wip: 功能开发中' },
'workflow', // { value: 'workflow', name: 'workflow: 工作流程变更' },
'types', // { value: 'chore', name: 'chore: 对构建过程或辅助工具和库的更改（不影响源文件、测试用例）' },
'release', // { value: 'revert', name: 'revert: 回滚到上一个版本' },
],
],
},
}
添加husky勾子
pre-commit钩子
pre-commit钩子(commit之前触发)
替换
#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"
cd $(dirname -- "$0")
#npm run lint
npx lint-staged
commit-msg钩子
添加commit-msg钩子
npx husky add .husky/commit-msg //运行在.husky下生成commit-msg文件
替换文件
#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"
cd $(dirname -- "$0")
npx --no-install commitlint --edit "$1"
git commit -m “” 提交内容格式不对会打断提交
npx cz 可直接按提示提交
值得注意的是pre-commit在commit-msg之前，如果pre-commit里面执行的npx lint-staged命令检测不通过的话，那么就不会进到commit-msg的钩子了
总结
工程化配置完成