vue3项目提前准备

第一步：安装 Vue 3 TypeScript 项目需要用到的 npm 模块依赖：

执行安装依赖命令：npm i -D typescript  @vue/tsconfig；
其中 typescript 模块是 TypeScript 官方的编译模块，@vue/tsconfig 是 Vue 3 官方的配置模块，我们可以基于这个模块来直接使用官方的推荐配置，减少初始化配置的成本。

第二步：配置 TypeScript 的配置文件 tsconfig.config.json：
在项目的根目录下创建名为 tsconfig.config.json 的文件，文件内容如下代码所示：

{
  "extends": "@vue/tsconfig/tsconfig.web.json",
  "include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
  "compilerOptions": {
    "baseUrl": "."
  }
}

由于 Vite 自带了 TypeScript 的编译处理，所以我们就不需要新增其它开发配置了。
第三步：修改源码文件的 TypeScript 文件类型：
Vue 模板文件设置 TypeScript 语言类型 lang=“ts”；JS 文件改成 TS 文件。

我们先来看第一步，ESLint 配置，ESLint 功能是代码格式化和代码质量检查

npm i -D eslint eslint-plugin-vue @vue/eslint-config-prettier @vue/eslint-config-typescript

上述依赖的各自作用如下：
eslint 是 ESLint 的核心模块，包括 CLI 命令工具；
eslint-plugin-vue 是 ESLint 的 Vue.js 语法插件，主要用于检查 Vue 代码文件语法；
@vue/eslint-config-prettier 是 ESLint 的 Prettier 配置，主要是联动 Prettier 进行代码规范的格式化；
@vue/eslint-config-typescript 是 ESLint 的 TypeScript 配置，主要是检查 Vue.js 项目中的 TypeScript 语法；
其次是要设置 ESLint 项目配置文件 .eslintrc.cjs，参考如下：

/* eslint-env node */

module.exports = {
  root: true,
  plugins: ['prettier'],
  extends: [
    'plugin:vue/vue3-essential',
    'plugin:prettier/recommended',
    'eslint:recommended',
    '@vue/eslint-config-typescript/recommended',
    '@vue/eslint-config-prettier'
  ],
  rules: {
    // 单引号限制
    quotes: ['error', 'single'],
    // 禁用console
    'no-console': 'error'
  }
};

这里的 ESLint 配置，直接使用了 Vue 3 官方默认 ESLint 配置。当然你也可以通过 rules 定义项目的代码风格配置，例如我这里就设置了单引号限制和禁用 console 使用的代码质量限制，其它规范配置可以查看 [[1]官方配置文档][1]
[1]: https://eslint.org/docs/latest/user-guide/configuring/rules “官方配置文档”

第二步，是 Prettier 配置。Prettier 的作用是格式化代码风格，后续加上 VS Code 的 Prettier 插件，可以在保存代码时候，自动格式化代码风格。同样地，我们首先安装 npm 模块：

第二步，是 Prettier 配置。Prettier 的作用是格式化代码风格，后续加上 VS Code 的 Prettier 插件，可以在保存代码时候，自动格式化代码风格。同样地，我们首先安装 npm 模块：

然后在根目录创建 prettier 配置文件 .prettierrc.json，文件内容如下：

{
  "tabWidth": 2,
  "useTabs": false,
  "endOfLine": "auto",
  "singleQuote": true,
  "semi": true,
  "trailingComma": "none",
  "bracketSpacing": true
}

第三步，就是 VS Code 编辑器的配置，主要是能和 ESLint 和 Prettier 配置进行联动生效。
我们先要安装 VS Code 的 ESLint 和 Prettier 等相关插件。这里 Vue 3 项目需要以下五个 VS Code 插件：
Vue.volar ： Vue 3 官方推荐的 VS Code 开发插件；
Vue.vscode-typescript-vue-plugin： Vue 3 TypeScript 语法辅助 VS Code 插件；
dbaeumer.vscode-eslint ： ESLint 的 VS Code 插件；
esbenp.prettier-vscode ：Prettier 的 VS Code 插件；
rvest.vs-code-prettier-eslint：ESLint 联动 Prettier 的 VS Code 插件；

安装完插件后，我们再配置 VS Code 编辑器配置，在项目的根目录下创建一个 .vscode 的目录。接着再创建 VS Code 扩展插件的配置文件 .vscode/extensions.json，声明我们项目需要用到的插件，这样子只要用 VS Code 打开这个项目，就可以提醒开发者去安装相关插件了。

{
  "recommendations": [
    "Vue.volar",
    "Vue.vscode-typescript-vue-plugin",
    "rvest.vs-code-prettier-eslint",
    "dbaeumer.vscode-eslint",
    "esbenp.prettier-vscode"
  ]
}

最后我们还要配置 VS Code 的项目本地配置文件 .vscode/settings.json，主要是声明使用插件的配置和一些编辑器的保存自动格式化代码的配置：

{
  "editor.formatOnSave": true,
  "eslint.format.enable": true,
  "prettier.configPath": ".prettierrc.json",
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[vue]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}