vite2+vue3.2+ts 在vscode中个人比较舒服的配置，保存自动eslint+pretter格式化，setup优雅的添加name属性，添加打包代码分析

项目初始化

环境要求

node >= 16
// 实测12.22.12中初始化会报错

打开命令行输入以下指令

npm init vue@latest

这一指令将会安装并执行 create-vue，它是 Vue 官方的项目脚手架工具。你将会看到一些诸如 TypeScript 和测试支持之类的可选功能提示：

✔ Project name: … <your-project-name>
✔ Add TypeScript? … No / Yes
✔ Add JSX Support? … No / Yes
✔ Add Vue Router for Single Page Application development? … No / Yes
✔ Add Pinia for state management? … No / Yes
✔ Add Vitest for Unit testing? … No / Yes
✔ Add Cypress for both Unit and End-to-End testing? … No / Yes
✔ Add ESLint for code quality? … No / Yes
✔ Add Prettier for code formatting? … No / Yes

Scaffolding project in ./<your-project-name>...
Done.

将项目放入vscode编辑器中，目录如下所示：

在根目录中新建 .prettierrc 修改prettier默认设置

{
  "//": "https://prettier.io/docs/en/options.html#prose-wrap",
  "_comment0": "trailingComma:在多行逗号分隔的句法结构中尽可能打印尾随逗号,默认es5,'es5'- 在 ES5 中有效的尾随逗号(对象、数组等)。TypeScript 中的类型参数中没有尾随逗号。'none'- 没有尾随逗号。'all'- 尽可能使用尾随逗号",
  "trailingComma": "none",
  "_comment1": "printWidth:一行长度,默认80",
  "printWidth": 120,
  "_comment2": "tabWidth:缩进级别的空格数,默认2",
  "tabWidth": 2,
  "_comment3": "semi:在语句的末尾打印分号,默认true",
  "semi": false,
  "_comment4": "singleQuote:使用单引号而不是双引号,默认false",
  "singleQuote": true,
  "_comment5": "bracketSameLine:将>多行 HTML(HTML、JSX、Vue、Angular)元素放在最后一行的末尾,而不是单独放在下一行,默认false",
  "bracketSameLine": true,
  "_comment6": "useTabs:使用制表符而不是空格缩进行,默认false",
  "useTabs": false,
  "_comment7": "quoteProps:引用对象中的属性时更改,默认'as-needed'",
  "quoteProps": "as-needed",
  "_comment8": "jsxSingleQuote:在 JSX 中使用单引号而不是双引号,默认false",
  "jsxSingleQuote": true,
  "_comment9": "bracketSpacing:在语句的末尾打印分号,默认true",
  "bracketSpacing": true,
  "_comment10": "arrowParens:引用对象中的属性时更改,默认'always','always'- 始终包括括号。例子:(x) => x'avoid'- 尽可能省略括号。例子:x => x",
  "arrowParens": "always",
  "_comment11": "endOfLine:文本文件中的行尾风格,默认'lf','lf'– 仅换行 ( \n),常见于 Linux 和 macOS 以及 git repos 内部'crlf'- 回车 + 换行字符 ( \r\n),常见于 Windows",
  "endOfLine": "auto"
}

在 .vscode目录下新建settings.json，为该项目做设置

{
    "editor.codeActionsOnSave": {
        "source.fixAll": true,
    },
    "eslint.validate": [
        "javascript",
        "javascriptreact",
        "typescript",
        "typescriptreact",
    ],
    "eslint.alwaysShowStatus": true,
    "editor.formatOnSave": true
}

修改env.d.ts, 解决ts引入 .vue报错问题，js项目可跳过

/// <reference types="vite/client" />
declare module '*.vue' {
  import type { DefineComponent } from 'vue'
  // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types
  const component: DefineComponent<{}, {}, any>
  export default component
}

修改vite.config.ts 添加setup对name的支持

import { fileURLToPath, URL } from 'url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
/**
	在<script setup> 中使用name <script setup name="xx">
	需安装 vite-plugin-vue-setup-extend
*/
import vueSetupExtend from 'vite-plugin-vue-setup-extend'
/**
	打包后代码分析
	需安装 rollup-plugin-visualizer
*/
import { visualizer } from 'rollup-plugin-visualizer'

// https://vitejs.dev/config/
export default defineConfig(({ command }) => {
  const plugins = [
    vue(),
    vueSetupExtend(),
  ]
  /** 打包时加入代码分析，会在visualizer文件夹下以时间戳为文件名 */
  if (command == 'build')
    plugins.push(
      visualizer({
        filename: `visualizer/${new Date().getTime()}.html`
      })
    )
  return {
    /** 打包时使用相对地址 */
    base: command == 'build' ? './' : '/',
    /** 插件相关 */
    plugins,
    /** 引入时快捷提示 */
    resolve: {
      alias: {
        '@': fileURLToPath(new URL('./src', import.meta.url))
      }
    }
  }
})

安装vscode插件

npm安装插件

npm i vite-plugin-vue-setup-extend rollup-plugin-visualizer -D
npm i

重启vscode，配置生效，可以愉快的开发了