Visual Studio Code 開源免費跨平臺代碼編輯器

微軟良心之做——Visual Studio Code 開源免費跨平臺代碼編輯器　　

　　在 Build 2015 大會上，微軟除了發佈了 Microsoft Edge 瀏覽器和新的 Windows 10 預覽版外，最大的驚喜莫過於宣佈推出免費跨平臺的 Visual Studio Code 編輯器了！

　　Visual Studio Code (簡稱 VS Code / VSC) 是一款免費開源的現代化輕量級代碼編輯器，支持語法高亮、智能代碼補全、自定義熱鍵、括號匹配、代碼片斷、代碼對比 Diff、GIT 等特性，並針對網頁開發和雲端應用開發作了優化。軟件跨平臺支持 Win、Mac 以及 Linux，運行流暢，可謂是微軟的良心之做……

　　相信不少程序員同窗都沒想過有一天能在不用虛擬機的狀況下直接在 Mac、Linux 上使用 VisualStudio 吧。固然，微軟稱 Visual Studio Code 並不是完整版的 Visual Studio，它只是一款輕量級的代碼編輯器，而不是一個重量級的完整 IDE (集成開發環境)，它的競爭對手將會是 Sublime Text、Atom、VIM、Notepad++ 等產品。

　　當你開始閱讀這篇文章時，請先不要把Visual Studio Code和.net、Windows聯想到一塊兒，由於VS Code是一個跨平臺，支持30多種語言的開箱代碼編輯器。無論你是.Net、Java、PHP、Python、TypeScript、Objective-C...仍是前端開發者，你都值得擁有。下面，讓咱們來看一看Visual Studio Code 這個神器吧~

1、Visual Studio Code的下載和安裝

　　Visual Studio Code最新版下載地址，https://www.visualstudio.com/，文件不到60M，如圖：

　　

　　下載完成後，單擊下載的exe文件便可自動安裝，這兒須要注意的時，安裝時沒有指定安裝的路徑，有的童鞋安裝完後就不知道如何打開了，個人電腦是win7的，安裝的默認路徑爲：

　　C:\Users\%USERNAME%\AppData\Local\Code\app-0.3.0\Code.exe

2、Visual Studio Code簡介

 　　安裝完成後，咱們看到的Visual Studio Code界面以下，固然不一樣的系統界面邊框略有不一樣，基本佈局如圖：

下面咱們來進行一些簡單的設置，下面就拿你們最關心的字體大小設置來講吧，其餘的都相似，點擊如圖菜單：

咱們會看到以下頁面，VS Code會打開兩個文件：

　　左邊的是默認設置，右邊的是用戶設置，其餘的一些設置均可以在左邊的默認設置裏面找到，咱們要修改什麼設置，拷貝到右邊的窗口中修改便可。例如，咱們要修改字體大小，如圖修改就行了，注意這是個json文件。 

　　工具欄簡介

　　一、資源管理器

　　下面來看一下右邊的工具欄，資源管理器就不用多說了很簡單，只是這裏有個功能值得注意一下，如圖：

　　在文件上面點擊鼠標右鍵，有個Copy Path，能夠複製文件的物理路徑。固然，你會想爲何不是打開文件位置啊，其實這個功能已經有了，就是Reveal in Explorer.記住啦，不要再無知的吐槽了~

其餘的菜單，本身點點就知道了，比較簡單，我就不廢話了。

　　二、搜索

　　下面來講說這個搜索，爲何要在這個地方加一個搜索的工具欄呢？若是你熟悉Visual Studio的話，你會發現按快捷鍵Ctrl + F會出現一個搜索框，如圖：

　　細心的你也許會發現，當你按下Ctrl + Shit + F的時候，會激活這個工具欄的搜索功能，沒錯，這個功能就是相似Visual Studio中的全局搜索功能，如圖：

　　看到了吧，這裏的搜索結果，在1.html中和2.html中都搜索出來了"博客園"這個關鍵字。看到這裏，已經心動了吧~~

