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

語言: CN / TW / HK

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

Indenticator

Indenticator : 直觀地突出顯示當前的縮排深度。此擴充套件可以單獨使用,但建議與內建縮排指南一起使用(設定editor.renderIndentGuides)。這些在每個縮排上顯示細灰線,而此擴充套件突出顯示游標當前所在縮排深度上的縮排。

Guides

Guides : Guides 只是新增各種縮排指南線的外掛。

Auto Import - ES6、TS、JSX、TSX

Auto Import : 自動匯入 - ES6、TS、JSX、TSX(VSCode 擴充套件)。

JavaScript (ES6) code snippets

JavaScript (ES6) code snippets : 此擴充套件包含用於 Vs Code 編輯器的 ES6 語法中的 JavaScript 程式碼片段(同時支援 JavaScript 和 TypeScript。

Paste JSON as Code

Paste JSON as Code : 從 JSON、JSON Schema 和 TypeScript 互動式生成型別和(反)序列化程式碼;將 JSON/JSON Schema/TypeScript 貼上為程式碼。

JSON to TS

JSON to TS : 將 JSON 物件轉換為 TypeScript 介面。

    • 從剪貼簿轉換(Shift + Ctrl + Alt + V)
    • 從選擇轉換(Shift + Ctrl + Alt + S)
    • 可選引號
    • 轉換器
      • 陣列型別合併(大交易) - 重複型別預防 - 聯合型別 - 可選型別 - 陣列型別

\

Regex Previewer

Regex Previewer : 。

  • 外掛名:Regex Previewer
  • 官方地址: https://marketplace.visualstudio.com/items?itemName=chrmarti.regex
  • 特徵: 在並排文件中顯示當前正則表示式的匹配項。Ctrl+Alt+M這可以用( )開啟/關閉⌥⌘M。可以通過狀態列條目新增全域性和多行選項以使用並排文件進行評估。當並排文件有多個要匹配的示例時,這可能很有用。

\

Sort Typescript Imports

Regex Previewer : 對 Typescript 程式碼中的匯入語句進行排序。

\

Turbo Console Log

Turbo Console Log : 此擴充套件通過自動化編寫有意義的日誌訊息的操作使除錯變得更加容易。

\

Dot Log

Dot Log : 一個使用 .log將引數記錄到控制檯的 vscode 擴充套件。

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