當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

Visual Studio Code（VS code）介绍

發布時間：2024/4/15 编程问答 39 豆豆

生活随笔收集整理的這篇文章主要介紹了 Visual Studio 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

格式化代碼工具

美化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也可以在打開的文件中突出顯示。

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等

　　VueHelper??　　snippet代碼片段

? ? ? ?ESLint? ? 　　將ESLint JavaScript集成到VS代碼中。

　　prettier? ? 代碼規范性插件

4.?Java Extension Pack

它是一組流行的擴展，可以幫助在Visual Studio Code中編寫，測試和調試Java應用程序。查看VS Code中的Java以開始使用。

其他

萬能語言運行環境 Code Runner

插件名稱：Code Runner
插件地址：https://marketplace.visualstudio.com/items?itemName=formulahendry.code-runner

如果你需要學習或者接觸各種各樣的開發語言，那么 Code Runner 插件可以讓你不用搭建各種語言的開發環境，直接通過此插件就可以直接運行對應語言的代碼，非常適合學習或測試各種開發語言。

支持的語言有：C, C++, Java, JavaScript, PHP, Python, Perl, Perl 6, Ruby, Go, Lua, Groovy, PowerShell, BAT/CMD, BASH/SH, F# Script, F# (.NET Core), C# Script, C# (.NET Core), VBScript, TypeScript, CoffeeScript, Scala, Swift, Julia, Crystal, OCaml Script, R, AppleScript, Elixir, Visual Basic .NET, Clojure, Haxe, Objective-C, Rust, Racket, AutoHotkey, AutoIt, Kotlin, Dart, Free Pascal, Haskell, Nim, D, 以及一些自定義的命令。

快速注釋 Document This

插件名稱：Document This
插件地址：https://marketplace.visualstudio.com/items?itemName=joelday.docthis

優秀的代碼除了優秀的性能、規范的格式，注釋也是不可或缺的，而且注釋也應該有一套標準的注釋方法，特別對于 JavaScript 這種語言。

Document This 可以快速地幫你生成注釋，如一些函數的注釋還能幫你抽取出參數的定義等，是你編寫規范代碼必備的工具。

CSS 類名智能提示

插件名稱：IntelliSense for CSS class names in HTML
插件地址：https://marketplace.visualstudio.com/items?itemName=Zignd.html-css-class-completion

在 HTML 中調用定義好的樣式名時，有時需要經常在 HTML 與 CSS 文件之間切換，來回地查看你已定義好的 CSS 類名。

而有了 IntelliSense for CSS class names in HTML 插件后，你可以在 HTML 中需要調用 CSS 類名的地方，此插件會智能地給你已定義 CSS 類名的提示。

轉載于:https://www.cnblogs.com/zhuochong/p/11359839.html

總結

以上是生活随笔為你收集整理的Visual Studio Code（VS code）介绍的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。