配置.husky和commitlint以及Eslint
代码规范 ESLint + Prettier(基于uniapp+vue3)
如果加了ts
npm install @typescript-eslint/eslint-plugin @typescript-eslint/parser --save-dev
npm install eslint prettier --save-dev
npm install eslint-config-prettier eslint-plugin-prettier eslint-plugin-vue --save-dev
- 添加 .eslintrc.js
- 添加 .prettierrc.js
- 以下是配置分享(仅供参考):
// .eslintrc.js
module.exports = {
parser: 'vue-eslint-parser',
extends: ['plugin:vue/recommended', 'plugin:prettier/recommended'],
parserOptions: {
parser: '@typescript-eslint/parser',
ecmaVersion: 2018,
sourceType: 'module',
},
plugins: ['vue', '@typescript-eslint'],
rules: {
'vue/multi-word-component-names': 'off',,
"vue/valid-v-for": off",
},
}
// .prettierrc.js
module.exports = {
printWidth: 120,
tabWidth: 2,
tabs: false,
semi: false,
singleQuote: true,
quoteProps: 'as-needed',
bracketSpacing: true,
jsxBracketSameLine: false,
arrowParens: 'always',
endOfLine: 'auto',
}
Husky + lint-staged + commitlint
工程化怎么能少的了这些利器呢!不过这些配置之后虽然便利,但由于每次提交之前都会检查一遍代码,会损耗一些时间。
husky: 是一个 Git Hook 工具,借助 husky 我们可以在 git 提交的不同生命周期进行一些自动化操作 lint-staged: 用于实现每次提交只检查本次提交所修改的文件 commitlint: 提交时 commit 信息规范校验配置流程,每次提交时就会去检查你的commit-msg是否合规
- 下载依赖
npm i husky lint-staged @commitlint/cli @commitlint/config-conventional -D
- package.json 文件中添加 scripts
"scripts": {
"prepare": "husky install",
"lint": "eslint src",
"lint-staged": "lint-staged",
"commitlint": "commitlint --config commitlint.config.js -e -V"
},
"repository": {
"type": "git",
"url": "git+https://github.com/Control-body/SDLittleBefore.git"
},
-
执行 npm run prepare
生成了.husky 文件夹
4. 添加 pre-commit 钩子
npx husky add .husky/pre-commit "npm run lint-staged"
- 创建 .lintstagedrc 配置文件
{
"src/**/*.{js,vue}": "npm run lint"
}
- 添加 commit-msg 钩子
npx husky add .husky/commit-msg "npm run commitlint"
- 创建 commitlint.config.js 配置文件
module.exports = {
extends: ['@commitlint/config-conventional'],
rules: {
'type-enum': [
// type枚举
2,
'always',
[
'build', // 编译相关的修改,例如发布版本、对项目构建或者依赖的改动
'feat', // 新功能
'fix', // 修补bug
'docs', // 文档修改
'style', // 代码格式修改, 注意不是 css 修改
'refactor', // 重构
'perf', // 优化相关,比如提升性能、体验
'test', // 测试用例修改
'revert', // 代码回滚
'ci', // 持续集成修改
'config', // 配置修改
'chore', // 其他改动
],
],
'type-empty': [2, 'never'], // never: type不能为空; always: type必须为空
'type-case': [0, 'always', 'lower-case'], // type必须小写,upper-case大写,camel-case小驼峰,kebab-case短横线,pascal-case大驼峰,等等
'scope-empty': [0],
'scope-case': [0],
'subject-empty': [2, 'never'], // subject不能为空
'subject-case': [0],
'subject-full-stop': [0, 'never', '.'], // subject以.为结束标记
'header-max-length': [2, 'always', 72], // header最长72
'body-leading-blank': [0], // body换行
'footer-leading-blank': [0, 'always'], // footer以空行开头
},
}