Visual Studio Code (VSCode)使用指南 (1)

Visual Studio Code (簡稱VS Code) 是微軟開發的跨平台且開放原始碼的編輯器。

內建了Git、Emmet 等功能,當然也有離不開的 IntelliSense,本文會為各位做一些簡單的介紹,讓你們更快速的熟悉這套工具。

一、安裝

官方網站 : https://code.visualstudio.com/

首先點選上面的網址,選擇與你的電腦對應的作業系統進行安裝。

Stable 是穩定版本 Insiders 是測試版本

安裝過程就不再贅述,依照指示安裝即可,Windows 系統的在安裝過程中會出現
將[以Code 開啟]動作加入Windows檔案總管檔案操作功能表中
將[以Code 開啟]動作加入Windows檔案總管目錄操作功能表中


以上兩個選項建議可以勾選,右鍵選單可以直接開啟VSCode非常方便。

完成安裝後開啟VSCode

安裝完成後的語言可能預設為英文,喜歡中文的人莫慌莫急莫害怕,接下來會教你們如何切換語系。
前面提到,VSCode是開源的專案,所以有非常多的擴充功能(Extension) 可以使用。

安裝語言擴充功能(Extension)

點選左側選單欄,尋找Extensions頁籤,在搜尋框中輸入Chinese,尋找中文(繁體) 點選安裝。

完成後重新啟動VSCode,就完成語系的切換。

二、介面

第二節介紹常用的三大區塊,分別是左側的選單區塊和上方的檔案頁籤區塊還有工作區塊。

選單區塊

  • 檔案總管(Explorer)
  • 搜尋(Search)
  • 原始檔控制(Source Control)
  • 偵錯(Debug)
  • 擴充功能(Extensions)

檔案頁籤


如同Chrome的分頁功能,每一個獨立開啟的檔案會是一個分頁,如果有變更尚未儲存的狀況,分頁上會有一個小圓點提示,可以一目瞭然理解檔案的儲存狀況,點選分頁右鍵也有許多的小功能可以使用。

工作區域

這邊就是各位主要的編輯區域,在撰寫時會有IntelliSense來讓你的效率提高,關於IntelliSense在官方網站的原文如下

Go beyond syntax highlighting and autocomplete with IntelliSense, which provides smart completions based on variable types, function definitions, and imported modules.

Web開發時搭配內建的Emmet,一行變十行讓你早下班!
關於Emmet的使用說明可以參考 https://docs.emmet.io/

基本的介紹到此,後續我們會聊聊擴充功能還有常用的快捷鍵。