如果你最近升級了 Vue Language Tools 3.2，很可能會有一種強烈的直覺感受：

Vue，已經不再只是“能寫 TS”，而是“原生就是 TypeScript 體驗”。

智能提示、自動導入、精準類型推導、局部格式化、語法高亮一致性、穩定性全面提升—— 這些過去只在 純 TypeScript 項目 里才有的體驗，現在在 .vue 文件里一次性給齊了。

一、為什么說「Vue 變成了 TypeScript」？

先說清楚一個前提：不是語法變了，而是“開發體驗的底層標準變了”。

1. 以前的 Vue 是什么狀態？

• .vue 是特殊文件
• TS 能用，但經常「半懂不懂」
• 類型提示時好時壞
• 組件跳轉、props 推斷不穩定
• 寫得越復雜，IDE 越容易“裝死”

本質問題只有一個：Vue 文件里的信息，沒有被 TypeScript 完整理解。

2. 現在的 Vue 是什么狀態？

在 Vue Language Tools 3.2 之后：

• .vue 被完整拆解、建模
• 組件、Props、Slots、v-for、JSDoc?? 都進入 TypeScript 的類型系統
• 編輯器看到的 Vue，已經是一個類型完備的程序結構

你在 Vue 里得到的，是和 .ts 文件同級的智能體驗。

二、Vue Language Tools 3.2 做了什么？

下面我們按官方 Release Notes 順序，一項一項拆開來看。

1. SFC：Vue 文件終于“被完全看懂了”

(1) Rich Hover Message（實驗性）

現在，把鼠標懸停在組件上，你能看到：

• Props
• Slots
• 額外的類型信息
• 全部自動生成、結構清晰

這意味著什么？

組件不再是黑盒，而是“可讀的類型對象”。

以前你要點進去看定義，現在只需要 hover。

?? 注意： 該功能目前是實驗性，需要手動開啟Extensions Settings → Vue → Hover: Rich

(2) 組件自動導入，終于和 TS 一樣順滑

輸入組件名時：

• IntelliSense 直接給你候選
• 選中后自動插入 import
• 不用手寫、不用猜路徑

這一步非常關鍵。

它代表著：Vue 的組件系統，正式進入“類型可索引”的世界。

這正是 TypeScript 項目里最核心的開發體驗之一。

(3) JSDoc 信息真正“生效”了

這次升級里，一個很容易被忽略、但極其重要的點是：

• @deprecated 會直接顯示刪除線
• 注釋不再只是“給人看”
• 而是參與 IDE 的行為決策

這說明什么？

Vue 組件，開始像一個“類型 API”被對待。

這正是 TS 生態的成熟標志。

(4) v-for key 類型與 TS / 運行時對齊

一個非常“工程級”的改動：

• number 類型的 key
• 自動視為 string
• 與 TS 推斷 & Vue runtime 完全一致

這解決的是：

• “類型對，但編輯器報錯”
• “編輯器不報，運行時報錯”

現在三者終于統一了。

2. 格式化：Vue 不再是格式化的“異類”

(5) 支持「選中范圍格式化」

這是一個寫多了你就離不開的功能：

• 不再強制格式化整個文件
• 精準處理當前代碼塊
• 對大組件文件尤其友好

這已經是純 TS 項目里的標配體驗。

(6) 塊級格式化設置（Per-block）

現在你可以：

• template 一套規則
• script 一套規則
• style 再一套規則

這意味著：Vue 文件終于可以無縫接入復雜工程的格式化體系。

而不是被迫遷就一種“Vue 特供格式”。

3. 語法 & 高亮：穩定性全面補齊

(7) 修復多年遺留的高亮問題

這是一個“不會上熱搜，但人人受益”的升級：

• 語法高亮不再亂跳
• 邊界 case 被系統性修復
• 編輯器表現更接近真實語義

穩定性，是專業感的基礎。

(8) HTML wrapAttributes 格式終于正確高亮

如果你用過：

• force-expand-multiline
• force-aligned

你一定遇到過：格式是對的，但高亮是錯的。

現在，這個割裂終于被補上。

三、寫在最后

Vue 并沒有“拋棄 JavaScript”， 而是徹底站在了 TypeScript 這一邊。

Vue Language Tools 3.2 做的事情只有一件：讓 Vue 在編輯器里的地位，和 .ts 文件完全等價。

vue-language-tools-v3.2：https://gist.github.com/serkodev/ab7d6033f889992b779c2f57fa1ba818