集成 EditorConfig 配置
- 项目根目录下创建配置文件
touch .editorconfig
- 修改配置内容如下
# Editor configuration, see http://editorconfig.org
# 表示是最顶层的 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 配置 文档
- 安装相关依赖
npm i prettier -D
yarn add prettier --dev
- 项目根目录下创建文件
touch .prettierrc
- 修改配置内容如下
{
"useTabs": false,
"tabWidth": 2,
"printWidth": 100,
"singleQuote": true,
"trailingComma": "none",
"bracketSpacing": true,
"semi": false
}
- vscode 下载 Prettier - Code formatter
集成 ESLint 配置
- 安装依赖
npm i eslint -D
yarn add eslint --dev
- 配置
npx eslint --init
根据自己项目情况选择
- vscode 需要装ESLint插件
解决 Prettier 和 ESLint 的冲突
- 安装依赖
npm i eslint-plugin-prettier eslint-config-prettier -D
yarn add eslint-plugin-prettier eslint-config-prettier --dev
- 修改配置文件如下
module.exports = {
...
extends: ['plugin:react/recommended', 'airbnb', 'plugin:prettier/recommended'],
...
}
集成 husky 和 lint-staged
husky
- 安装
npm i husky -D
yarn add husky --dev
- 初始化
npx husky install
// 不成功的话 执行 git init
- 添加触发条件文件(在代码提交到暂存区的时候触发)
npx husky add .husky/pre-commit "npx --no-install lint-staged"
配置 lint-staged
- 安装依赖
npm i lint-staged -D
yarn add lint-staged --dev
- 修改package.json
"lint-staged": {
"*.{js,ts}": "eslint --fix"
},
配置提交规范
- 安装Commitizen
npm install commitizen -D
yarn add commitizen --dev
- 进行初始化
npx commitizen init cz-conventional-changelog --save-dev --save-exact
- 自定义提交说明
npx commitizen init cz-customizable --save-dev --save-exact --force
- 添加自定义配置 官方示例
touch .cz-config.js
配置如下,具体可根据官方示例进行修改
module.exports = {
// type 类型(定义之后,可通过上下键选择)
types: [
{ value: 'feat', name: 'feat: 新增功能' },
{ value: 'fix', name: 'fix: 修复 bug' },
{ value: 'docs', name: 'docs: 文档变更' },
{ value: 'style', name: 'style: 代码格式(不影响功能,例如空格、分号等格式修正)' },
{ value: 'refactor', name: 'refactor: 代码重构(不包括 bug 修复、功能新增)' },
{ value: 'perf', name: 'perf: 性能优化' },
{ value: 'test', name: 'test: 添加、修改测试用例' },
{ value: 'build', name: 'build: 构建流程、外部依赖变更(如升级 npm 包、修改 webpack 配置等)' },
{ value: 'ci', name: 'ci: 修改 CI 配置、脚本' },
{ value: 'chore', name: 'chore: 对构建过程或辅助工具和库的更改(不影响源文件、测试用例)' },
{ value: 'revert', name: 'revert: 回滚 commit' }
],
// scope 类型(定义之后,可通过上下键选择)
scopes: [
['components', '组件相关'],
['hooks', 'hook 相关'],
['utils', 'utils 相关'],
['element-ui', '对 element-ui 的调整'],
['styles', '样式相关'],
['deps', '项目依赖'],
['auth', '对 auth 修改'],
['other', '其他修改'],
// 如果选择 custom,后面会让你再输入一个自定义的 scope。也可以不设置此项,把后面的 allowCustomScopes 设置为 true
['custom', '以上都不是?我要自定义']
].map(([value, description]) => {
return {
value,
name: `${value.padEnd(30)} (${description})`
}
}),
// 交互提示信息
messages: {
type: '确保本次提交遵循 Angular 规范!\n选择你要提交的类型:',
scope: '\n选择一个 scope(可选):',
// 选择 scope: custom 时会出下面的提示
customScope: '请输入自定义的 scope:',
subject: '填写简短精炼的变更描述:\n',
body:
'填写更加详细的变更描述(可选)。使用 "|" 换行:\n',
breaking: '列举非兼容性重大的变更(可选):\n',
footer: '列举出所有变更的 ISSUES CLOSED(可选)。 例如: #31, #34:\n',
confirmCommit: '确认提交?'
},
// 设置只有 type 选择了 feat 或 fix,才询问 breaking message
allowBreakingChanges: ['feat', 'fix'],
// 跳过要询问的步骤
skipQuestions: ['body', 'footer'],
// subject 限制长度
subjectLimit: 100
}
- 集成 commitlint 提交规范验证 安装依赖@commitlint/config-conventional 和 @commitlint/cli
npm i @commitlint/config-conventional @commitlint/cli -D
yarn add @commitlint/config-conventional @commitlint/cli --dev
- 配置commitlint
echo "module.exports = {extends: ['@commitlint/config-conventional']}" > commitlint.config.js
- 添加触发命令
npx husky add .husky/commit-msg "npx --no-install commitlint --edit $1"
- 后续提交代码,大家用
git cz
来代替git commit
提交代码即可
// 无法使用git cz的话 记得全局安装commitizen
npm install -g commitizen