【工具介紹】VS code _ 引言

Visual Studio Code（VS Code）是一款由微軟開發且開源的文字編輯器

不同於一般編輯器的是VS Code具有debug的功能，且結合了GIT，讓他在功能上優於其他的編輯器，但卻又不至於到IDE那般肥大

下面我們就來是初步了解一下VS Code

首先，這是面板的配置圖

介面功能劃分地滿清楚的，預設佈景主題是大家習慣的灰黑色，想試試看其他主題的話可以到工具列切換，或是在套件下載區下載新的主題

最左邊是使用圖示切換各大功能的View bar，如果有新的變動，比如目前所在資料夾有檔案修改未儲存、Git有新修改、安裝的套件有新版本，也會在圖示上出現提示

如果想要增加面編輯區的面積，可以使用以下快速鍵改變版面空間

• Crrl + B 開關Side bar
• Alt 開關工具列
• Ctrl + J 開關Panel
• F11 全螢幕模式
• Ctrl + K  Z 進入無干擾模式，官方稱Zen(禪) mode，只留下編輯區，讓使用者專心在編輯內容上
• Ctrl + \ 可分割編輯區，同時編輯多個檔案

VS code的幾大特色

-擴充套件

在VS Code的套件market中提供了許多的套件可下載，包括佈景主題、Debug工具、其他語言的Intellisense...等等。

-IntelliSense

智能偵測指的是程式碼自動完成、提供參數資訊、成員列表的通稱

也就是對目前輸入的內容提供可能的結果選項和說明。

※VS Code 預設只對JavaScript, TypeScript, JSON, HTML, CSS, Less,Sass提供智能偵測，若想要其他語言也有智能偵測功能，只要到套件區下載對應的套件即可

-Debug

VScode 有內建Node.js的debugger，所以可以debug Javascript和typescript，若要debug其他語言，只要到套件區下載對應的套件即可。

下面簡單示範debug javascript

-首先要安裝node.js的執行環境

裝完後寫個簡單的javascript程式並設定中斷點(點擊行數左邊的區塊

然後按下F5或Debug view上面的綠色箭頭來測試

可以看到變數的內容以及右上方的debug工具，跟一般的IDE用法差不多

-版本控制

VS Code同時也整合了Git的功能，讓使用者可以直接在裡面用圖形介面操作Git

當然首先需要安裝Git

然後在Git的View中會看到

點下去就可以在目前資料夾初始化git， 

也就是git init

然後就可以在Side bar 看到還沒commit的檔案，且左邊的icon會提示有改變且還沒commit的檔案數量

點開左上角的...圖示可以看到一些常用的git操作

其他的操作可以在Ctrl+P的命令中查詢

如果有改變，在檔案上點兩下可以跟比對之前commit的內容

-最後列出一些好用的快速鍵

• Alt + click : 同時多點編輯
• ctrl + l : 選取所有相同字段
• shift + alt +用滑鼠選一個範圍　: Box Selection 範圍選取
• ctrl + Tab 　或是　alt+左右: 在目前已開啟的檔案之間切換(Ctrl 壓著　Tab點放)

小小結論一下：

俗話說:工欲善其事，必先利其器。一款好的工具應該具備做一件事所需要的所有功能，VS Code就是這樣的存在。整合了其他編輯器沒有的功能，寫程式需要的動作大概都可以在裡面完成，不用再跳出去。加上套件的機制，擴充性非常大。應該是目前最推的一款編輯器了。

參考資料:

1. https://zh.wikipedia.org/wiki/Visual_Studio_Code (VS Code Wikipedia)
2. https://code.visualstudio.com/ (VS Code官網)
3. https://msdn.microsoft.com/zh-tw/library/hcw1s69b.aspx (IntelliSense)