還有Ctrl + G鍵，輸入行號能夠跳轉到指定的行！ 

　　三、Git版本控制

　　這個功能，用過Git你們都清楚，Git的初始化必須在一個空的文件夾裏面，因此要使用這個功能，也是要先有一個文件夾的，下面咱們來看看怎麼操做，如圖：

　　是否是感受很流弊，右鍵文件夾均可以直接打開，打開後，咱們繼續看，如圖：

　　到了這裏，很明顯了，點擊那個Initialize git repository按鈕，初始化Git倉庫。而後，咱們新建一個文件，名字爲index.html,保存到這個文件夾下。接下來，注意啦，注意啦，咱們要輸入如下內容，如圖：

　　若是你還一行一行的敲，那就太low了，這裏先交給你們一個方法，在空白的文檔裏面輸入一個感嘆號！，注意是英文的哦，而後，點擊Tab鍵，看看發生了什麼，是否是duang的如下就出來了~~

　　而後，咱們按Ctrl + S保存文件，再來看Git這個工具欄的變化，如圖：

　　咱們看到了，changes裏面出現了index.html,而後，咱們輸入commit message，點擊上面的對勾提交，而後，咱們會看到changes下面的文件都消失了，而且右邊的1變成了0。

　　點擊那個...按鈕，會彈出菜單，這裏有更多的Git的操做，我就不一一介紹了，相信使用過Git的都看的懂的！ 

　　四、調試

　　這個功能簡單的說就是調試代碼，若是要使用的話還要進行一些配置，具體你們看官方文檔Debugging,我就再也不細說了，你們有興趣就本身去研究吧~~

 3、Visual Studio Code上手體驗

　　VS Code支持多種語言，咱們先來看一下官方的說明：

　　這裏大概說的是對CSS, HTML, JavaScript, JSON, Less, Sass幾種語言有智能提示，其餘的語言都是語法高亮和重構。就是說你寫C#、Java等一些代碼都是沒有智能提示的，可是都會有語法高亮。這些代碼查看，你們能夠打開一些相關的代碼文件看看，我就不一一演示了。 

　　一、文件類型

　　下面咱們來看看VS Code編寫代碼是否順手，點擊菜單新建文件或者使用快捷鍵Ctrl + N，這個時候會新建一個Untiled-1的文件，默認爲文本文件，不高亮和提示任何代碼，這個時候咱們能夠經過保存文件來改變文件類型，或者直接告訴Vs Code文件類型，如圖：

　　點擊Plain Text，而後在彈出的輸入框輸入你想要的語言就行了。或者咱們使用快捷鍵，Ctrl + Shift + P，打開命令輸入框，輸入language，如圖：

　　選擇第一個Change Language Mode,也能夠打開這個語言選擇框。

　　這裏首先要說的是VS Code對html的支持，固然Vs Code對html支持是很是好的，上面咱們已經看到了，輸入一個感嘆號，而後按下tab鍵就一會兒完成了html5文檔的基本結構。其實，這是VS Code裏面添加了Emmet snippet expansion，官方文檔地址http://docs.emmet.io/cheat-sheet/，咱們大概來看一下：

　　看到了吧，第一個就是咱們上面使用的，同理若是咱們輸入<a>標籤，咱們只要輸入a，而後按tab鍵就能夠了。這裏就再也不多說了，就留給你們去好好探索了~

　　另外，VS Code也支持Html5和AngularJs的智能提示，能夠說是前端神器啊~~哈哈，目前我知道的也只有VS2015支持AngularJS的智能提示了。 

　　二、文件編碼

　　文件編碼固然是很重要的，有時候咱們要查看和修改文件編碼，在介紹VS Code的時候，已經告訴你們，在哪裏顯示文件的編碼了，下面咱們來講一下如何修改文件編碼，仍是Ctrl + Shift + P打開命令面板，輸入encoding,如圖：

　　選擇之後，會出現以下選項：

