vscode全稱為visual studio code，是微軟旗下一款非常優(yōu)秀的跨平臺(tái)代碼編輯軟件。vscode 中文版集成了大部分代碼編輯的器的優(yōu)點(diǎn)，集成GIT、代碼調(diào)試、語(yǔ)法高亮，擁有強(qiáng)大豐富的插件系統(tǒng)，同時(shí)支持JavaScript、TypeScript和Node.js等腳本語(yǔ)言，運(yùn)行穩(wěn)定，對(duì)系統(tǒng)內(nèi)存的占用率低，同時(shí)采取了和VS相同的UI界面，上手更加容易！

【基本介紹】

Visual Studio Code跨平臺(tái)編輯器是一款運(yùn)行于 OS X，Windows 和 Linux 之上的，針對(duì)于編寫(xiě)現(xiàn)代 web 和云應(yīng)用的跨平臺(tái)編輯器。這標(biāo)志著 Microsoft 第一次向開(kāi)發(fā)者們提供了一款真正的跨平臺(tái)編輯器。
visual studio code是一款免費(fèi)且開(kāi)源的代碼編輯器。支持各種語(yǔ)言代碼的編輯，如：C、Visual Basic、C++、C#、Java、PHP、CSS、HTML等等語(yǔ)言代碼的編輯。visual studio code是專門(mén)為開(kāi)發(fā)人員打造的一款專業(yè)代碼編輯器，有著Editor全功能的定位，再加上開(kāi)源以及跨平臺(tái)受到廣大開(kāi)發(fā)人員的喜愛(ài)，讓您的編寫(xiě)變的更加高效快捷。本次1.17新版本為我們帶來(lái)許多新功能，性能大提升，幾百萬(wàn)代碼文件幾秒鐘快速打開(kāi)，無(wú)卡頓；無(wú)需插件化的代碼diff，非常實(shí)用強(qiáng)大，自動(dòng)提示等等一系列讓用戶更好的體驗(yàn)使用功能。

【軟件特點(diǎn)】

一、滿足智能感知。超越語(yǔ)法高亮和自動(dòng)智能感知，它提供了基于智能完井類型變量，函數(shù)的定義，并導(dǎo)入模塊。
二、打印語(yǔ)句調(diào)試已經(jīng)是過(guò)去的事了。調(diào)試代碼編輯器中的權(quán)利。啟動(dòng)或附加到你的應(yīng)用程序運(yùn)行和調(diào)試斷點(diǎn)，調(diào)用堆棧，和交互式控制臺(tái)。
三、Git命令內(nèi)置。Git和其他供應(yīng)鏈提供商工作從來(lái)都不容易。復(fù)習(xí)階段的差別，文件，和提交正確的編輯。推任何托管供應(yīng)鏈服務(wù)拉。
四、可擴(kuò)展的、可定制的。想要更多的功能？安裝擴(kuò)展來(lái)添加新的語(yǔ)言、主題、調(diào)試器，并連接到額外的服務(wù)。運(yùn)行在獨(dú)立的進(jìn)程擴(kuò)展，確保他們不會(huì)減慢你的編輯器。了解更多關(guān)于擴(kuò)展。

【軟件功能】

1.@Code Handle
VS Code 的其中一個(gè)牛逼之處實(shí)際上并不是編譯器本身的特性。VS Code是在//BUILD 2015 隨著 @code Twitter handle一起發(fā)布的
2.海量語(yǔ)言支持
VS Code不只是跨平臺(tái)， 它想成為支持30多種語(yǔ)言的開(kāi)箱代碼編輯器。 你想問(wèn)哪個(gè)? 你可以編輯C#, VB, JavaScript, HTML, CSS, TypeScript, Ruby, Objective-C, PHP, JSON, Less, Sass 還有 Markdown, 這只是列出來(lái)一丁丁而已~  你可以得到內(nèi)嵌語(yǔ)法高亮和分支匹配， 當(dāng)然也少不了代碼導(dǎo)航。VS Code旨在成為Node.js， ASP.NET 和 TypeScript 開(kāi)發(fā)的首選IDE， 劍指先進(jìn)web/cloud 應(yīng)用。
作為 ASP.NET 5 的開(kāi)發(fā)工具，VS Code 已經(jīng)是一個(gè)富編輯器，它內(nèi)置具備很多日常功能。簡(jiǎn)單使用有效的 Yeoman 工具產(chǎn)生你的 ASP.NET 5 web 應(yīng)用框架，并指向其根目錄。你找到了一個(gè)功能豐富的 IDE（示例項(xiàng)目截圖），它的 Omnisharp-powered 為代碼提供了智能感知，錯(cuò)誤，命令，部署和集成版本控制功能。所有的這些設(shè)計(jì)可以保持現(xiàn)代，精益，跨平臺(tái)的 ASP.NET 5 web 開(kāi)發(fā)在 VS Code 上的所需。

