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
方法三:
- 點選圖中位置
三.外掛合集
每一個外掛名都超連結到官網,注意檢視
a.配置類外掛:
最好用的外掛,沒有之一,一臺電腦配置好之後,其它的幾臺電腦都不用配置。新機器登入一下就搞定了。再也不用折騰環境了,
使用GitHub Gist同步多臺計算機上的設定,程式碼段,主題,檔案圖示,啟動,鍵繫結,工作區和擴充套件。
從VS Code除錯在Google Chrome中執行的JavaScript程式碼。
用於在Google Chrome瀏覽器或支援Chrome DevTools協議的
3.beautify
格式化程式碼工具
美化javascript
,JSON
,CSS
,Sass
,和HTML
在Visual Studio程式碼。
修改 html 標籤,自動幫你完成頭部和尾部閉合標籤的同步修改
Chinese (Simplified) Language Pack for Visual Studio Code
將介面轉換為中文,對英語不好的人,非常友好。例如我。。。
程式碼拼寫檢查器
一個與camelCase程式碼配合良好的基本拼寫檢查程式。
此拼寫檢查程式的目標是幫助捕獲常見的拼寫錯誤,同時保持誤報數量較低。
顯示Visual Studio程式碼的圖示,目前該外掛已被vscode內部支援:"檔案" -> "首選項" -> "檔案圖示主題"
8.guides
顯示程式碼對齊輔助線,很好用
為圓括號,方括號和大括號提供彩虹色。這對於Lisp或Clojure程式設計師,當然還有JavaScript和其他程式設計師特別有用。
效果如下:
用於著色匹配括號
用四種不同顏色交替著色文字前面的縮排
12.filesize
在狀態列中顯示當前檔案大小,點選後還可以看到詳細建立、修改時間
13.Import Cost
對引入的計算大小
可自動填充檔名。
15.WakaTime
從您的程式設計活動自動生成的度量標準,見解和時間跟蹤。
16.GitLens
git日誌檢視外掛
GitLens 增強了 Visual Studio Code 中內建的 Git 功能。例如 commits 搜尋,歷史記錄和和檢視程式碼作者身份,還能通過強大的比較命令獲得有價值的見解等等
17..REST Client
REST客戶端允許您直接傳送HTTP請求並在Visual Studio Code中檢視響應。
用於在 import 語句中自動填充 npm 模組
require 時的包提示(最新版的vscode已經整合此功能)
VS Code的Azure儲存擴充套件允許您部署靜態網站並瀏覽Azure Blob容器,檔案共享,表和佇列。按照本教程從VS Code部署Web應用程式到Azure儲存。
它可以幫助您輕鬆訪問專案,無論它們位於何處。不要再錯過那些重要的專案了。您可以定義自己的收藏專案,或選擇自動檢測VSCode專案,Git,Mercurial和SVN儲存庫或任何資料夾。
從版本8開始,您就有了專門的專案活動欄!
以下是Project Manager提供的一些功能:
- 將任何專案儲存為收藏夾
- 自動檢測VSCode,GIT中,水銀或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
版權:本文版權歸作者
轉載:歡迎轉載,但未經作者同意,必須保留此段宣告;必須在文章中給出原文連線;