请教 Vue3 + typescript 最佳实践问题

[jenson47]

如题，我发现 vscode 下使用 vue 官方插件，使用 vue3+typescript 去开发，我发现在 template 上 typescript 是没效果。 比如

1. 第三方扩展自动引入
2. 属性自动识别 [看情况]
3. 不存在属性或方法无法提示错误，总之 typescript 不生效
4. 官方插件偶尔飘

[wunonglin]

放弃吧。模版支持一塌糊涂，用 tsx 的了

[dcsuibian]

用 webstorm

[wu67]

主打一个随缘
个人建议 react . hhhh

[jenson47]

@wunonglin vue tsx 的写法 太复杂了。还不如直接 react 痛快

[Track13]

我用 vscode ，vue3+typescript 实在太卡了。我已经放弃了。

[shimada666]

vscode 听说官方插件 vue official 巨几把烂？以前一直 webstorm 开发的，根本不敢切过来

[skywardcn]

我选择 react

[jenson47]

@shimada666 目前最新的体验确实，虽然解决了 script 那边的问题，但 template 的还是没有，而且飘得很厉害 [同样的 vite+vue 项目，表现不一样]

[beginor]

没人选择 angular 么？ ng 19 把 vue 和 react 的关键特性抄过来，顺便把 c# 的 razor 木板也抄了一下， 用起来非常舒服

[lisongeee]

问一下 vscode 插件 vue official 做得这么垃圾，如各种语法提示失效或重复/高亮着色错误/保存文件卡顿

是否有部分原因是 vue 的语法糖太多的问题？好奇同为模板编译的的 svelte vscode 插件 是否存在此问题？

[wunonglin]

@beginor 用 ng 是目前降低心智的唯一选择

[jenson47]

@beginor 目前 ag 没有深入了解，粗看挺 面向对象以及用了好多 @

[deepshe]

先用的 angular ，后用的 vue ，本来以为支持 typescript 的体验应该都差不多，结果发现 vue 体验差好多，angular 应该是直接就能用了，跳转提示啥的都直接用，不知道是不是 vue 要装什么插件，同进来学习下看看有没有好的用法

[UnluckyNinja]

我只是偶尔遇到过 ts 提示卡住了，一般 ctrl shift p 重启下语言服务器就好了。
自动补全+导入、自动补全组件 props 、单文件组件模板内 ts 类型检查等都没有问题。
个人印象中几个不足是，
1. script 标签在 30 行后会丢失局部变量高亮，没搜到有人报 issue ，不确定是不是我本地问题（调出 vscode 的调试，变量的 textmate 数据正常，就是高亮颜色变了）
2. 模板的默认未定义组件完全没提示，一眼看不出来是不是忘了导入组件，但开启模板组件严格检查后又会提示未声明的 prop 报错，我只是想要个自定义组件未导入的提示……（可以靠 eslint 解决，但如果能内置省事点）（以及 vite 有省去导入组件的插件，只是个人感觉有明确导入直观一点）
3.如果启用 eslint 的保存时自动修正，经常会卡住 code actions ，这个也可能是 eslint 的问题

[nl101531]

@beginor 生态不足

[jenson47]

@UnluckyNinja 这个第 2 点，比如在 react 的 tsx 里，我如果写在 template 时，会提示导入组件第三方或者项目自定义的组件都有。
但是 vue 的 template 就会飘。哪些情形可以提示，项目自定义组件，第三方已导入过的其他组件，比如第三方某包已经引入 Alert ，如果你在 template 里写 Button 就会识别并自动导入。如果没有第三方就不会自动识别和导入，只能在 script 上手动写 [这里会提示]
第 3 点我这边没有测出来，没看到 template 上的报错，以及随便多写也不会识别，很奇怪

[CHTuring]

@lisongeee #10 就是 vue official 巨烂，svelte 和 Astro 这些没有问题。

[chengxy]

tsx + webstorm

[musi]

除了 vue official ，没人说一下那个 vue devtool 吗

[Zzzz77]

vue official 确实非常不稳定，有时会失灵或胡乱报错，大概每周都会遇到过 1~2 次，重启后可恢复正常

至于你说的其他问题我 24 年以来倒是从来没有遇到过

PS. 我从 2020 年开始用 Vue3 + typescript 开发，早期（那时候还叫 volar ） 在 ts 中非常难用，后来（大概 24 年开始？）我基本上没有遇到过什么特别影响开发体验的问题

[0xD800]

只要你们用过几年前的 volar 和几年前的 webstorm ，会觉得现在的 vue official 简直是爽爆了。。。。webstorm 长期不跟进 vue 插件 等麻了

[UnluckyNinja]

@jenson47 这个可能是 vue 扩展和 ts 语言服务器的问题，没加载到依赖所以没提示，一般重启下就好了。懒得导入也可以直接上 unplugin-vue-components ，用对应 ui 库的 resolver ，就不用手动导入了，因为会在项目里直接生成一个.d.ts 所以一般都有类型提示

[shellus]

Vue 官方插件就是一坨！ TypeScript 在模板上不起作用，属性自动引入和错误提示全都失效，这能让人安心开发吗？那些说用 WebStorm 的，谁会因为一个破插件就特意换 IDE ？搞笑呢。

推荐 React 的就别来搅局了，这里讨论的是 Vue+TypeScript ，不是 React ！说什么 TSX 写法复杂，那就说明 Vue 的生态还不成熟，干嘛不直接改进插件？

至于 Angular 和 Svelte ，真以为每个人都能适应那套东西？还有 Svelte ，别吹得那么高，真要用起来也有坑，总之 Vue 官方插件就是个半成品

[jenson47]

@shellus 公司运行的项目不是说变就变了，必须得两手准备，要不彻底转成 react ，要不就是如何优化 Vue Typescript 支持。
我看了下 Vue 官方插件开发进度，感觉有点难，而且 issue 还报挺多坑。
我看大部分开源项目都是使用 tsx 开发。不过我有点没搞明白 tsx 居然还用 Proptype 类型

[Whbbit1999]

还可以啊，我用着就没问题

[jenson47]

@Whbbit1999 #25 大概是这样子，项目是 monorepo 形式，非常大，
出现两个问题，1. vue 对 ts 支持不是很完善，在 template 里很多无法自动补全，template 的 ts 校验也没有
2. 由于体量大，vscode 的 typescript 默认有限制，需要将设置放开[typescript.preferences.includePackageJsonAutoImports 设置]( https://github.com/microsoft/TypeScript/issues/53116)