
【基本介紹】
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 HandleVS 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



































