快速用vite搭建vue3+ts项目，每一步都有测试，让你轻松搞定自动化

创建项目

1.创建项目指令

js 复制代码

npm create vite@latest vite-demo

2.选择 vue 框架

3.选择 ts

4.项目创建完成，安装依赖包

js 复制代码

npm install

5.运行项目

js 复制代码

npm run dev

到这里我们的项目就搭建完成了。

代码格式化

1.Vscode 下载插件：Prettier - Code formatter

2.项目下载依赖

js 复制代码

npm i prettier -D
npm i @types/node -D

3.项目根目录新增 .prettierrc.ts 配置文件，下面是一些简单配置，可自行去官网学习相关配置。

js 复制代码

module.exports = {
    printWidth: 130, // 超过最大值换行
    tabWidth: 2, // 缩进字节数
    useTabs: true, // 使用制表符而不是空格缩进行
    semi: false, // 结尾不用分号(true有，false没有)
    singleQuote: true, // 使用单引号(true单引号，false双引号)
    bracketSpacing: true, // 在对象，数组括号与文字之间加空格 "{ foo: bar }"
    jsxSingleQuote: true, // 在JSX中使用单引号而不是双引号
    arrowParens: "avoid", //  箭头函数只有一个参数时是否要有小括号。avoid：无,always：有
};

4.修改 package.json 文件

json 复制代码

  "scripts": {
      ...
      "prettier:src": "prettier  --write \"src/**/*.{ts,js,vue}\"", // 指定src文件下
      "prettier": "prettier  --write ." // 所有文件
  },

5.测试

修改 app.vue 文件，打乱代码格式。
运行指令：

js 复制代码

npm run prettier:src

发现 app.vue 中的代码被正常格式化了。

代码规范配置

1.Vscode 下载插件：ESLint 2.项目下载依赖：

js 复制代码

npm i eslint -D

3.初始化 eslint 后，会自动在项目根目录下创建 .eslintrc.json 文件。

js 复制代码

npx eslint --init

根据下面指示选择初始化内容：

js 复制代码

You can also run this command directly using 'npm init @eslint/config'.
√ How would you like to use ESLint? · problems    
√ What type of modules does your project use? · esm
√ Which framework does your project use? · vue
√ Does your project use TypeScript? · Yes
√ Where does your code run? · browser, node
√ What format do you want your config file to be in? · JSON
The config that you've selected requires the following dependencies:     
@typescript-eslint/eslint-plugin@latest eslint-plugin-vue@latest @typescript-eslint/parser@latest
√ Would you like to install them now? · Yes
√ Which package manager do you want to use? · npm

下面就是自动生成的 .eslintrc.json 文件。

js 复制代码

{
    "env": {
        "browser": true,
        "es2021": true,
        "node": true
    },
    "extends": [
        "eslint:recommended",
        "plugin:@typescript-eslint/recommended",
        "plugin:vue/vue3-essential"
    ],
    "parserOptions": {
        "ecmaVersion": "latest",
        "parser": "@typescript-eslint/parser",
        "sourceType": "module"
    },
    "plugins": [
        "@typescript-eslint",
        "vue"
    ],
    "rules": {
    }
}

4.下载依赖解决和 Prettier 的冲突：

js 复制代码

npm i eslint-plugin-prettier eslint-config-prettier -D

.eslintrc.json 增加配置：

js 复制代码

  "extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:vue/vue3-essential",
    "plugin:prettier/recommended" // 记住一定要加在最后
  ],

5.修改 package.json 文件：

json 复制代码

"scripts": {
	...
    "eslint:src": "eslint \"src/**/*.{ts,js,vue}\" \"src/main.ts\""
},

6.代码规范检测：

修改 .eslintrc.json 文件，在 rules 中增加一条规则进行验证

js 复制代码

 "rules": {
    "no-var": "error" // 不允许使用 var
  }

修改 app.vue 文件，增加 var

js 复制代码

<script setup lang="ts">
import { ref } from "vue";
var a = ref(3);
</script>

执行命令检测：

js 复制代码

npm run eslint:src

配置完成后，检测就会出现下面的提示了。

代码提交配置

1.husky 工具常见钩子函数：

pre-commit 钩子会在 commit 前触发，可以做代码检测，如提交时 eslint 。
pre-push 会在 push 前触发。
commit-msg会在 git commit 触发，可以做提交信息检测，防止提交信息五花八门。

2.使用 husky

项目下载依赖：
js 复制代码
```
npm i husky -D
```
使用指令：npm pkg set scripts.prepare="husky install"，在 package.json 自动生成 husky install。
使用指令：npm run prepare ，在根目录下自动生成 husky 文件。项目必须要绑定 git 仓库，不然就会跳过指令。
配置 pre-commit
- 使用指定：npx husky add .husky/pre-commit "npm run eslint:src"，在 .husky 文件下自动生成 pre-commit 文件。
  js 复制代码
