VSCode 的奇幻旅程
前言
「工欲善其事，必先利其器」，通常看到這個開頭，就知道今天要來介紹工具。在寫程式時，大家通常習慣的 Editor 是哪些呢? Vim、Emacs、Atom、Sublime、VSCode、記事本。而上述的 Editor 中，最廣為人知的就是被譽為「編輯器之神」的 Vim 和被譽為「神之編輯器」的 Emacs。由於這兩款 Editor 不同的特色與本質，形成了各自的派系並且相互歧視，因此還引發了 Editor 界的一場聖戰「Editor War」。
回到正題，這次主題的 VSCode 相較與前面兩款成神的 Editor 來講只能算是新生兒而已。但對筆者來說，選擇使用起來順手、舒服的 Editor 較為重要，接下來讓筆者稍微介紹一下這次的主角 VSCode：
- 基於 Electron 開發 註1
- 原始碼在 GitHub 上開源，並採用 MIT 授權條款
- Windows、Linux 和 macOS 等作業系統皆有支援
註1：Electron 是 GitHub 開發的一個開源框架。開頭提到的 Atom 也是基於這個框架開發的。
安裝
這邊可以直接到 VSCode 的官方網站來直接下載，或是透過以下方式安裝：
MacOS
$ brew cask install visual-studio-code
Linux
Ubuntu / Debian
- 先到 VSCode 的網站
- 下載
.deb，並透過 apt 安裝
$ sudo apt install ./<file>.deb
RHEL / Fedora / CentOS
- dnf
$ sudo dnf check-update
$ sudo dnf install code
- yum
$ yum check-update
$ sudo yum install code
若使用的工具不在上述或是安裝遇到問題，可以參考官方這份文件
執行
安裝後，可以直接使用 Command Line 開啟：
$ code <path>
像筆者使用 MacOS，直接官網下載的檔案安裝後，在 Terminal 發現 code 不存在的話，請跟著以下步驟：
- 按下 F1 或是
cmd + shift + P - 輸入
Shell Command: Install 'code' command in PATH並按下 Enter
完成以上兩個步驟後，重開 Terminal 就可以使用 code 來開啟資料夾或檔案了
接著開啟 VSCode 後應該就會看到下面這個畫面： 
接著就來看看 VSCode 一些功能：
內建 Terminal
- 快捷鍵：
cmd + ｀
按下快捷鍵後，下方就可以看到 Terminal 的畫面，如下圖所示：
而 VSCode 預設的 Terminal 字型跟 Editor: Font Family 一樣，也就是 Menlo, Monaco, 'Courier New', monospace。如果想要更換字體，可以在設定中加入 "terminal.integrated.fontFamily": "<字型>"
設定
- 快捷鍵：
cmd + ,
按下快捷鍵後，就會看到像上方圖片一樣的設定檔畫面，而更改設定的方式有兩種
- 如上圖，可以直接點選更改設定值
- 點選圖片中，紅色框框的按鈕，會開啟一個
settings.json的檔案，在上方的內建 Terminal部分所提到的"terminal.integrated.fontFamily": "<字型>"，也是直接加到這檔案內即可生效
而眼尖的讀者應該也發現在設定的畫面中，有區分使用者與工作區兩種，接下來就談談這兩種的區別吧！
使用者
這邊的使用者，是指當前登入該台電腦的使用者，所以只要是同一個使用者，無論開啟任何資料夾或檔案，都可以使用到一樣的設定，而各個作業系統的 settings.json 檔案路徑如下：
- Windows：
%APPDATA%\Code\User\settings.json - MacOS：
$HOME/Library/Application Support/Code/User/settings.json - Linux：
$HOME/.config/Code/User/settings.json
工作區
而這邊的工作區，是指當前開啟的資料夾，更改這邊的設定後會在資料夾的目錄下產生一個 .vscode 的資料夾，裡面存著 settings.json 的檔案。如果是專案上想要要有些共通的設定的話，就可以更改這邊的設定達到一致性
在這邊要注意的是，工作區的設定優於使用者設定，所以當使用 VSCode 的時候，發現跟原本設定怎麼有些出入時，就先檢查一下工作區的設定吧。
快捷鍵
介紹工具怎麼不介紹快捷鍵呢，好好使用快捷鍵可以達到事半功倍呢，接下來讓筆者一一介紹一些筆者常用的快捷鍵：
開啟快捷鍵設定的畫面
- 快捷鍵：
cmd + K+cmd + S - 更改快捷鍵的方式：
- 點選要更改快捷鍵的項目
- 點選項目前方的筆，或是按下快捷鍵
cmd + K+cmd + K
- 設定檔路徑：
- Windows：
%APPDATA%\Code\User\keybindings.json - MacOS：
$HOME/Library/Application Support/Code/User/keybindings.json - Linux：
$HOME/.config/Code/User/keybindings.json
- Windows：
將整行向上(下)複製
- 快捷鍵：
- 向上複製：
alt(option) + shift + up - 向下複製：
alt(option) + shift + down
- 向上複製：
有時候遇到一樣的東西要寫很多行，還在使用 複製 + Enter + 貼上嗎？不如來試試看這個快捷鍵，這邊筆者有更改過快捷鍵，只要按下 cmd + up 或是 cmd + down 就可以快速地向上或向下複製一樣的東西了，如果要複製多行的話，把要複製的那幾行選取起來，再按下快捷鍵即可
更改當前檔案的 language mode
- 快捷鍵：
cmd + K+M
開啟 Markdown 的預覽畫面
- 快捷鍵：
cmd + K+V
快速選取「下一個」與選取項目相同的項目
- 快速鍵：
cmd + D - 使用方式： 選取文字後按下快捷鍵
- 示意圖：
- 點選前：
- 點選後：
- 點選前：
快速選取「所有」與選取項目相同的項目
- 快速鍵：
cmd + L - 使用方式： 選取文字後按下快捷鍵
快速開啟目標檔案
- 快速鍵：
cmd + P - 使用方式： 按下快捷鍵後，輸入要開啟的
檔案名稱或是路經 + 檔案名稱後，按下 Enter 即可開啟
到達指定行數
- 快速鍵：
control + G - 使用方式： 按下快捷鍵後，輸入要到達的行數並按下 Enter，即可到達該行數
註解
- 快速鍵：
cmd + /
以上就是筆者日常常用的快捷鍵，如果有其他需求，不如先找找快捷鍵的設定裡面，有沒有各位需要的快捷鍵功能喔
套件 Extension
在 VSCode 裡面按下 cmd + shift + Ｘ 或是前往 VSCode Marketplace 都可以來尋找並安裝所需要的套件。如果是初次使用 VSCode 或是不知道該裝什麼套件的話，可以在 Extension 搜尋的地方輸入 Show Recommended Extension，就會列出 VSCode 建議安裝的套件，不過這邊還是要依照每個人使用需求去安裝。
如果是其他 Editor 使用習慣的使用者， VSCode 也有對應的快捷鍵可以安裝，只要按下 cmd + K + cmd + M ，就會列出其他 Editor 快捷鍵的套件以供安裝，以下推薦幾個筆者使用的套件：
結語
我們 VSCode 的啟航就到這了，大家或多或少對 VSCode 有進一步的認識 吧（？
透過這次的介紹，希望可以讓各位將 VSCode 打造成更順手的 Editor，而下一次將帶領大家探索 Extension 新大陸，並試著寫出屬於自己的套件。(ง๑ •̀_•́)ง