1.使用 vite 初始化项目
pnpm create vite
修改vite.config.ts 修改域名端口,自动启动浏览器
server: {
host: 'localhost',
port: 9999,
open: true
}
2..配置 eslint 和 prettier
pnpm i -D eslint
npx eslint --init
3.选配置
4.再安装下面的依赖
pnpm install -D eslint-plugin-import eslint-plugin-vue eslint-plugin-node eslint-plugin-prettier eslint-config-prettier @babel/eslint-parser
5.修改根目录配置文件如下.eslintrc.cjs
module.exports = {
env: {
browser: true,
es2021: true,
node: true,
jest: true
},
extends: [
'eslint:recommended',
'plugin:vue/vue3-essential',
'plugin:@typescript-eslint/recommended',
'plugin:prettier/recommended'
],
overrides: [],
parser: 'vue-eslint-parser',
parserOptions: {
ecmaVersion: 'latest',
sourceType: 'module',
parser: '@typescript-eslint/parser'
},
plugins: ['vue', '@typescript-eslint'],
rules: {
'space-before-function-paren': ['error', 'never'],
'no-extra-semi': 0, // 结尾不要分号
'comma-dangle': ['error', 'never'],
'@typescript-eslint/no-explicit-any': 0,
'@typescript-eslint/ban-types': 0
}
}
6.在根目录创建 并配置.eslintignore
防止校验打包的产物
// .eslintignore 配置, 防止校验打包的产物
dist
node_modules
7.在 package.json 中添加运行脚本
"scripts": {
"lint": "eslint src",
"fix": "eslint src --fix",
}
8.安装包
pnpm install -D eslint-plugin-prettier prettier eslint-config-prettier
9.在根目录新建.prettierrc.json
{
"singleQuote": true,
"semi": false,
"bracketSpacing": true,
"htmlWhitespaceSensitivity": "ignore",
"endOfLine": "auto",
"trailingComma": "none",
"tabWidth": 2
}
10.测试一下代码检查是否生效了,我们在 main.ts 中修改成如下内容
按ctrl + s 保存代码,如果还报错,就重启项目
11.vscode 保存文件自动修复代码
直接在项目的跟路径创建.vscode/settings.json 文件,然后在其中加入以下配置。
{
// 开启自动修复
"editor.codeActionsOnSave": {
"source.fixAll": false,
"source.fixAll.eslint": true
}
}
12.配置 husky(就是提交代码规范)
在上面我们已经集成好了我们代码校验工具,但是需要每次手动的去执行命令才会格式化我们的代码。如果有人没有格式化就提交了,那这个规范就没什么用。所以我们强制让开发人员按照代码规范来提交。
要做到这件事情,可以利用 husky 来在代码提交之前出发 git hook,然后执行pnpm format
来自动的格式化我们的代码。
安装husky
pnpm install -D husky
执行完上面命令之后 必须打开文件 在 git init
安装完之后
执行
npx husky-init
安装lint-staged
pnpm install -D lint-staged
package.json 配置命令
{
"scripts": {
"lint-staged": "lint-staged"
},
"lint-staged": {
"**/*.{js,jsx,ts,tsx,vue}": ["prettier --write", "eslint --fix", "git add"]
}
}
在.husky/pre-commit 文件添加命令
#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"
pnpm lint-staged
13.配置 commitlint 校验提交信息
pnpm add @commitlint/config-conventional @commitlint/cli -D
添加配置文件,新建commitlint.config.cjs
(注意是 cjs),然后添加下面的代码
module.exports = {
extends: ['@commitlint/config-conventional'],
// 校验规则
rules: {
'type-enum': [
2,
'always',
[
'feat',
'fix',
'docs',
'style',
'refactor',
'perf',
'test',
'build',
'ci',
'chore',
'revert',
'conflict',
'font',
'delete',
'stash'
]
],
'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]
}
}
配置 scripts
# 在scrips中添加下面的代码
{
"scripts": {
"commitlint": "commitlint --config commitlint.config.cjs -e -V"
},
}
配置 husky 信息
npx husky add .husky/commit-msg
在生成的 commit-msg 文件中添加下面的命令
#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"
pnpm commitlint
commit message 格式规范
commit message 由 Header、Body、Footer 组成。
git add .
git cz 之前,先全局安装 以下代码,cmd 一下打开终端
npm install commitizen -g
初始化项目
成功安装 Commitizen 后,我们用 cz-conventional-changelog 适配器来初始化项目
commitizen init cz-conventional-changelog --pnpm --save-dev --save-exact
这行命令做了两件事:
-
安装 cz-conventional-changelog 到开发依赖(devDependencies)
在
package.json
中加
"config": {
"commitizen": {
"path": "./node_modules/cz-conventional-changelog"
}
}
然后再git cz
提示