3.并排編輯
vs code 支持的其最受歡迎的開(kāi)發(fā)人員的要求之一--并排編輯代碼。簡(jiǎn)單的命令(?) / 在你的項(xiàng)目瀏覽器的文件上控制點(diǎn)擊，看呀，多個(gè)文件可以并排打開(kāi)文件， pre-docked 并且準(zhǔn)備編輯。VS Code 可以支持三個(gè)同步的文件編輯，每個(gè)人都可以發(fā)射命令提示符。下面的屏幕快照展示了來(lái)源于一個(gè)被開(kāi)放地并排編輯的 asp.net 項(xiàng)目的兩個(gè)文件--生活是美好的。

4.一直開(kāi)啟的智能感應(yīng)
如果沒(méi)有了 VisualStudio 的智能感應(yīng)，你不會(huì)想寫(xiě) .NET 代碼，對(duì)吧？VS Code 知道這些并且嘗試著令人滿意的創(chuàng)造性的智能感應(yīng)。確?；谡Z(yǔ)言特性你能獲得友好的提示，同時(shí)在你自己寫(xiě)的代碼里結(jié)合上下文智能感應(yīng)

5.控制面板
VS 代碼中有一個(gè)強(qiáng)大、方便的功能就是控制面板--通過(guò)簡(jiǎn)單的單擊鍵盤(pán)Command或者Control+Shift+P（??P）來(lái)使用?？紤]到它是你IDE中的PowerShell，為常用任務(wù)準(zhǔn)備一個(gè)快捷方式，例如下面的屏幕截圖。

而且，如果你部署的相聚支持特定的命令行工具，VS代碼控制面板是很聰明的，足以理解并提供幫助。舉個(gè)例子，在我的ASP.NET 5 web應(yīng)用中，Project.JSon列出了一些特定的DNX（可執(zhí)行的.NET）命令，后面會(huì)給出。在你開(kāi)始鍵入這些可是別的命令時(shí)，控制面板提供IntelliSense幫助，甚至出現(xiàn)為可執(zhí)行的任務(wù)提供命令提示，如下。

6.函數(shù)參數(shù)
VS Code 有很優(yōu)美的智能感知功能，幫助我們?cè)谙鄳?yīng)的調(diào)用中輸入函數(shù)參數(shù)，因此能很輕松地完成代碼。這是與編程語(yǔ)言/系統(tǒng)函數(shù)相關(guān)的功能，除此之外，它智能地對(duì)你的代碼中的自定義函數(shù)提供了幫助。下面的截圖顯示，為函數(shù)調(diào)用提供了輸入?yún)?shù)，在這個(gè)工程里的任何地方 VS Code 都能看到被定義了的函數(shù)。并且很流暢。
7.信息預(yù)覽
作為開(kāi)發(fā)者，你可能常常想要預(yù)覽一個(gè)文件，或檢查一個(gè)函數(shù)的定義。 但是，一個(gè)完整的上下文切換的消耗很大，因?yàn)樗屇銦o(wú)法繼續(xù)輸入。在 VS Code 中輸入預(yù)覽幫助，只需單擊右鍵，或者（F12） -- 這樣預(yù)覽定義（Peek Definition）就會(huì)出現(xiàn)，如下所示。預(yù)覽的結(jié)果內(nèi)嵌在編輯器中，敲擊 Escape 鍵后退出，這樣節(jié)省了大量的上下文切換的時(shí)間。