```
#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"

npm run eslint:src
```
  - 只要保存本地代码或 git commit -m "测试" 就会触发 eslint 的相关配置：

优化 pre-commit

每次都对所有文件进行 eslint 很耗时间，所以借助 lint-staged 只对修改过的文件进行检测。
项目下载依赖：
js 复制代码
```
npm i lint-staged -D
```

修改 pre-commit 文件：

js 复制代码

#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"

npm run lint:lint-staged

修改 package.json 文件，增加 lint-staged ：

json 复制代码

"scripts": {
    ...
"prettier:src": "prettier  --write \"src/**/*.{ts,js,vue}\"",
    "prettier": "prettier  --write .",
"eslint:src": "eslint \"src/**/*.{ts,js,vue}\" \"src/main.ts\"",
"lint:prettier": "prettier  --write \"src/**/*.{ts,js,vue}\"",
    "lint:eslint": "eslint \"src/**/*.{ts,js,vue}\" \"src/main.ts\"", 
"lint:lint-staged": "lint-staged",
},
"lint-staged": {
"*.{js,jsx,ts,tsx}": [
        //eslint --fix 对应 lint:eslint   
        "eslint --fix",   // 或直接 'npm run eslint:src'  
        "prettier --write"
],
"{!(package)*.json,*.code-snippets,.!(browserslist)*rc}": [
        "prettier --write--parser json"
],
"package.json": [
        "prettier --write"
],
"*.vue": [
        "prettier --write",
        "eslint --fix"
],
"*.{scss,less,styl,html}": [
        "npm run prettier"
],
"*.md": [
        "npm run prettier"
]
},

// 或者根目录下新建 lint-staged.config.ts 文件
module.exports = {
	"*.{js,jsx,ts,tsx}": ["eslint --fix", "prettier --write"],
	"{!(package)*.json,*.code-snippets,.!(browserslist)*rc}": ["prettier --write--parser json"],
	"package.json": ["prettier --write"],
	"*.vue": ["eslint --fix", "prettier --write", "stylelint --fix"],
	"*.{scss,less,styl,html}": ["stylelint --fix", "prettier --write"],
	"*.md": ["prettier --write"],
};

保存本地代码或 git commit -m "测试" 就会触发 prettier、eslint 的相关配置。
- 修改 app.vue 文件，打乱格式：
- 保存本地代码，触发 lint，格式化修正代码：

配置 commit-msg ：

使用指令：npx husky add .husky/commit-msg 'npx --no-install commitlint --edit "${1}"'，在 .husky 文件下自动生成 commit-msg 文件。
下载依赖：npm i @commitlint/cli @commitlint/config-conventional -D。

根目录下新建 .commitlintrc.json 文件：

json 复制代码

{
  "extends": ["@commitlint/config-conventional"],
   // 提交类型，不满足直接会抛错
  "type-enum": [
    2,
    "always",
    ["feat", "fix", "docs", "style", "refactor", "test", "chore", "revert"]
  ]
}
// 常用类型：
feat（新功能）
fix（修复bug）
improvement（对当前功能的改进）
docs（仅包含对文档的修改）
style（格式化变动，不影响代码逻辑）
refactor（重构）
perf（提高性能的修改）
test（添加或修改测试代码）
build（项目打包）
ci（集成配置文件或者脚本的修改）
revert（撤销某次提交，回滚）
chore（构建流程、外部依赖变更，如升级 npm 包、修改 webpack 配置等）

保存本地代码时，就需要加上类型，如：feat: 修改配置文件 ，冒号后一定要有一个空格，不然报错，不加类型也会报错，导致无法保存，如下： -

优化 commit-msg ：

增加指令一键格式化、规范检测、保存、提交代码，且提交信息更语义化。
下载依赖：npm i commitizen cz-git -D。

修改 package.json 文件：

json 复制代码

"scripts": {
    ...
    "commit": "git pull && git add -A && git-cz && git push",
  },
"config": {
    "commitizen": {
      "path": "node_modules/cz-git"
    }
}

提交代码： npm run commit ，直接就会运行以上所有配置，无需进行其它操作。

js 复制代码

Select the type of change that you're committing  // 提交类型选择(必填)
feat
fix
...
Use arrow keys or type to search // 更改的范围
empty
custom
Write a SHORT, IMPERATIVE tense description of the change // 简洁描述(必填)
xxxxx
Provide a LONGER description of the change (optional) // 详细的描述
List any BREAKING CHANGES (optional) // 重大修改
Select the ISSUES type of change (optional) // 选择变更的ISSUES类型
Are you sure you want to proceed with the commit above? (Yneh) // 确定提交

最后

到此所有的配置就完成了，感兴趣的小伙伴可以自己动手试试，还可以在此基础上，增加 stylelint 进行样式的格式化，仓库地址：github.com/webood/vite...