项目主体内容
vue3 + vite + pnpm + ESLint + Prettier + Husky + commitlint
创建项目
1. 创建项目命令
pnpm create vite
注意：node.js 版本 >= 12.0.0
2. 项目名称
3. 选择前端框架
4. 项目类型
我不喜欢ts，你们自己选
5. ok
安装 ESLint、Prettier
这部分是统一大家代码开发习惯，避免多人协作把代码搞得乱糟糟
1. 安装 eslint
pnpm i eslint -D
2. 初始化 eslint
npx eslint --init
我选择的配置如下，仅供参考
以上内容配置完成后，项目会生成一个文件 .eslintrc.cjs 就是eslint在本项目的配置文件
3. 安装 prettier
这是美化项目代码格式的一个插件，配合eslint，绝对好用 按照以下指令安装项目所需要的插件
pnpm install -D prettier
pnpm install -D eslint-config-prettier #eslint兼容的插件
pnpm install -D eslint-plugin-prettier #eslint的prettier
4. 配置 prettier 文件
我们需要在项目根目录手动创建一个文件 .prettierrc.js，将下面配置放到里面
如果有些文件我们不需要格式化，就创建一个 .prettierignore 文件，这是能忽略某些文件，将文件或者文件夹的名字放入其中即可
以下是我团队项目中常使用的配置
// .prettierrc.js
module.exports = {
bracketSameLine: true,
printWidth: 150, // 单行输出（不折行）的（最大）长度
tabWidth: 2, // 每个缩进级别的空格数
tabs: false, // 使用制表符 (tab) 缩进行而不是空格 (space)
semi: false, // 是否在语句末尾打印分号
singleQuote: true, // 是否使用单引号
quoteProps: 'as-needed', // 仅在需要时在对象属性周围添加引号
bracketSpacing: true, // 是否在对象属性添加空格
htmlWhitespaceSensitivity: 'ignore', // 指定 HTML 文件的全局空白区域敏感度, "ignore" - 空格被认为是不敏感的
trailingComma: 'none', // 去除对象最末尾元素跟随的逗号
useTabs: false, // 不使用缩进符，而使用空格
jsxSingleQuote: false, // jsx 不使用单引号，而使用双引号
arrowParens: 'always', // 箭头函数，只有一个参数的时候，也需要括号
rangeStart: 0, // 每个文件格式化的范围是文件的全部内容
endOfLine: 'auto', // 换行符使用 lf
'max-lines-per-function': [2, { max: 320, skipComments: true, skipBlankLines: true }], // 每个函数最大行数
ignorePath: '.gnore',
'files.insertFinalNewline': true,
'javascript.format.insertSpaceBeforeFunctionParenthesis': true,
eslintIntegration: true,
stylelintIntegration: true
}
5. 在 ESLint 校验中加入 prettier校验
更改 Eslint 的配置文件 .eslintrc.cjs, 在里面加入 Prettier 相关配置
module.exports = {
"extends": [
"plugin:prettier/recommended"
],
"plugins": [
"prettier"
]
}
Husky + lint-staged
这部分是对提交代码时候的拦截校验，确保提交的代码符合要求，毕竟为了统一规范，commit我有个格式你需要提交上来，不然找起来费劲
1. 安装 husky
可以触发一些狗子函数，我们要做的是希望在 commit 代码之前，先检查一遍代码是否规范，如果检查不通过，不能执行提交代码操作
pnpm i husky -D
制定git hooks
npx husky install
执行完以上代码，目录中会出现一个 .husky 文件夹
在 package.json 中添加执行 scrpts 指令
"prepare": "husky install"
设置了脚本之后，在项目初期运行 pnpm i 指令执行安装操作的时候，会自动执行该脚本
2. 创建 precommit hook
执行以下代码，在 .husky 文件中，新增一个文件，并且这个文件携带了指令 npm run lint，也就是提交代码之前会执行这个指令，
npx husky add .husky/pre-commit "npm run lint"
因为上面我们配置了 ESLint 和 prettier ，所以在 package.json 的 scripts 中加入以下代码
"lint": "eslint src/**/*.{js,vue} --fix",
注意：这时候提交的代码，会全部都执行 lint 检测一遍，每次都这样会导致提交代码很慢，所以 lint-staged 出现，它的做法是每次都只检查 git 暂存区里的文件，这也提交代码的时候的lint执行检查的量比较小，节省很多时间
3. 安装 lint-stadge
如果每一次提交都对所有的代码都执行代码规范的命令，那么效率很低，这个插件可以仅仅处理暂存区的文件
- 执行以下代码安装
pnpm i lint-staged -D
- 修改 package.json 配置
"lint-staged": {
"src/**/*.{vue,js,jsx,ts,tsx,json}": [
"pnpm lint"
]
},
- 修改 .husky 中 pre-commit 文件
4. 安装 commitlint
提交代码检查，commit 的信息是否符合规范，最佳 git 实践中，有很多必要的规则遵守，这也我们可以
pnpm install -g @commitlint/cli @commitlint/config-conventional
在 .husky 文件夹下新建 commit-msg 文件，填入如下内容
#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"
npx --no -- commitlint --edit $1
项目根目录中新建 commitlint.config.cjs 文件，写入配置
module.exports = {
extends: ['@commitlint/config-conventional'],
rules: {
'type-enum': [1, 'always', ['feat', 'fix', 'docs', 'style', 'refactor', 'perf', 'test', 'chore', 'revert', 'build']],
'type-case': [0],
'type-empty': [0],
'scope-empty': [0],
'scope-case': [0],
'subject-full-stop': [0, 'never'],
'subject-case': [0, 'never'],
'header-max-length': [0, 'always', 72]
}
}
至此基础设施搭建完成，可以盖楼了吧，如果不能盖，你评论区告诉我，我再加钢筋！