8.Markdown 預(yù)覽
大多數(shù)開(kāi)發(fā)者都擁有他們最喜歡的 Markdown 編輯器--快速輸入 Markdown，然后預(yù)覽 HTML。VS Code 有意接管 Markdown 編輯，同時(shí) VS Code 也具備這樣的實(shí)力。你可以得到一致的Markdown 編輯支持，準(zhǔn)備好以后，簡(jiǎn)單的觸發(fā) ??V 來(lái)查看預(yù)覽，如下所示。這里也有按鈕，用來(lái)在編輯/預(yù)覽之間切換，同樣，它也會(huì)將預(yù)覽窗口并排放置，以便查看變動(dòng)。
9.調(diào)試
開(kāi)發(fā)者整天寫(xiě)代碼時(shí)處在一種編輯/編譯/調(diào)試的循環(huán)中，對(duì)于現(xiàn)代的任何 IDE 如果沒(méi)有可靠的調(diào)試支持都是一種殘缺。VS Code 已經(jīng)對(duì) Node.js 開(kāi)發(fā)提供可靠的支持并且接下里計(jì)劃對(duì) ASP.NET 5 開(kāi)發(fā)提供最好的調(diào)試體驗(yàn)，在不久的將來(lái)。想要使用 VS Code 調(diào)試你的應(yīng)用，你首先必須設(shè)置你的啟動(dòng)配置文件——這個(gè)文檔向你展示怎樣配置。
配置好以后，你可以通過(guò)視圖欄切換到調(diào)試模式（像下圖展示的）并且能從 VS Code 啟動(dòng)你的 app 或者附加到一個(gè)運(yùn)行的程序中。你可以設(shè)置斷點(diǎn)，查看調(diào)用堆棧或運(yùn)行時(shí)的變量，暫停或一步步執(zhí)行代碼——總的來(lái)說(shuō)，這份完美的調(diào)試體驗(yàn)讓你整天都在使用 VS Code
10.集成版本控制
這永遠(yuǎn)是開(kāi)發(fā)者的痛，必須在代碼編輯器外部配置才能實(shí)現(xiàn)版本控制功能——鑒于此VS  Code內(nèi)置了Git。VS Code可以使用任何類型的Git 庫(kù)——無(wú)論是本地的或遠(yuǎn)程的，并且提供解決代碼提交沖突的可視化提示。你可以很容易地從左邊的視圖欄啟動(dòng)版本控制器，打開(kāi)或關(guān)閉你的Git庫(kù)。VS Code會(huì)自動(dòng)進(jìn)行文件更改的追蹤并且對(duì)代碼提供stage/unstage/commit 三種不同的狀態(tài)操作，如下圖所示，你可以進(jìn)行完全的版本控制而不必離開(kāi)VS Code的界面。

【安裝教程】

在本站下載VSCode文件，如下圖：

點(diǎn)擊下載好的VSCode安裝文件進(jìn)入到VSCode的安裝向?qū)Ы缑妫缦聢D直接默認(rèn)點(diǎn)擊下一步，如下圖：

然后勾選【我接受協(xié)議】，繼續(xù)點(diǎn)擊下一步，如下圖：

然后選擇VSCode軟件安裝位置，這個(gè)位置可以任意選擇，如下圖：

然后下圖是創(chuàng)建開(kāi)始菜單文件夾，這里默認(rèn)然后繼續(xù)點(diǎn)擊下一步，如下圖：

然后下圖中是選擇在進(jìn)行軟件安裝的時(shí)候要進(jìn)行其他的任務(wù)，這里小編只是選擇【添加到PATH（重啟生效）】這個(gè)選項(xiàng)，然后繼續(xù)點(diǎn)擊下一步，如下圖：

然后下圖是確認(rèn)安裝步驟，點(diǎn)擊安裝開(kāi)始安裝，如下圖：

下圖中是安裝進(jìn)度顯示如下圖：

安裝成功之后的安裝成功提示，如下圖：

安裝結(jié)束之后會(huì)默認(rèn)打開(kāi)VSCode，打開(kāi)的VSCode軟件界面如下圖所示：

【中文設(shè)置】

打開(kāi)vscode，如圖所示，可以看到vscode的菜單都是英文格式的。

接著我們同時(shí)按鍵盤(pán)上的快捷鍵Ctrl+shift+p，就可以開(kāi)始設(shè)置vscode的語(yǔ)言啦。

按下快捷鍵之后，在vscode頂部會(huì)出現(xiàn)一個(gè)搜索框，如圖所示。

接著我們?cè)趘scode搜索框里面輸入configure language，然后回車就行了。

之后，在vscode里面就會(huì)打開(kāi)一個(gè)語(yǔ)言配置文件。

我們把locale改成這樣就OK了，這樣就是中文的哦。

之后，Ctrl+s保存設(shè)置，然后重啟vscode，就可以看到中文菜單了，哈哈。

【使用教程】

vscode怎樣新建項(xiàng)目
首先，vscode本身沒(méi)有新建項(xiàng)目的選項(xiàng)，所以要先創(chuàng)建一個(gè)空的文件夾喔。

