分享 6 個 Vue3 開發必備的 VSCode 外掛

今天分享 6 個 Vue3 開發必備的 VSCode 外掛，可以直接用過 VSCode 的外掛中心直接安裝使用。

如果有覺得有幫助，還請點贊:+1:支援一下~

1. Volar

:fire: 下載數 153 萬+

相信使用 VSCode 開發 Vue2 的同學一定對 Vetur 外掛不會陌生，作為 Vue2 配套的 VSCode 外掛，它的主要作用是對 Vue 單檔案元件提供高亮、語法支援以及語法檢測。

而隨著 Vue3 正式版釋出，Vue 團隊官方推薦Volar 外掛來代替 Vetur 外掛，不僅支援 Vue3 語言高亮、語法檢測，還支援 TypeScript 和基於vue-tsc 的型別檢查功能。

使用時需要注意：

1. 首先要禁用 Vetur 外掛，避免衝突；
2. 推薦使用 css / less / scss 作為 <style> 的語言，因為這些基於vscode-css-language 服務提供了可靠的語言支援；
3. 如果使用 postcss / stylus / sass 的話，需要安裝額外的語法高亮擴充套件。postcss 使用language-postcss，stylus 使用language-stylus 拓展，sass 使用Sass 拓展；
4. Volar 不包含 ESLint 和 Prettier，而官方的ESLint 和Prettier 擴充套件支援 Vue，所以需要自行安裝。

2. Vue VSCode Snippets

:fire: 下載數 152 萬+

Vue VSCode Snippets 外掛旨在為開發者提供最簡單快速的生成 Vue 程式碼片段的方法，通過各種快捷鍵就可以在 .vue 檔案中快速生成各種程式碼片段。簡直是 Vue3 開發必備神器。

該外掛支援：Volar、Vue2 和 Vue3。

使用方式如下：

• 新建一個 .vue 檔案，輸入 vbase 會提示生成的模版內容：

• 輸入 vfor 快速生成 v-for 指令模版：

• 輸入 v3onmounted 快速生成 onMounted 生命週期函式：

其他就不再演示啦，功能實在太強大，常用快捷鍵非常多，具體可以檢視文件。

3. Auto Close Tag

:fire: 下載數 769 萬+

Auto Close Tag 外掛是一個很好用的 VS Code 擴充套件，它對生產率有很大影響。顧名思義，當我們在結束標記中鍵入結束括號時，它將新增結束標記。它支援HTML，Handlebars，XML，PHP，Vue，JavaScript，Typescript，JSX等。

4. Vue Peek

:fire: 下載數 49 萬+

Vue Peek 外掛用來拓展 Vue 程式碼編輯的體驗，可以讓我們快速跳轉到元件、模組定義的檔案。

使用方式如下：

• 右鍵元件標籤，跳轉到元件定義的檔案：

• 右鍵元件標籤，彈窗顯示元件定義的檔案：

5. Vue Theme

:fire: 下載數 34 萬+

Vue Theme 外掛提供了不錯的 Vue 主題，還支援配置不同顏色，感覺還不錯。

6. Vite

:fire: 下載數 8.9 萬+

Vite 外掛可以讓我們開啟專案後，就能自動啟動開發伺服器，允許開發者無需離開編輯器即可預覽和除錯應用。支援一鍵啟動、構建和重啟專案。

總結

今天分享的 6 個外掛，大家可以按需安裝使用。

我比較強烈推薦實用Volar 和Vue VSCode Snippets 這 2 個外掛。

如果覺得不錯，還請點贊支援。:+1:

大家有更好的外掛，歡迎評論分享~:fire:

歡迎關注我的微信公眾號“前端自習課”。