使用 Vite 新建一个 Vue3 的项目

由于项目需要，所以自己得研究一下如何从头开始搭建一个项目。需要满足的条件有多人协作的各种代码检查、commit 检查、CI/CD等。

初始化

使用 vite 来初始化一个项目。

yarn create @vitejs/app

输入 vue-demo，选择 vue, 再选择 vue。打开此项目即可。

格式化代码

使用 eslint + prettier 来格式化 .ts / .vue 文件。操作如下：

1. 安装 eslint 以及 prettier

yarn add eslint prettier -D

2. 设定 eslint：按照自己的情况选择配置项即可

yarn run eslint --init

3. 添加 .prettierrc.json 文件

{
  "singleQuote": true,
  "trailingComma": "all",
  "vueIndentScriptAndStyle": true
}

4. 使 eslint 兼容 prettier

yarn add eslint-config-prettier eslint-plugin-prettier -D

5. 更改 .eslintrc.js 文件中的 extends 字段

extends: ['plugin:vue/essential', 'airbnb-base', 'prettier'],

6. 下载 VSCode 插件：eslint, prettier
7. 设置 VSCode 默认格式化插件为 prettier

使用 stylelint 来格式化 .css / .scss 文件。

1. 安装 stylelint

yarn add stylelint -D

2. 配置 .stylelintrc.json

{
  "extends": "stylelint-config-standard"
}

提交代码的时候自动格式化

使用 husky + lint-staged 来自动格式化。

1. git 初始化

```git init
2. 安装 husky + lint-staged
```bash
yarn add husky lint-staged -D

3. husky 后续安装

npx husky-init && yarn

4. 配置 pre-commit

npx husky add .husky/pre-commit 'npx lint-staged'

5. 配置 lint-staged，在 package.json 加入以下信息：

"lint-staged": {
  "*.{js,vue}": [
    "eslint --fix"
  ],
  "*.{css,scss}": [
    "stylelint --fix"
  ]
}

这样就可以在提交代码前完成对代码的检测以及格式化操作。

检测提交代码的 commit 是否符合格式

使用 commitlint 来检测 git commit 信息，为了方便直接使用默认的检测格式。如果需要定制化，请看 [commitlint] 官方网站，上面提供了一些 API，用来定制化。

1. 安装 commitlint

yarn add commitlint -D

2. 配置 commitlint，在 package.json 加入以下信息：

"commitlint": {
  "extends": [
    "@commitlint/config-conventional"
  ]
}

3. 配置 commit-msg

npx husky add .husky/commit-msg 'npx --no-install commitlint --edit "$1"'

这样就可以在提交代码时完成对 commit 信息的检测。

设置标准的提交信息

现在我们已经有了 commit 检测，那么就需要有一种方法来创建一个有效的 commit。我们使用 commitizen 。同样，有定制化需求，可以查看 [commitizen] 官方网站，或者自己写个脚本。

1. 安装 commitizen

yarn add commitizen -D

2. 配置 commitizen，在 package.json 加入以下信息：

"scripts": {
  "commit": "yarn run cz",
},
"config": {
  "commitizen": {
    "path": "cz-conventional-changelog"
  }
}

接下来，执行 yarn commit 这个命令，然后按照提示一步一步走，就可以创建一个满足规范的 commit 信息了。

至此，一个简单的项目就创建好了。还没有加上 CI/CD，如果有下次的话那么下次再加吧。