Visual Studio Code 從介紹,安裝到配置所需插件


該文章將會介紹到vs與vs code的區別,並且會詳細介紹vs code的安裝步驟,和我所了解過的插件配置(如有遺漏,歡迎大家補充並提出寶貴意見)

提到visual studio code,想必你也聽說過visual studio(vs)

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

 

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

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

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

而vs code是微軟公司的一個項目,是針對於編寫現代web和雲應用的跨平台源代碼編輯器。-----含義

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

    vs code則可以讓用戶在習慣的平台上使用,而不是非要用平台  ----跨平台能力

   ③vs是目前windows平台應用程序的集成開發環境(據我所知現更新的版本為vs 2019),它提供了高級開發工具、調試功能、數據庫功能和創新功能,幫助在各種平台上快速創建當前最先進的應用程序,開發新的程序。

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

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

 

vs code安裝:

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

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

打開鏈接,如上圖所示   我用windows來演示

其實點擊運行安裝包即可其需要注意的界面是如下圖所示

 

 

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

因為它是一個很簡潔的文本編輯器,占用空間不超過100m,但是你在剛安裝完成時,基本上,除了打字,什么都不能干。需要自己安裝插件並手動設置參數。

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

打開vs code 如下圖所示

 

 

1.Settings Sync
最好用的插件,沒有之一,一台電腦配置好之后,其它的幾台電腦都不用配置。新機器登錄一下就搞定了。再也不用折騰環境了,

使用GitHub Gist同步多台計算機上的設置,代碼段,主題,文件圖標,啟動,鍵綁定,工作區和擴展。

2.Debugger for Chrome
從VS Code調試在Google Chrome中運行的JavaScript代碼。
用於在Google Chrome瀏覽器或支持Chrome DevTools協議的其他目標中調試JavaScript代碼的VS Code擴展。

3.beautify
格式化代碼工具
美化javascript,JSON,CSS,Sass,和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項目,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也可以在打開的文件中突出顯示。

 

 

再介紹一些主題
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
簡約而現代的神奇海洋主題

以上就是我分享的關於vs code的相關信息,希望可以幫助到需要的人

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM