一.日常安利　VS code

　　VS vode特點(diǎn)：

• 開源，免費(fèi)；
• 自定義配置
• 集成git
• 智能提示強(qiáng)大
• 支持各種文件格式（html/jade/css/less/sass/xml）
• 調(diào)試功能強(qiáng)大
• 各種方便的快捷鍵
• 強(qiáng)大的插件擴(kuò)展

?　　對(duì)前端這么友好，沒理由不用。

?

??Visual Studio Code（VScode ）官網(wǎng)　：https://code.visualstudio.com/

Visual Studio Code（VScode ）github地址 ：https://github.com/Microsoft/vscode

?

二.怎么安裝插件？

方法一：

• 按F1或Ctrl+Shift+p，輸入extensions，點(diǎn)擊第一個(gè)就可以

方法二：

• ctrl + P 然后輸入 >ext install

方法三：

• 點(diǎn)擊圖中位置

?

三.插件合集

插件官網(wǎng)：https://marketplace.visualstudio.com/

　　每一個(gè)插件名都超鏈接到官網(wǎng)，注意查看

?

a.配置類插件：

1.Settings Sync

最好用的插件，沒有之一，一臺(tái)電腦配置好之后，其它的幾臺(tái)電腦都不用配置。新機(jī)器登錄一下就搞定了。再也不用折騰環(huán)境了，

使用GitHub Gist同步多臺(tái)計(jì)算機(jī)上的設(shè)置，代碼段，主題，文件圖標(biāo)，啟動(dòng)，鍵綁定，工作區(qū)和擴(kuò)展。

2.Debugger for Chrome

從VS Code調(diào)試在Google Chrome中運(yùn)行的JavaScript代碼。

用于在Google Chrome瀏覽器或支持Chrome DevTools協(xié)議的其他目標(biāo)中調(diào)試JavaScript代碼的VS Code擴(kuò)展。

?3.beautify

格式化代碼工具

美化javascript，JSON，CSS，Sass，和HTML在Visual Studio代碼。

4.Atuo Rename Tag

修改 html 標(biāo)簽，自動(dòng)幫你完成頭部和尾部閉合標(biāo)簽的同步修改

?

5.中文（簡(jiǎn)體）語言包

Chinese (Simplified) Language Pack for Visual Studio Code

將界面轉(zhuǎn)換為中文，對(duì)英語不好的人，非常友好。例如我。。。

?

6.Code Spell Checker

代碼拼寫檢查器

一個(gè)與camelCase代碼配合良好的基本拼寫檢查程序。

此拼寫檢查程序的目標(biāo)是幫助捕獲常見的拼寫錯(cuò)誤，同時(shí)保持誤報(bào)數(shù)量較低。

7.vscode-icons

顯示Visual Studio代碼的圖標(biāo)，目前該插件已被vscode內(nèi)部支持："文件" -> "首選項(xiàng)" -> "文件圖標(biāo)主題"

8.guides

顯示代碼對(duì)齊輔助線，很好用

9.Rainbow Brackets

為圓括號(hào)，方括號(hào)和大括號(hào)提供彩虹色。這對(duì)于Lisp或Clojure程序員，當(dāng)然還有JavaScript和其他程序員特別有用。

效果如下：

?

10.Bracket Pair Colorizer

用于著色匹配括號(hào)

11.Indent-Rainbow

用四種不同顏色交替著色文本前面的縮進(jìn)

12.filesize

在狀態(tài)欄中顯示當(dāng)前文件大小，點(diǎn)擊后還可以看到詳細(xì)創(chuàng)建、修改時(shí)間

13.Import Cost

對(duì)引入的計(jì)算大小

?

14.Path Intellisense

可自動(dòng)填充文件名。

?

15.WakaTime?

?從您的編程活動(dòng)自動(dòng)生成的度量標(biāo)準(zhǔn)，見解和時(shí)間跟蹤。

16.GitLens

git日志查看插件

GitLens 增強(qiáng)了 Visual Studio Code 中內(nèi)置的 Git 功能。例如 commits 搜索，歷史記錄和和查看代碼作者身份，還能通過強(qiáng)大的比較命令獲得有價(jià)值的見解等等

17..REST Client

REST客戶端允許您直接發(fā)送HTTP請(qǐng)求并在Visual Studio Code中查看響應(yīng)。

18.Npm Intellisense?

用于在 import 語句中自動(dòng)填充 npm 模塊

require 時(shí)的包提示（最新版的vscode已經(jīng)集成此功能）

?

19.Azure Storage

VS Code的Azure存儲(chǔ)擴(kuò)展允許您部署靜態(tài)網(wǎng)站并瀏覽Azure Blob容器，文件共享，表和隊(duì)列。按照本教程從VS Code部署Web應(yīng)用程序到Azure存儲(chǔ)。

20.Project Manager

它可以幫助您輕松訪問項(xiàng)目，無論它們位于何處。不要再錯(cuò)過那些重要的項(xiàng)目了。您可以定義自己的收藏項(xiàng)目，或選擇自動(dòng)檢測(cè)VSCode項(xiàng)目，Git，Mercurial和SVN存儲(chǔ)庫或任何文件夾。

從版本8開始，您就有了專門的項(xiàng)目活動(dòng)欄！

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

• 將任何項(xiàng)目保存為收藏夾
• 自動(dòng)檢測(cè)VSCode，GIT中，水銀或SVN存放區(qū)
• 在相同或新窗口中打開項(xiàng)目
• 識(shí)別已刪除/重命名的項(xiàng)目
• 一個(gè)狀態(tài)欄標(biāo)識(shí)當(dāng)前項(xiàng)目
• 專門的活動(dòng)欄

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

這個(gè)插件，這個(gè)下載次數(shù)，安裝就對(duì)了。

?

22.Todo Tree?

此擴(kuò)展可以快速搜索（使用ripgrep）您的工作區(qū)以獲取TODO和FIXME等注釋標(biāo)記，并在資源管理器窗格的樹視圖中顯示它們。單擊樹中的TODO將打開文件并將光標(biāo)放在包含TODO的行上。

找到的TODO也可以在打開的文件中突出顯示。

?

b.VS code 主題集合

1.Night Owl???

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

?

2.Atom One Dark Theme

一個(gè)基于Atom的黑暗主題

3.Dracula Official

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

4.One Dark Pro

?Atom標(biāo)志性的One Dark主題，也是VS Code下載次數(shù)最多的主題之一！

5.Bimbo

簡(jiǎn)約而現(xiàn)代的神奇海洋主題

?

?c.代碼提示提示類

1.HTML Snippets

完整的HTML代碼提示，包括HTML5

2.HTML CSS Support

?在 html 標(biāo)簽上寫class 智能提示css樣式

3.jQuery Code Snippets

?jQuery代碼提示

超過130個(gè)用于JavaScript代碼的jQuery代碼片段。

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

?

4.HTMLHint

html代碼檢測(cè)，支持html5

?

d.語言相關(guān)

1.C＃

• 適用于.NET Core的輕量級(jí)開發(fā)工具。
• 偉大的C＃編輯支持，包括語法突出顯示，智能感知，轉(zhuǎn)到定義，查找所有引用等。
• 調(diào)試支持.NET Core（CoreCLR）。注意：不支持單聲道調(diào)試。桌面CLR調(diào)試支持有限。
• 支持Windows，macOS和Linux上的project.json和csproj項(xiàng)目。

2.CodeMetrics

計(jì)算TypeScript / JavaScript文件的復(fù)雜性。

3.VUE插件

　　vetur? ?　　 語法高亮、智能感知、Emmet等

　　VueHelper??　　snippet代碼片段

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

　　prettier? ? 代碼規(guī)范性插件

4.?Java Extension Pack

它是一組流行的擴(kuò)展，可以幫助在Visual Studio Code中編寫，測(cè)試和調(diào)試Java應(yīng)用程序。查看VS Code中的Java以開始使用。

?

其他

萬能語言運(yùn)行環(huán)境 Code Runner

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

如果你需要學(xué)習(xí)或者接觸各種各樣的開發(fā)語言，那么 Code Runner 插件可以讓你不用搭建各種語言的開發(fā)環(huán)境，直接通過此插件就可以直接運(yùn)行對(duì)應(yīng)語言的代碼，非常適合學(xué)習(xí)或測(cè)試各種開發(fā)語言。

支持的語言有：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

優(yōu)秀的代碼除了優(yōu)秀的性能、規(guī)范的格式，注釋也是不可或缺的，而且注釋也應(yīng)該有一套標(biāo)準(zhǔn)的注釋方法，特別對(duì)于 JavaScript 這種語言。

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

CSS 類名智能提示

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

在 HTML 中調(diào)用定義好的樣式名時(shí)，有時(shí)需要經(jīng)常在 HTML 與 CSS 文件之間切換，來回地查看你已定義好的 CSS 類名。

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

轉(zhuǎn)載于:https://www.cnblogs.com/zhuochong/p/11359839.html

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。