文章目录
4. 在VSCode中安装prettier-code formatter插件
2. 在根目录创建commitlint.config.js文件
3. 使用husky生成commit-msg文件,验证提交信息
前言
学习王红元老师vue课程的笔记
一、创建项目
vue create 项目名
选择Manually select features进行自定义选择,选项如下:
- Babel:允许使用ES6模块语法
- TypeScript:是否使用TS语言
- Progressive Web App (PWA) Support:是否使用渐进式web应用程序
- Router:是否使用vue-router路由
- Vuex:是否使用vuex状态管理
- CSS Pre-processors:是否选择CSS的样式预处理(Sass/Less)
- Linter / Formatter :是否使用代码格式语法检测(使用eslint + prettier)
- Unit Testing:测试工具
- E2E Testing:测试工具
选择后选项如下:
- Use class-style component syntax?:是否使用class风格组件(N)
- Use Babel alongside TypeScript for auto-detected polyfills?:是否使用babel处理TS(Y)
- Use history mode for router? :路由是否使用history模式(N)
二、集成editorconfig配置
可以使多个开发人员维持一样的编码风格
1. 在VSCode中安装editorconfig插件
2. 根目录下添加.editorconfig文件
root = true
[*] # 表示所有文件适用
charset = utf-8 # 设置文件字符集为utf-8
indent_style = space # 缩进风格 (tab | space)
indent_size = 2 #缩进大小
end_of_line = lf # 控制换行类型(lf | cr | crlf)
trim_trailing_whitespace = true # 去除行首的任意空白字符
insert_final_newline = true # 始终在文件末尾插入一个新行
[*.md] # 表示仅 md 文件通用以下规则
max_line_length = off
trim_trailing_whitespace = false
三、使用prettier工具
可以让代码格式化
1. 安装prettier
npm install prettier -D
2. 根目录下添加.prettierrc文件
格式化的标准:
{
"useTabs":false,
"tabWidth":2,
"printWidth":80, //单行字符长度
"singleQuote":true, //使用单引号还是双引号
"trailingComma":"none", //在多行输入的尾逗号是否添加
"semi":false //语句末句是否加分号
}
3. 根目录下添加.prettierignore文件
哪些文件不格式化:
/dist/*
.local
.output.js
/node_modules/**
**/*.svg
**/*.sh
/public/*
4. 在VSCode中安装prettier-code formatter插件
5. prettier的使用
在package.json的"scripts":{}中添加"prettier":"prettier --write ."
通过npm run prettier格式化
四、eslint
1. 安装eslint
npm install eslint-plugin-prettier@3.4.1 eslint-config-prettier -D
- 安装最新的4.0.0版本会报错
2. prettier+eslint的使用
在.eslintrc.js的extends:[]最后添加'plugin:prettier/recommended'
- "prettier/@typescript-eslint"报错,将其移到node_modules/eslint-config-prettier/prettier.js内添加
五、gitHusky
保证仓库代码符合规范,git commint时代码不符合规范,则自动通过规范修复
1. 安装githusky并自动创建文件
npx husky-init && npm install
在windows中&&报错,使用
npx husky-init -and npm install
//或者使用如下代码(没试过)
npx husky-init '&&' npm install
或者将powershell终端输出改为cmd终端输出(VSCODE)配置
2. 代码格式化
在新增的husky文件夹中的pre-commit文件中添加npm run lint
六、Commitizen
保证git commit的提示信息规范
1. 安装commitizen
npm install commitizen -D
npx commitizen init cz-conventional-changelog --save-dev --save-exact
- 报错使用cnpm install cz-conventional-changelog -D安装后手动在package.json中配置
"config": {
"commitizen": {
"path": "./node_modules/cz-conventional-changelog"
}
}
2. 提交
提交时使用命令:npx cz(之后会改为npm run commit)
选项如下:
- 选择类型:
(1)feat:新增特性
(2)fix:修复bug
(3)docs:修改文档
(4)style:代码格式修改
(5)refactor:代码重构
(6)perf:改善性能
(7)test:测试
(8)build:变更项目构建或外部依赖
(9)ci:更改持续集成软件的配置文件和package中的scripts命令
(10)chore:变更构建流程或辅助工具(更改测试环境)
(11)revert:代码回退
- 更改后影响范围
- 描述
- 更长的描述(可回车跳过)
- 是否是大更新
- 是否影响开源项目的某个open issue
七、代码提交验证
如果git commit提交格式不规范则限制提交
1. 安装
npm i @commitlint/config-conventional @commitlint/cli -D
2. 在根目录创建commitlint.config.js文件
module.exports = {
extends:['commitlint/config-conventional']
}
3. 使用husky生成commit-msg文件,验证提交信息
npx husky add .husky/commit-msg "npx --no-install commitlint --edit $1"
4. commit的使用
使用npm run commit提交