VSCode中值得推薦的常用的33個高效前端外掛「效率篇」(一)

語言: CN / TW / HK

VSCode 是我們前端開發的一個強大的IDE,所以選擇趁手好用的外掛是提高開發效率,然後剩下的時間用來摸魚是很有必要滴。

效率篇(33)

Auto Rename Tag

Auto Rename Tag : 自動重新命名成對的 HTML/XML 標記,與 Visual Studio IDE 相同。

Auto Close Tag

Auto Close Tag : 自動新增 HTML/XML 關閉標記,與 Visual Studio IDE 或 Sublime Text 一樣。

    • 鍵入開始標籤的右括號時自動新增結束標籤
    • 插入結束標籤後,游標在開始和結束標籤之間
    • 設定不自動關閉的標籤列表
    • 自動關閉自 閉合 標籤
    • 支援 Sublime Text 3 的自動關閉標籤
    • 使用鍵盤快捷鍵或命令面板手動新增關閉標籤
  • 用法: 輸入開始標籤的右括號後,將自動插入結束標籤

也可以安裝 Auto Complete Tag 外掛,它已經結合了自動關閉標籤和自動重新命名標籤外掛的功能。

Auto Complete Tag

Auto Complete Tag : 結合自動關閉標籤自動重新命名標籤的功能

Trailing Spaces

Trailing Spaces : 突出顯示尾隨空格並立即刪除它們!****

IntelliCode

IntelliCode : 此擴充套件通過在完成列表頂部顯示程式碼上下文的推薦完成項來提供 AI 輔助 IntelliSense。

Tabnine

Tabnine : 使用AI更快的完成編寫程式碼,並且支援多種開發語言。

GitHub Copilot

GitHub Copilot 是 GitHub 出品的人工智慧寫程式碼的神外掛,它通過使用 github 上的程式碼庫的程式碼進行大量的訓練後,可以函式名、註釋等方式幫助你自動完成程式碼的編寫。需要在官網註冊方可使用,官網地址可以檢視更多內容:https://copilot.github.com/

GitHub Copilot : GitHub Copilot 使用 OpenAI Codex 從您的編輯器中實時建議程式碼和整個功能。經過數十億行公共程式碼的訓練,GitHub Copilot 將包括註釋和方法名稱在內的自然語言提示轉化為數十種語言的編碼建議

Template String Converter

Template String Converter : "${"此擴充套件在鍵入時將字串轉換為模板字串

此外掛安裝後如果沒有效果,需要在 settings.json 檔案中配置需要支援的語言:

"template-string-converter.validLanguages": [ "html", "vue", "svelte", "typescript", "javascript", "typescriptreact", "javascriptreact" ]

CSS Peek

CSS Peek : *快速跳到CSS的定義處預覽 *。

    • Peek:內聯載入 css 檔案並在此處進行快速編輯。( Ctrl+Shift+F12)
    • 轉到:直接跳轉到 css 檔案或在新編輯器中開啟它 ( F12)
    • 懸停:懸停在符號 ( Ctrl+hover)上顯示定義

CSS Initial Value

CSS Initital Value : *顯示每個 CSS 屬性初始值的 VS Code 擴充套件 *。

後續如有發現更多更好的外掛將繼續分享。安裝太多的外掛恐會影響 VSCode 的啟動速度,同時增加記憶體的佔用,可能影響開發效率,最終適得其反,所以建議只安裝自己喜歡的、常用的即可。