1. 程式人生 > 實用技巧 >Visual Studio Code(VS code)你們都在用嗎?或許你們需要看一下這篇博文

Visual Studio Code(VS code)你們都在用嗎?或許你們需要看一下這篇博文

寫在前面

    在前端開發中,有一個非常好用的工具,Visual Studio Code,簡稱VS code。

   都不用我安利VS code,大家就會乖乖的去用,無數個大言不慚的攻城獅,都被VS code比德芙還絲滑的強大功能所折服。

   我是來給大家安利外掛的,想做個比較全面的外掛集合給大家。網上的我也看過一些,但是都比較零散,時間也久了一些,我結合最近的情況,總結一下

   造福大家,才是我想做的。手動比心❤。

正文

一.日常安利 VS code

  VS vode特點:

  • 開源,免費;
  • 自定義配置
  • 整合git
  • 智慧提示強大
  • 支援各種檔案格式(html/jade/css/less/sass/xml)
  • 除錯功能強大
  • 各種方便的快捷鍵
  • 強大的外掛擴充套件

  對前端這麼友好,沒理由不用。

Visual Studio Code(VScode )官網 :https://code.visualstudio.com/

Visual Studio Code(VScode )github地址 :https://github.com/Microsoft/vscode

二.怎麼安裝外掛?

方法一:

  • 按F1或Ctrl+Shift+p,輸入extensions,點選第一個就可以

方法二:

  • ctrl + P 然後輸入 >ext install

方法三:

  • 點選圖中位置

三.外掛合集

外掛官網:

https://marketplace.visualstudio.com/

  每一個外掛名都超連結到官網,注意檢視

a.配置類外掛:

1.Settings Sync

最好用的外掛,沒有之一,一臺電腦配置好之後,其它的幾臺電腦都不用配置。新機器登入一下就搞定了。再也不用折騰環境了,

使用GitHub Gist同步多臺計算機上的設定,程式碼段,主題,檔案圖示,啟動,鍵繫結,工作區和擴充套件。

2.Debugger for Chrome

從VS Code除錯在Google Chrome中執行的JavaScript程式碼。

用於在Google Chrome瀏覽器或支援Chrome DevTools協議的

其他目標中除錯JavaScript程式碼的VS Code擴充套件。

3.beautify

格式化程式碼工具

美化javascriptJSONCSSSass,和HTML在Visual Studio程式碼。

4.Atuo Rename Tag

修改 html 標籤,自動幫你完成頭部和尾部閉合標籤的同步修改

5.中文(簡體)語言包

Chinese (Simplified) Language Pack for Visual Studio Code

將介面轉換為中文,對英語不好的人,非常友好。例如我。。。

6.Code Spell Checker

程式碼拼寫檢查器

一個與camelCase程式碼配合良好的基本拼寫檢查程式。

此拼寫檢查程式的目標是幫助捕獲常見的拼寫錯誤,同時保持誤報數量較低。

7.vscode-icons

顯示Visual Studio程式碼的圖示,目前該外掛已被vscode內部支援:"檔案" -> "首選項" -> "檔案圖示主題"

8.guides

顯示程式碼對齊輔助線,很好用

9.Rainbow Brackets

為圓括號,方括號和大括號提供彩虹色。這對於Lisp或Clojure程式設計師,當然還有JavaScript和其他程式設計師特別有用。

效果如下:

10.Bracket Pair Colorizer

用於著色匹配括號

11.Indent-Rainbow

用四種不同顏色交替著色文字前面的縮排

12.filesize

在狀態列中顯示當前檔案大小,點選後還可以看到詳細建立、修改時間

13.Import Cost

對引入的計算大小

14.Path Intellisense

可自動填充檔名。

15.WakaTime

從您的程式設計活動自動生成的度量標準,見解和時間跟蹤。

16.GitLens

git日誌檢視外掛

