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

创建项目

1.创建项目指令

npm create vite@latest vite-demo

2.选择 vue 框架

3.选择 ts

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

npm install 

5.运行项目

npm run dev

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

代码格式化

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

2.项目下载依赖

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

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

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 文件

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

5.测试

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

npm run prettier:src

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

代码规范配置

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

npm i eslint -D

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

npx eslint --init

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

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 文件。

{
    "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 的冲突：

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

• .eslintrc.json 增加配置：

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

5.修改 package.json 文件：

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

6.代码规范检测：

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

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

• 修改 app.vue 文件，增加 var

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

• 执行命令检测：

npm run eslint:src

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

代码提交配置

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

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

2.使用 husky

• 项目下载依赖：

  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 文件。

    #!/usr/bin/env sh
    . "$(dirname -- "$0")/_/husky.sh"
    
    npm run eslint:src

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

• 优化 pre-commit

  • 每次都对所有文件进行 eslint 很耗时间，所以借助 lint-staged 只对修改过的文件进行检测。

  • 项目下载依赖：

    npm i lint-staged -D

  • 修改 pre-commit 文件：

    #!/usr/bin/env sh
    . "$(dirname -- "$0")/_/husky.sh"
    
    npm run lint:lint-staged

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

    "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 文件：

    {
      "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 文件：

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

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

    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...