Visual Studio Code（VS code）你們都在用嗎狸演？或許你們需要看一下?

寫在前面

　　　　在前端開發(fā)中言蛇，有一個(gè)非常好用的工具，Visual Studio Code宵距，簡稱VS code腊尚。

　　　都不用我安利VS code，大家就會(huì)乖乖的去用满哪，無數(shù)個(gè)大言不慚的攻城獅婿斥，都被VS code比德芙還絲滑的強(qiáng)大功能所折服。

　　　我是來給大家安利插件的哨鸭，想做個(gè)比較全面的插件集合給大家受扳。網(wǎng)上的我也看過一些，但是都比較零散兔跌，時(shí)間也久了一些，結(jié)合只我使用峡蟋，有一年的情況坟桅，總結(jié)一下

　　　造福大家，才是我想做的蕊蝗。手動(dòng)比心?仅乓。尾部有彩蛋~希望大家可以看到最后

正文

一.日常安利　VS code

　　VS vode特點(diǎn)：

[if !supportLists]·?[endif]開源，免費(fèi)蓬戚；

[if !supportLists]·?[endif]自定義配置

[if !supportLists]·?[endif]集成git

[if !supportLists]·?[endif]智能提示強(qiáng)大

[if !supportLists]·?[endif]支持各種文件格式（html/jade/css/less/sass/xml）

[if !supportLists]·?[endif]調(diào)試功能強(qiáng)大

[if !supportLists]·?[endif]各種方便的快捷鍵

[if !supportLists]·?[endif]強(qiáng)大的插件擴(kuò)展

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

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

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

二.怎么安裝插件豫喧？

方法一：

[if !supportLists]·?[endif]按F1或Ctrl+Shift+p，輸入extensions幢泼，點(diǎn)擊第一個(gè)就可以

[if !supportLists]·?[endif]

方法二：

[if !supportLists]·?[endif]ctrl + P 然后輸入 >ext install

[if !supportLists]·?[endif]

方法三：

[if !supportLists]·?[endif]點(diǎn)擊圖中位置

[if !supportLists]·?[endif]

三.插件合集

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

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

a.配置類插件：這是我所用到的插件，安利一下

1.Settings Sync

最好用的插件缕棵，沒有之一孵班，一臺(tái)電腦配置好之后涉兽，其它的幾臺(tái)電腦都不用配置。新機(jī)器登錄一下就搞定了篙程。再也不用折騰環(huán)境了枷畏。我這里有配置好的賬號(hào)，有需要的可以來找我喲~git賬號(hào) 373497399@qq.com虱饿，1分鐘配置好前端開發(fā)環(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.中文（簡體）語言包

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提供的一些功能：

[if !supportLists]·?[endif]將任何項(xiàng)目保存為收藏夾

[if !supportLists]·?[endif]自動(dòng)檢測(cè)VSCode康嘉，GIT中，水銀或SVN存放區(qū)

[if !supportLists]·?[endif]在相同或新窗口中打開項(xiàng)目

[if !supportLists]·?[endif]識(shí)別已刪除/重命名的項(xiàng)目

[if !supportLists]·?[endif]一個(gè)狀態(tài)欄標(biāo)識(shí)當(dāng)前項(xiàng)目

[if !supportLists]·?[endif]專門的活動(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

簡約而現(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＃

[if !supportLists]·?[endif]適用于.NET Core的輕量級(jí)開發(fā)工具主慰。

[if !supportLists]·?[endif]偉大的C＃編輯支持嚣州，包括語法突出顯示，智能感知共螺，轉(zhuǎn)到定義该肴，查找所有引用等。

[if !supportLists]·?[endif]調(diào)試支持.NET Core（CoreCLR）藐不。注意：不支持單聲道調(diào)試匀哄。桌面CLR調(diào)試支持有限。

[if !supportLists]·?[endif]支持Windows雏蛮，macOS和Linux上的project.json和csproj項(xiàng)目涎嚼。

2.CodeMetrics

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

3.VUE插件

　　vetur? ?　　 語法高亮挑秉、智能感知法梯、Emmet、vue提示等

　　VueHelper??　　snippet代碼片段

? ? ? ?ESLint? ? 　　將ESLint JavaScript集成到VS代碼中衷模。代碼規(guī)范提示

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

4.?Java Extension Pack

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

Visual Studio Code的插件功能真的是強(qiáng)大到爆裂，還有什么有意思的插件木蹬，歡迎大家在評(píng)論區(qū)補(bǔ)充哦至耻，

覺得有用，記得點(diǎn)推薦哦镊叁，讓別人也能看到尘颓；

?