　　咱們能夠根據須要選擇，這裏咱們選擇保存的編碼格式，如圖：

 　三、MarkDown

　　還有一個比較讓人喜歡的一點就是VS Code也支持markdown的書寫和預覽，下面咱們看一下：

　　若是要預覽的話，要先保存文件，而後按下快捷鍵Ctrl + Shift + V,就能夠預覽了。如圖：

 　　四、文件的切換

 　　當咱們編寫多個文檔時，常常須要在多個文件直接切換，用鼠標點擊來切換是一個很奢侈的作法，咱們一般都喜歡用快捷鍵。在Vs Code中，咱們能夠用Ctrl + Tab鍵來快速的切換文件，如圖：

　　按住Ctrl鍵不要鬆，不斷的按下Tab鍵來切換選擇文件。固然，這隻適用於比較少的文件時，文件多了，這樣就很差用了。

　　文件多的時候，咱們可使用Ctrl + p快捷鍵，打開和上面同樣的輸入框，不過這個時候咱們能夠輸入內容來搜索文件，而後選擇打開。如圖：

　　

　　五、支持打開一個文件夾

 　 當咱們編輯一個項目中的文件時，同時打開一個文件夾但是很是爽的功能，其餘不少文本編輯器都不具有這樣的特點。

　　看到這裏，如今感受VS Code怎麼樣呢？固然，這只是VS Code的一小部分功能，還有更多的等待你們去發現！等到正式版出來的時候，估計會更加的好~~ 　　

4、總結

 　　因爲篇幅的關係，關於VS Code就先介紹到這裏了，下面來簡單的總結一下Vs Code的有點：

　　一、支持30多種經常使用語言的語法高亮，並對html、js、css、Angular等很好的語法支持，而且還支持MarkDown的預覽！

　　二、體積小，功能強大，固然性能也是很好的，打開超大型的文本文件也不會卡死，你們能夠和其餘的一些文本編輯器對比一下。

　　三、支持命令操做(Ctrl + Shift + P)和鼠標操做，還有大量的快捷鍵，能夠適應各類開發者的操做習慣。

 　  四、支持Git版本控制器，能夠完成建立分支、解決衝突、提交修改等操做；

　　五、強大的搜索功能，而且支持多文件搜索；

　　六、最大的有點，固然是跨平臺、免費;

 

　　微軟這近段時間來不斷開放的姿態，愈來愈讓咱們看到微軟的情懷和將來。有人說 VSC 的推出又多了一個買 Mac 的理由了，不過其實細想，隨着 .Net 的開源，加上免費的 VS Code 鋪路，反而是能讓一大批開發高手從新回到微軟的大環境中，不得不說微軟此次又下了一手好棋啊。

做者： EricHu 
出處：http://www.cnblogs.com/huyong/ 
Email：406590790@qq.com 
QQ交流：406590790 
框架官網：http://www.rdiframework.net/ 
框架官網博客：http://blog.rdiframework.net/ 
框架其餘博客：http://blog.csdn.net/chinahuyong 
               http://www.cnblogs.com/huyong
RDIFramework.NET，基於.NET的快速信息化系統開發、整合框架，給用戶和開發者最佳的.Net框架部署方案。 
關於做者：高級工程師、信息系統項目管理師、DBA。專一於微軟平臺項目架構、管理和企業解決方案，多年項目開發與管理經驗，曾屢次組織並開發多個大型項目，在面向對象、面向服務以及數據庫領域有必定的造詣。現主要從事基於 RDIFramework.NET 框架的技術開發、諮詢工做，主要服務於金融、醫療衛生、鐵路、電信、物流、物聯網、製造、零售等行業。 
若有問題或建議，請多多賜教！ 
本文版權歸做者和CNBLOGS博客共有，歡迎轉載，但未經做者贊成必須保留此段聲明，且在文章頁面明顯位置給出原文鏈接，若有問題，能夠經過郵箱或QQ 聯繫我，很是感謝。