创建项目
运行下面的命令创建 vue3 项目，按下图所示进行选择。然后运行 npm install 下载依赖包，npm run dev 运行项目
npm create vue@latest my-vue3-app
⚠️ 注意 1：项目中 eslint 版本已经是 v9+ 了；v9 要求 node 版本在 (^18.18.0, ^20.9.0, or >=21.1.0)。node 版本要求
⚠️ 注意 2：VSCode 编辑器预先下载 Vue Official 插件
问题 1：使用 VSCode 开发时，vue3 项目中要禁用 vetur (vue2 用的)，启用 vue official (vue3 用的)
vue3 项目中启用了 vetur 发生了下图中的错误：
如果你既有 vue3 项目，又有 vue2 项目，可以为它们分别创建 workspace，然后在 vue3 的 workspace 中禁用 Vetur。具体可参考：blog.csdn.net/Zhuangvi/ar…
问题 2：无法识别vue文件
问题 3：在 .ts 文件中编辑之后，格式化问题没有提示且保存无法自动格式化
下图左侧是没有格式错误提示的，右侧是有提示的。
这是因为初始化之后的 eslint.config.js 使用了 @vue/eslint-config-prettier/skip-formatting，它没有开启 prettier/prettier 规则。将其改成引用 @vue/eslint-config-prettier
@vue/eslint-config-prettier/skip-formatting
@vue/eslint-config-prettier
问题 4：使用 vite-svg-loader 时 ts 报错
4.1 下载 vite-svg-loader 并且在 vite.confg.ts 中配置如下：
npm install -D vite-svg-loader
4.2 使用的时候报错：找不到声明
<script setup lang="ts">
import AssetLogoFull from '@/assets/logo.svg?component'
</script>
4.3 解决办法
其实 vite-svg-loader 包里提供了声明文件，如下图：
我们只需要在 ts 配置中 include 声明文件的路径即可
问题 5：.vue 的 script 中使用了 tsx 报错：Parsing error: '>' expected.eslint
<script setup lang="tsx">
type ListItemType = { icon?: string }
const menuIcon = (item: ListItemType) => {
if (typeof item.icon === 'string') return <t-icon name={item.icon} />
const RenderIcon = item.icon
return RenderIcon
}
</script>
在 eslint.config.js 配置支持 tsx，默认 @vue/eslint-config-typescript 是只支持 ts（github.com/vuejs/eslin…
问题 6：vue, vue-router 在各个文件中经常引用，可以使用 unplugin-auto-import/vite 避免显示 import
6.1 下载 unplugin-auto-import 并且在 vite.confg.ts 中配置如下：
npm install -D unplugin-auto-import
6.2 运行 npm run dev 可以看到在根目录下生成了 auto-imports.d.ts 文件
6.3 在引用了 vue, vue-router 的文件中去掉引用，发现还是报错了，这是 ts 没有找到 auto-imports.d.ts
6.4 在 ts 配置中 include 声明文件的路径即可
问题 7：如何在保存的时候自动格式化 import 的引用顺序
下载 eslint-plugin-simple-import-sort 并且在 eslint.confg.ts 中配置如下：
npm install -D eslint-plugin-simple-import-sort
建议 8：推荐一个可视化看 eslint 的工具
npx @eslint/config-inspector