然后打開(kāi)vscode，再在vscode里面打開(kāi)文件夾，這樣才可以創(chuàng)建項(xiàng)目。

如圖所示，選擇之前創(chuàng)建的空文件將作為vscode的文件夾即可。

如圖，文件夾已經(jīng)被選擇了，但是此時(shí)它還不太完整，我們需要配置一下。

Ctrl+shift+p，然后輸入task，點(diǎn)擊第一個(gè)選項(xiàng)即可配置。

如圖，還會(huì)跳轉(zhuǎn)，再次選擇other……即可自動(dòng)生成配置文件喔。

如圖，原本空文件夾里面就多了json類型的配置文件，這才是一個(gè)完整的項(xiàng)目文件夾喔。


vscode怎樣新建項(xiàng)目
首先，在vscode項(xiàng)目中編寫(xiě)一個(gè)用于預(yù)覽的HTML素材文件。

然后點(diǎn)擴(kuò)展圖標(biāo)，開(kāi)始調(diào)整到擴(kuò)展界面。

在擴(kuò)展搜索欄里邊搜索這個(gè)view in browser 工具，安裝便可以了。

如圖所示，可以重啟或者重新加載擴(kuò)展工具，讓界面進(jìn)行刷新。

這樣，點(diǎn)擊HTML的右鍵菜單就有在瀏覽器中預(yù)覽的選項(xiàng)了哦。

最后小編我再次強(qiáng)調(diào)如果HTML不是vscode項(xiàng)目里邊的，那么就無(wú)法預(yù)覽喲，這一點(diǎn)區(qū)別于其他的編輯器哦。

【插件推薦】

vscode 插件推薦
1 、CSS Peek
使用此插件，你可以追蹤至樣式表中 CSS 類和 ids 定義的地方。當(dāng)你在 HTML 文件中右鍵單擊選擇器時(shí)，選擇“ Go to Definition 和 Peek definition ”選項(xiàng)，它便會(huì)給你發(fā)送樣式設(shè)置的 CSS 代碼。
2、Color Info
這個(gè)便捷的插件，將為你提供你在 CSS 中使用顏色的相關(guān)信息。你只需在顏色上懸停光標(biāo)，就可以預(yù)覽色塊中色彩模型的（HEX、 RGB、HSL 和 CMYK）相關(guān)信息了
3 、SVG Viewer
此插件在 Visual Studio 代碼中添加了許多實(shí)用的 SVG 程序，你無(wú)需離開(kāi)編輯器，便可以打開(kāi) SVG 文件并查看它們。同時(shí)，它還包含了用于轉(zhuǎn)換為 PNG 格式和生成數(shù)據(jù) URI 模式的選項(xiàng)。
4、Icon Fonts
這是一個(gè)能夠在項(xiàng)目中添加圖標(biāo)字體的插件。該插件支持超過(guò) 20 個(gè)熱門(mén)的圖標(biāo)集，包括了 Font Awesome、Ionicons、Glyphicons 和 Material Design Icons。

5、Minify
這是一款用于壓縮合并 JavaScript 和 CSS 文件的應(yīng)用程序。它提供了大量自定義的設(shè)置，以及自動(dòng)壓縮保存并導(dǎo)出為.min文件的選項(xiàng)。它能夠分別通過(guò) uglify-js、clean-css 和 html-minifier，與 JavaScript、CSS 和 HTML 協(xié)同工作

6、fileheader
頂部注釋模板，可定義作者、時(shí)間等信息，并會(huì)自動(dòng)更新最后修改時(shí)間

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

8、Bracket Pair Colorizer
讓括號(hào)擁有獨(dú)立的顏色，易于區(qū)分?？梢耘浜先我庵黝}使用。
9、Quokka
Quokka 是一個(gè)調(diào)試工具插件，能夠根據(jù)你正在編寫(xiě)的代碼提供實(shí)時(shí)反饋。它易于配置，并能夠預(yù)覽變量的函數(shù)和計(jì)算值結(jié)果。另外，在使用 JSX 或 TypeScript 項(xiàng)目中，它能夠開(kāi)箱即用。

10、Prettier
Prettier 是目前 Web 開(kāi)發(fā)中最受歡迎的代碼格式化程序。安裝了這個(gè)插件，它就能夠自動(dòng)應(yīng)用 Prettier，并將整個(gè) JS 和 CSS 文檔快速格式化為統(tǒng)一的代碼樣式。如果你還想使用 ESLint，那么還有個(gè) Prettier – Eslint 插件，你可不要錯(cuò)過(guò)咯！
11、jQuery Code Snippets
jquery 重度患者必須品，廢話不多說(shuō)，上圖

