---
# System prepended metadata

title: Visual Studio Code編輯器簡介

---

# Visual Studio Code編輯器簡介
>使用一個好的程式編輯器，可以提升寫程式的效率。
>

因為開始接觸六角學院的課程，知道業界幾個編輯器Sublime、Visual Studio Code、Atom。每個人的偏好不同，個人比較喜歡使用VsCode。安裝輕量卻功能齊全，一堆人使用，人多好辦事，開源外掛的程式非常多，非常感謝許多無私的開發者。



## 本篇Outline
![](https://i.imgur.com/STfUwHr.png)

## 下載
打開Chrome瀏覽器打入vscode搜尋，搜尋結果的開頭第一個基本上就是我們要的。他有三種作業系統的類型Windows、Linux、MAC版本。使用者可以根據適合自己作業系統的版本來選擇。我選擇適合我的Windows版本下載。

![](https://i.imgur.com/CiWjuRQ.png)

## 安裝
直接點選執行，下一步一下步，就結束安裝。

## 新增檔案
安裝好VsCode，直接點new就可以新增或是左上角找new file新增檔案index.html。
### 關於index.html
撰寫網頁時，index.html是預設主頁，我把他當作大門來看待。
* 有大門保護，家裡不會被看光光 -- 資料夾不會被外漏
* 有預設主頁，網路伺服器才確定顯示哪個是主頁。

#### 參考資料：
[VS Code 基本安裝與設置教學](https://youtu.be/ivgCJ1XmNMM)

## 設定喜好的編輯器版面主題顏色
可以從File->Preference->Theme->Color Theme可以找的到設定。
![](https://i.imgur.com/ruqRsHb.jpg)

上面為亮色系，下面為暗色系。我愛暗色系。
![](https://i.imgur.com/0BBpVCC.jpg)

## 對應熱鍵
官方也有提供常用快速鍵編輯介面，可以使用快捷鍵 Ctrl + K, Ctrl + S 開啟編輯介面，然後點選左側的筆做修改。更多資訊請參考此[官方連結](https://code.visualstudio.com/docs/getstarted/keybindings)。
[官方 Visual Studio Code 快速鍵一覽表](https://code.visualstudio.com/shortcuts/keyboard-shortcuts-windows.pdf)




## 延伸閱讀相關資訊

[20 個 VSCode 開發小技巧，讓你 Coding 三倍速！](https://www.youtube.com/live/LOjUnXk_TNU?feature=share)
[VsCode快捷鍵使用方式](https://blog.poychang.net/vscode-shortcuts/)