GitLens 增強了 Visual Studio Code 中內建的 Git 功能。例如 commits 搜尋,歷史記錄和和檢視程式碼作者身份,還能通過強大的比較命令獲得有價值的見解等等

17..REST Client

REST客戶端允許您直接傳送HTTP請求並在Visual Studio Code中檢視響應。

18.Npm Intellisense

用於在 import 語句中自動填充 npm 模組

require 時的包提示(最新版的vscode已經整合此功能)

19.Azure Storage

VS Code的Azure儲存擴充套件允許您部署靜態網站並瀏覽Azure Blob容器,檔案共享,表和佇列。按照本教程從VS Code部署Web應用程式到Azure儲存。

20.Project Manager

它可以幫助您輕鬆訪問專案,無論它們位於何處。不要再錯過那些重要的專案了。您可以定義自己的收藏專案,或選擇自動檢測VSCode專案,GitMercurialSVN儲存庫或任何資料夾。

從版本8開始,您就有了專門的專案活動欄

以下是Project Manager提供的一些功能:

  • 將任何專案儲存為收藏夾
  • 自動檢測VSCodeGIT中水銀SVN存放區
  • 在相同或新視窗中開啟專案
  • 識別已刪除/重新命名的專案
  • 一個狀態列標識當前專案
  • 專門的活動欄

21.Language Support for Java(TM) by Red Hatredhat.java

這個外掛,這個下載次數,安裝就對了。

22.Todo Tree

此擴充套件可以快速搜尋(使用ripgrep)您的工作區以獲取TODO和FIXME等註釋標記,並在資源管理器窗格的樹檢視中顯示它們。單擊樹中的TODO將開啟檔案並將游標放在包含TODO的行上。

找到的TODO也可以在開啟的檔案中突出顯示。

b.VS code 主題集合

1.Night Owl

一個非常適合夜貓子的 VS Code 主題。像是為喜歡深夜編碼的人精心設計的。

2.Atom One Dark Theme

一個基於Atom的黑暗主題

3.Dracula Official

官方吸血鬼主題,博主用的就是這款,很漂亮

4.One Dark Pro

Atom標誌性的One Dark主題,也是VS Code下載次數最多的主題之一!

5.Bimbo

簡約而現代的神奇海洋主題

c.程式碼提示提示類

1.HTML Snippets

完整的HTML程式碼提示,包括HTML5

2.HTML CSS Support

在 html 標籤上寫class 智慧提示css樣式

3.jQuery Code Snippets

jQuery程式碼提示

超過130個用於JavaScript程式碼的jQuery程式碼片段。

只需鍵入字母'jq'即可獲得所有可用jQuery程式碼片段的列表。

4.HTMLHint

html程式碼檢測,支援html5

d.語言相關

1.C#

  • 適用於.NET Core的輕量級開發工具。
  • 偉大的C#編輯支援,包括語法突出顯示,智慧感知,轉到定義,查詢所有引用等。
  • 除錯支援.NET Core(CoreCLR)。注意:不支援單聲道除錯。桌面CLR除錯支援有限
  • 支援Windows,macOS和Linux上的project.json和csproj專案。

2.CodeMetrics

計算TypeScript / JavaScript檔案的複雜性。

3.VUE外掛

  vetur    語法高亮、智慧感知、Emmet、vue提示等

  VueHelper  snippet程式碼片段

ESLint   將ESLint JavaScript整合到VS程式碼中。程式碼規範提示

  prettier 程式碼規範性外掛

4.Java Extension Pack

它是一組流行的擴充套件,可以幫助在Visual Studio Code中編寫,測試和除錯Java應用程式。檢視VS Code中的Java以開始使用。

作者:Dawnzhang
出處:https://www.cnblogs.com/clwydjgs/p/10078065.html
版權:本文版權歸作者
轉載:歡迎轉載,但未經作者同意,必須保留此段宣告;必須在文章中給出原文連線;