12 、vscode-icon
讓 vscode 資源樹(shù)目錄加上圖標(biāo)，必備良品！

13、Path Intellisense
自動(dòng)路勁補(bǔ)全，默認(rèn)不帶這個(gè)功能的，趕緊裝

14、Document this
js 的注釋模板 （注意：最新版的vscode已經(jīng)原生支持）
15、HTMLHint
html代碼檢測(cè)

【常用快捷鍵】

常用快捷鍵
編輯器與窗口管理
打開(kāi)一個(gè)新窗口： Ctrl+Shift+N
關(guān)閉窗口： Ctrl+Shift+W
同時(shí)打開(kāi)多個(gè)編輯器（查看多個(gè)文件）
新建文件 Ctrl+N
文件之間切換 Ctrl+Tab
切出一個(gè)新的編輯器（最多 3 個(gè)） Ctrl+\，也可以按住 Ctrl 鼠標(biāo)點(diǎn)擊 Explorer 里的文件名
左中右 3 個(gè)編輯器的快捷鍵 Ctrl+1 Ctrl+2 Ctrl+3
3 個(gè)編輯器之間循環(huán)切換 Ctrl+
編輯器換位置， Ctrl+k然后按 Left或 Right

代碼編輯
格式調(diào)整
代碼行縮進(jìn) Ctrl+[ 、 Ctrl+]
Ctrl+C 、 Ctrl+V 復(fù)制或剪切當(dāng)前行/當(dāng)前選中內(nèi)容
代碼格式化： Shift+Alt+F，或 Ctrl+Shift+P 后輸入 format code
上下移動(dòng)一行： Alt+Up 或 Alt+Down
向上向下復(fù)制一行： Shift+Alt+Up 或 Shift+Alt+Down
在當(dāng)前行下邊插入一行 Ctrl+Enter
在當(dāng)前行上方插入一行 Ctrl+Shift+Enter
光標(biāo)相關(guān)
移動(dòng)到行首： Home
移動(dòng)到行尾： End
移動(dòng)到文件結(jié)尾： Ctrl+End
移動(dòng)到文件開(kāi)頭： Ctrl+Home
移動(dòng)到定義處： F12
定義處縮略圖：只看一眼而不跳轉(zhuǎn)過(guò)去 Alt+F12
移動(dòng)到后半個(gè)括號(hào)： Ctrl+Shift+]
選擇從光標(biāo)到行尾： Shift+End
選擇從行首到光標(biāo)處： Shift+Home
刪除光標(biāo)右側(cè)的所有字： Ctrl+Delete
擴(kuò)展/縮小選取范圍： Shift+Alt+Left 和 Shift+Alt+Right
多行編輯(列編輯)：Alt+Shift+鼠標(biāo)左鍵，Ctrl+Alt+Down/Up
同時(shí)選中所有匹配： Ctrl+Shift+L
Ctrl+D 下一個(gè)匹配的也被選中 (在 sublime 中是刪除當(dāng)前行，后面自定義快鍵鍵中，設(shè)置與 Ctrl+Shift+K 互換了)
回退上一個(gè)光標(biāo)操作： Ctrl+U
重構(gòu)代碼
找到所有的引用： Shift+F12
同時(shí)修改本文件中所有匹配的： Ctrl+F12
重命名：比如要修改一個(gè)方法名，可以選中后按 F2，輸入新的名字，回車，會(huì)發(fā)現(xiàn)所有的文件都修改了
跳轉(zhuǎn)到下一個(gè) Error 或 Warning：當(dāng)有多個(gè)錯(cuò)誤時(shí)可以按 F8 逐個(gè)跳轉(zhuǎn)
查看 diff： 在 explorer 里選擇文件右鍵 Set file to compare，然后需要對(duì)比的文件上右鍵選擇 Compare with file_name_you_chose
查找替換
查找 Ctrl+F
查找替換 Ctrl+H
整個(gè)文件夾中查找 Ctrl+Shift+F
顯示相關(guān)
全屏：F11
zoomIn/zoomOut：Ctrl +/-
側(cè)邊欄顯/隱：Ctrl+B
顯示資源管理器 Ctrl+Shift+E
顯示搜索 Ctrl+Shift+F
顯示 Git Ctrl+Shift+G
顯示 Debug Ctrl+Shift+D
顯示 Output Ctrl+Shift+U