Visual Studio Code預覽版Ver 0.3.0試用體驗

標籤：

　　當你開始閱讀這篇文章時，請先不要把Visual Studio Code和.net、Windows聯想到一起，因為VS Code是一個跨平台，支援30多種語言的開箱代碼編輯器。不管你是.Net、Java、PHP、Python、TypeScript、Objective-C...還是前端開發人員，你都值得擁有。下面，讓我們來看一看Visual Studio Code 這個神器吧~

 一、Visual Studio Code的下載和安裝

　　Visual Studio Code最新版，https://www.visualstudio.com/，檔案不到60M，

點擊右邊的下載，大家根據自己的系統下載對應的版本就好了。下載後，windows雙擊exe檔案會自動安裝，其他系統我想大家都會的。下載安裝完成後，我們開啟Visual Studio Code，點擊help > about,會看到如下視窗：

到這裡，就說明你已經安裝的是最新版本的Visual Studio Code了。

 

 二、Visual Studio Code簡介

 　　安裝完成後，我們看到的Visual Studio Code介面如下，當然不同的系統介面邊框略有不同，基本布局

下面我們來進行一些簡單的設定，下面就拿大家最關心的字型大小設定來說吧，其他的都類似，點擊菜單：

我們會看到如下頁面，VS Code會開啟兩個檔案：

左邊的是預設設定，右邊的是使用者佈建，其他的一些設定都可以在左邊的預設設定裡面找到，我們要修改什麼設定，拷貝到右邊的視窗中修改即可。例如，我們要修改字型大小，修改就好了，注意這是個json檔案。

 

工具列簡介

1、資源管理員

 下面來看一下右邊的工具列，資源管理員就不用多說了很簡單，只是這裡有個功能值得注意一下，

在檔案上面點擊滑鼠右鍵，有個Copy Path，可以複製檔案的實體路徑。當然，你會想為什麼不是開啟檔案位置啊，其實這個功能已經有了，就是Reveal in Explorer.記住啦，不要再無知的吐槽了~

其他的菜單，自己點點就知道了，比較簡單，我就不廢話了。

 

2、搜尋

下面來說說這個搜尋，為什麼要在這個地方加一個搜尋的工具列呢？如果你熟悉Visual Studio的話，你會發現按快速鍵Ctrl + F會出現一個搜尋方塊，

細心的你也許會發現，當你按下Ctrl + Shit + F的時候，會啟用這個工具列的搜尋功能，沒錯，這個功能就是類似Visual Studio中的全域搜尋功能，

看到了吧，這裡的搜尋結果，在1.html中和2.html中都搜尋出來了"部落格園"這個關鍵字。看到這裡，已經心動了吧~~

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

 

3、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的都看的懂的！

 

4、調試

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

 

 三、Visual Studio Code上手體驗

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

這裡大概說的是對CSS, HTML, JavaScript, JSON, Less, Sass幾種語言有智能提示，其他的語言都是文法高亮和重構。就是說你寫C#、Java等一些代碼都是沒有智能提示的，但是都會有文法高亮。這些代碼查看，大家可以開啟一些相關的代碼檔案看看，我就不一一示範了。

 

1、檔案類型

下面我們來看看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的只能提示了。

 

2、檔案編碼

　　檔案編碼當然是很重要的，有時候我們要查看和修改檔案編碼，在介紹VS Code的時候，已經告訴大家，在哪裡顯示檔案的編碼了，下面我們來說一下如何修改檔案編碼，還是Ctrl + Shift + P開啟命令選擇區，輸入encoding,

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

我們可以根據需要選擇，這裡我們選擇儲存的編碼格式，

 

3、MarkDown

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

如果要預覽的話，要先儲存檔案，然後按下快速鍵Ctrl + Shift + V,就可以預覽了。

 

 

4、檔案的切換

 　　當我們編寫多個文檔時，經常需要在多個檔案直接切換，用滑鼠點擊來切換是一個很奢侈的做法，我們通常都喜歡用快速鍵。在Vs Code中，我們可以用Ctrl + Tab鍵來快速的切換檔案，

按住Ctrl鍵不要松，不斷的按下Tab鍵來切換選擇檔案。當然，這隻適用於比較少的檔案時，檔案多了，這樣就不好用了。

檔案多的時候，我們可以使用Ctrl + p快速鍵，開啟和上面一樣的輸入框，不過這個時候我們可以輸入內容來搜尋檔案，然後選擇開啟。

看到這裡，現在感覺VS Code怎麼樣呢？當然，這隻是VS Code的一小部分功能，還有更多的等待大家去發現！等到正式版出來的時候，估計會更加的好~~

 

 四、總結

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

　　1、支援30多種常用語言的文法高亮，並對html、js、css、Angular等很好的文法支援，並且還支援MarkDown的預覽！

　　2、體積小，功能強大，當然效能也是很好的，開啟超大型的文字檔也不會卡死，大家可以和其他的一些文字編輯器對比一下。

　　3、支援命令操作(Ctrl + Shift + P)和滑鼠操作，還有大量的快速鍵，可以適應各種開發人員的操作習慣。

 　  4、支援Git版本控制器，可以完成建立分支、解決衝突、提交修改等操作；

　　5、強大的搜尋功能，並且支援多檔案搜尋；

　　6、最大的有點，當然是跨平台、免費;

 

 雲霏霏

QQ交流群：243633526

 部落格地址：http://www.cnblogs.com/yunfeifei/

 聲明：本部落格原創文字只代表本人工作中在某一時間內總結的觀點或結論，與本人所在單位沒有直接利益關係。非商業，未授權，貼子請以現狀保留，轉載時必須保留此段聲明，且在文章頁面明顯位置給出原文串連。

如果大家感覺我的博文對大家有協助，請推薦支援一把，給我寫作的動力。

 

Visual Studio Code預覽版Ver 0.3.0試用體驗