前言
前端规范：简单说来就是让我们的流程遵守一定规则，以达到
提高项目、代码、沟通交流质量，便于项目维护升级。
规范哪些东西
- 开发规范
- 提交规范
- 编辑器规范
具体方案
开发规范
- prettire —— 代码格式化
- eslint —— js检测工具
- stylelint —— css检测工具
- code review —— 代码评审
提交规范
- commitizen —— commit 提交格式
- commitlint——
- husky —— git钩子工具，可对代码进行检测修复。
- lint-staged —— 对改动代码执行检测修复。
编辑器规范
- editConfig—— 编辑器规范
我使用的是vscode。然后参考 antf 的vscode配置，根据自己需求二次修改。
质量保证
- jest —— 单测
本次实战项目仓库
开发规范
prettire
安装参考prettire 官方文档
- 安装依赖
npm install --save-dev --save-exact prettier
2. 创建配置文件 .prettierrc.json
{
"useTabs": false,
"tabWidth": 2,
"printWidth": 100,
"singleQuote": true,
"trailingComma": "none",
"bracketSpacing": true,
"semi": false
}
3. 创建忽略检测配置文件 .prettierignore 里面的文件不进行格式化
# Ignore artifacts:
node_modules
dist
build
4. 格式化代码命令（可在package.json加）
npx prettier --write .
5. vscode 安装格式化插件
eslint
安装参考 eslint 文档
- 安装依赖、生成配置文件
npm init @eslint/config
按步骤选择相应选项
- 生成配置文件内容
module.exports = {
env: {
browser: true,
es2021: true,
node: true
},
extends: [
'plugin:vue/vue3-essential',
'standard-with-typescript'
],
overrides: [
],
parserOptions: {
ecmaVersion: 'latest',
sourceType: 'module'
},
plugins: [
'vue'
],
rules: {
}
}
3. 安装插件
4.vscode settings.json 添加保存校验
eslint完善
- 安装依赖
npm i eslint-config-standard eslint-plugin-html eslint-plugin-import eslint-plugin-n eslint-plugin-promise eslint-plugin-vue vue-eslint-parser
2. 修改配置文件eslint 的 plugin 和 extends 参考。 其他配置请查看文档。
stylelint
安装参考 stylelint 文档
- 安装依赖，初始化配置
npm install --save-dev stylelint
2. 根目录创建配置文件 .stylelintrc.js 文件 3. vscode安装插件
- vscode setting 配置校验的文件
或在setting.json源文件添加
- vscode settings.json 添加保存校验
stylelint完胜
- 安装依赖
npm i stylelint-config-standard stylelint-order postcss-html postcss-scss postcss-less
2. 修改配置文件.stylelintrc.js 参考，其他配置请查看文档
提交规范
commitizen
- 全局安装依赖
npm install commitizen -D
2. 安装 cz-conventional-changelog，将config.commitizen密钥添加到文件的根目录package.json
npx commitizen init cz-conventional-changelog --save-dev --save-exact
3. 执行 git cz 进行格式化。 前提是 git 暂存区存在更改文件
自定义提交规则
- 安装 cz-customizable
npx commitizen init cz-customizable --save-dev --save-exact --force
2. 根目录创建 .cz-config.js 文件 3. package.json script 添加 commit 命令
scirpt: {
"commit": "git-cz"
}
commitlint
- 安装依赖
npm install @commitlint/config-conventional @commitlint/cli -D
2. 终端执行添加 commitlint.config.js
echo "module.exports = {extends: ['@commitlint/config-conventional']}" > commitlint.config.js
3. 终端执行在husky里面添加提交信息校验
npx husky add .husky/commit-msg 'npx --no -- commitlint --edit ${1}'
4. commitlint.config.js 添加校验规则
没有添加提交失败了
rules: {
"type-enum": [
2,
"always",
["build", "ci", "perf", "feat", "fix", "refactor", "docs", "chore", "style", "revert", "test"]
],
"type-case": [0],
"type-empty": [0],
"scope-empty": [0],
"scope-case": [0],
"subject-full-stop": [0],
"subject-case": [0, "never"],
"header-max-length": [0, "always", 72]
}
husky
- 自动安装husky
npx husky-init && npm install
当我们提交代码的是会执行， .husky 钩子里面的脚本。
lint-staged
- 安装依赖
npm install lint-staged -D
2. 设置pre-commitgit 挂钩以运行 lint-staged。 package.json 添加配置。
"lint-staged": {
"*.{js,ts,jsx,tsx,vue}": ["eslint --fix", "prettier --write", "git add"],
".{css,scss,sass,less}": ["stylelint --fix","prettier --write", "git add"],
"*.{html,json,md,yml}": ["prettier --write", "git add"]
},
3. .husky pre-commit 添加执行脚本
npx lint-staged
编辑器规范
editor
- 根目录创建文件 .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
2. vscode安装插件
质量保证
单测
- 安装依赖
npm install jest @vue/test-utils vue-jest -D
2. src 下面创建 utils 文件夹 创建 sum.js文件
const sum = (a, b) => a + b;
export default sum;
3. 根目录下建立 tests 文件夹，unit文件夹，创建 sum.test.js 文件
import sum from '../../src/utils/sum';
describe('sum', () => {
it('可以做加法', () => {
expect(sum(1, 1)).toEqual(3);
});
})
4. package.json 添加 script
单测文件彪红。
- 安装依赖
npm i eslint-plugin-jest -D
2. .eslintrc.js 配置文件添加插件
- 添加测试校验 .husky pre-commit 文件添加
- 只测暂存区内容
- 最后终端执行 git add . 把修改存放缓存区， npm run commit 按要求填写，后执行相应检测。git push 推送代码到远程仓库
最后
当然单测这种，也可以放到ci流程执行。
当然啦，这些配置可以用脚手架去管理，或者打成一个npm包统一管理，规范远不止这些，这里就讲了些比较常用的，有什么问题，评论区 battle 吧，我会持续更新的。
问题
提交代码，找不到npm npx 请在husky钩子里面加后缀 npm.cmd npx.cmd
参考
