配置 .editorconfig
EditorConfig用于在基本代码库中维持一致的编码风格和设置，例如缩进样式、选项卡宽度、行尾字符以及编码等。
在vscode中搜索安装EditorConfig插件,根目录下新建 .edittorconfig文件写入一些配置代码。
// .editorconfig
root = true
[*]
indent_style = space
indent_size = 2
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true
max_line_length = 120
[*.md]
trim_trailing_whitespace = false
代码检测Eslint
.eslintrc.js 是位于vue项目中的根文件
安装方式
npm install eslint --save-dev
vscode 直接搜索eslint，安装插件后需要在vscode编辑器中settings.json中开启。
settings.json
{
"editor.codeActionsOnSave": { // 在保存时用eslint规则进行修复
"source.fixAll.eslint": false
},
"eslint.enable": true, //是否开启vscode的eslint
"eslint.options": { //指定vscode的eslint所处理的文件的后缀
"extensions": [ ".js", ".vue", ".ts", ".tsx" ]
}
}
在使用指令搭建项目时，会出现是否选择ESLint的选项
- 仅包含错误的Eslint的规则
- Airbnb的Eslint的规则
- 标准的Eslint规则
ESLint的配置文件
ESLint配置文件遵循commonJS的导出规则，所导出的对象就是ESLint的配置对象
module.exports = {
root:true, // 表示当前目录为根目录，eslint规则将限制到该目录下
env:{ //env表示启用eslint检测的环境
node:true //在node环境下启动eslint检测
},
// eslint中基础配置需要继承的配置
extends:['plugin:vue/vue3-essential','@vue/standard'],
// 解析器
parserOptions:{
parser:'babel-eslint'
},
// 需要修改的启用规格及其各自的错误级别，例子：如以下错误规则
- off 关闭规则
- warn 开启规则，使用警告级别的错误，warn（不会导致程序退出）
- error 开启规则，使用错误级别的错误，error（当被触发时，程序会退出）
rules:{
'no-console':process.env.NODE_ENV ==='production' ? 'warn' : 'off',
'no-debugger':process.env.NODE_ENV ==='production' ? 'warn' : 'off',
}
}
代码格式化Prettier
安装方式
- vscode中安装prettier插件
- 在项目根文件中新建
.prettierrc文件，该文件为默认配置文件
{
'semi':false,
'singQuote':true,
'trailingComma':'none'
}
eslint与prettier的结合使用
- 在vs code编辑器中设置，输入save，找到Editor:Format On Save,并勾选
- vscode默认一个tab等于4个空格，eslint希望是2个空格，设置同意
- 如果编辑器中，设置多个格式化程序，需要统一（选择某个文件，右键--选择格式化程序）
- eslint与prettier会出现一个冲突：方法名和小括号之间的空格。解决方案：在eslint中rules设置‘space-before-funtion-paren’:'off'
Git提交规范
Commitizen提交规范
- 全局安装Commitizen
npm install -g commitizen
mac系统
sudo npm install -g commitizen
- 安装cz-customizable插件
- 使用npm下载插件
npm i cz-customizable --save-dev- 添加以下配置到package.json中
最下面添加 'config':{ 'commitizen':{ 'path':'node_modules/cz-customizable' } } - 项目根目录下创建
.cz-config.js自定义提示文件
module.exports = {
//可选类型
types:[
{value:'feat',name:'feat:新功能'},
{value:'fix',name:'fix:修复'}
{value:'docs',name:'docs:文档变更'}
{value:'style',name:'style:代码格式'}
{value:'refactor',name:'refactor:重构'}
{value:'perf',name:'perf:性能优化'}
{value:'test',name:'test:增加测试'}
{value:'chore',name:'chore:构建过程或辅助工具的变动'}
{value:'revert',name:'revert:回退'}
{value:'build',name:'build:打包'}
],
// 步骤
message:{
type:'请选择提交的类型',
customScope:'请输入修改的范围（可选）',
subject:'请简要描述提交（必填）',
body:'请输入详细描述（可选）',
footer:'请输入要关闭的issue(可选)',
confirmCommit:'确认要使用以上信息提交(y/n)'
},
// 跳过问题
skipQuestions:['body','footer'],
// subject文字长度默认是72
subjectLimit:72
}
- 操作流程:
- git add .
- git cz代替git commit -m "xxx",有很多选项操作
使用husky+commitlint检查提交描述是否符合规范要求
commitlint
- 安装依赖
npm install --save-dev @commitlint/config-conventional@x.x.x @commitlint/cli@x.x.x
- 创建
commitlint.config.js文件
module.exports = {
// 继承的规则
extends:['@commitlint/config-conventional'],
// 定义规则
rules:{
// type的类型定义：表示git提交的type必须在以下类型范围之内
'type-enum':[
// 当前验证的错误级别
2,
// 在什么情况下进行校验
'always',
// 泛型类型
[
'feat',
'fix',
'docs',
'style',
'refactor',
'perf',
'test',
'chore',
'revert',
'build'
]
],
// subject 大小写不做校验
'subject-case':[0]
}
}
注意点：确保保存为UTF-8的编码格式
husky
- 安装依赖
npm install husky@x.x.x --save-dev
-
启动hooks，生成
.husky文件夹npx husky install -
在
package.json中生成prepare指令
npm set-script prepare 'husky install'
- 执行prepare指令
npm run prepare
- 添加commitlint的hook到husky中，并指令在commit-msg的hooks下执行指令
npx husky add .husky/commit-msg 'npx. --no-install commitlint --edit "$1"'
安装成功后，在.husky的文件结构下会出现一个commit-msg的文档
通过pre-commit检测提交时代码规范
通过husky监测pre-commit钩子，在该钩子下执行指令去进行相关监测
- 执行指令
npx husky add .husky/pre-commit "npx eslint --ext .js,.vue src"
在根目录.husky目录下就会生成一个pre-commit文件
lint-staged自动修复格式错误
前提：只修改了个别文件，不需要检测所有的文件代码格式 只能提示对应的错误，还需要手动的进行代码修改 解决方案：使用lint-staged插件，只检查本次修改更新的代码，并在出现错误的时候，自动修复并且推送。
- 修改
package.json配置
"lint-staged":{
"src/**/*.{js,vue}":["eslint --fix","git add"]
}
- 修改
.husky/pre-commit文件
npx eslint. --ext .js,.vue src(修改前)
npx lint-staged（修改后）
