1. 程式人生 > 程式設計 >Visual Studio Code 從簡介、安裝到配置所需外掛詳細介紹

Visual Studio Code 從簡介、安裝到配置所需外掛詳細介紹

提到visualstudiocode,想必你也聽說過visualstudio(vs)

  那就從查閱過的資料大致總結以下幾點,關於這兩個產品的區別:

  首先總的來看,它們都是微軟公司的產品

  名字不一樣當然會有不一樣的用法或者解釋

區別:

①先來介紹vs,它是微軟公司開發發工具包系列產品,是一個基本完整的開發工具集,它包括了整個軟體生命週期中所需要的大部分工具,如UML工具、程式碼管控工具、整合開發環境(IDE)等。通俗的講,是一款編譯器。

而vscode是微軟公司的一個專案,是針對於編寫現代web和雲應用的跨平臺原始碼編輯器。-----含義

②vs各個功能只能在windows和mac上執行

    vscode則可以讓使用者在習慣的平臺上使用,而不是非要用平臺 ----跨平臺能力

   ③vs是目前windows平臺應用程式的整合開發環境(據我所知現更新的版本為vs 2019),它提供了高階開發工具、除錯功能、資料庫功能和創新功能,幫助在各種平臺上快速建立當前最先進的應用程式,開發新的程式。

    vscode集成了所有一款現代編輯器所應該具備的特性,包括語法高亮,可定製的熱鍵繫結,括號匹配以及程式碼片段收集。

  綜上所述:對於windows平臺的人而言,無需使用vscode,但是對於使用linux,mac平臺的人來說,尤其是喜歡在不同編輯器之間來回轉換,這是一個不錯的選擇。

vs code安裝:

接下來我們來介紹vscode的安裝(主要以圖解+簡單文字描述)

這是 Visual Studio Code(VS code )官網 :https://code.visualstudio.com/Download

Visual Studio Code 從簡介、安裝到配置所需外掛詳細介紹

開啟連結,如上圖所示 我用windows來演示

其實點選執行安裝包即可其需要注意的介面是如下圖所示

Visual Studio Code 從簡介、安裝到配置所需外掛詳細介紹

這樣安裝好後就無需配置環境變數,其他步驟均點選下一步即可

因為它是一個很簡潔的文字編輯器,佔用空間不超過100m,但是你在剛安裝完成時,基本上,除了打字,什麼都不能幹。需要自己安裝外掛並手動設定引數。

接下來我來介紹一些外掛,以便你選擇使用

開啟vscode如下圖所示

Visual Studio Code 從簡介、安裝到配置所需外掛詳細介紹

1.Settings Sync

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

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

Visual Studio Code 從簡介、安裝到配置所需外掛詳細介紹

2.Debugger for Chrome

從VS Code除錯在Google Chrome中執行的JavaScript程式碼。
用於在Google Chrome瀏覽器或支援Chrome DevTools協議的其他目標中除錯JavaScript程式碼的VS Code擴充套件。

Visual Studio Code 從簡介、安裝到配置所需外掛詳細介紹

3.beautify

格式化程式碼工具
美化javascript,JSON,CSS,Sass,和HTML在Visual Studio程式碼。

Visual Studio Code 從簡介、安裝到配置所需外掛詳細介紹

4.Atuo Rename Tag

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

Visual Studio Code 從簡介、安裝到配置所需外掛詳細介紹

5.中文(簡體)語言包

Chinese (Simplified) Language Pack for Visual Studio Code
將介面轉換為中文

6.Code Spell Checker

程式碼拼寫檢查器
一個與camelCase程式碼配合良好的基本拼寫檢查程式。
此拼寫檢查程式的目標是幫助捕獲常見的拼寫錯誤,同時保持誤報數量較低。

Visual Studio Code 從簡介、安裝到配置所需外掛詳細介紹

7.vscode-icons

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

Visual Studio Code 從簡介、安裝到配置所需外掛詳細介紹

8.guides

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

Visual Studio Code 從簡介、安裝到配置所需外掛詳細介紹

9.Rainbow Brackets

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

Visual Studio Code 從簡介、安裝到配置所需外掛詳細介紹

10.Bracket Pair Colorizer

用於著色匹配括號

Visual Studio Code 從簡介、安裝到配置所需外掛詳細介紹

11.Indent-Rainbow

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

Visual Studio Code 從簡介、安裝到配置所需外掛詳細介紹

12.filesize

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

Visual Studio Code 從簡介、安裝到配置所需外掛詳細介紹

13.Import Cost

對引入的計算大小

Visual Studio Code 從簡介、安裝到配置所需外掛詳細介紹

14.Path Intellisense

可自動填充檔名。

Visual Studio Code 從簡介、安裝到配置所需外掛詳細介紹

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

Visual Studio Code 從簡介、安裝到配置所需外掛詳細介紹

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

Visual Studio Code 從簡介、安裝到配置所需外掛詳細介紹

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

Visual Studio Code 從簡介、安裝到配置所需外掛詳細介紹

18.Npm Intellisense
用於在 import 語句中自動填充 npm 模組
require 時的包提示(最新版的vscode已經整合此功能)

Visual Studio Code 從簡介、安裝到配置所需外掛詳細介紹

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

Visual Studio Code 從簡介、安裝到配置所需外掛詳細介紹

20.Project Manager
它可以幫助您輕鬆訪問專案,無論它們位於何處。不要再錯過那些重要的專案了。您可以定義自己的收藏專案,或選擇自動檢測VSCode專案,Git,Mercurial和SVN儲存庫或任何資料夾。
從版本8開始,您就有了專門的專案活動欄!
以下是Project Manager提供的一些功能:
將任何專案儲存為收藏夾
自動檢測VSCode,GIT中,水銀或SVN存放區
在相同或新視窗中開啟專案
識別已刪除/重新命名的專案
一個狀態列標識當前專案
專門的活動欄

Visual Studio Code 從簡介、安裝到配置所需外掛詳細介紹

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

Visual Studio Code 從簡介、安裝到配置所需外掛詳細介紹

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

Visual Studio 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
簡約而現代的神奇海洋主題

總結

到此這篇關於Visual Studio Code 從簡介、安裝到配置所需外掛 的文章就介紹到這了,更多相關visual studio code 安裝配置外掛內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們!