Visual Studio Code 基本介紹
===
:pencil: t7yang :date: 2018

# 基本資料

- Visual Studio Code ≠ Visual Studio
- 免費、開放原始碼
- 微軟力作
- 每個月更新一次、Insiders 版本平日每日更新
- 編輯器的好處 + IDE 的體驗
- Language Server
- Debugger
- Git 整合
- 套件 * N
- 社群

# 快速鍵對應（key map）
- [Sublime Text Keymap and Settings Importer](https://marketplace.visualstudio.com/items?itemName=ms-vscode.sublime-keybindings)
- [Atom Keymap](https://marketplace.visualstudio.com/items?itemName=ms-vscode.atom-keybindings)

# 外觀總攬（主題、設定等）
- 應用程式選單
- 工作區 / 編輯器
- 小地圖
- 側邊欄
- 檔案總管（`ctrl + shift + e`）
- 搜尋（`ctrl + shift + f`）
- Git（`ctrl + shift + g`）
- 套件（`ctrl + shift + x`）
- 偵錯（`ctrl + shift + d`）
- 狀態列
- 通知
- 命令選擇列（`ctrl + shift + p` / `F1`）
- 整合終端機（`ctrl + ‵`）
- 介面語言（`F1, display language`）

# 主題
一個好的主題主題看起來賞心悅目，也有它的實用角度（何者在投影下顯示得更清楚）。

內建推薦：
- dark+ default
- abyss

主題套件推薦：
- one dark 系列
- [Atom One Dark Theme](https://marketplace.visualstudio.com/items?itemName=akamud.vscode-theme-onedark)
- [Stoic One Dark](https://marketplace.visualstudio.com/items?itemName=cumbreras.stoic-one-dark)
- [One Dark Space Gray Theme](https://marketplace.visualstudio.com/items?itemName=fivepointseven.vscode-theme-onedark-spacegray)
- material 系列
- [Material Theme](https://marketplace.visualstudio.com/items?itemName=Equinusocio.vsc-material-theme)
- 天天換系列
- [Dobri Next - Themes and Icons](https://marketplace.visualstudio.com/items?itemName=sldobri.bunker)

BONUS
- [Hyper Term Theme](https://marketplace.visualstudio.com/items?itemName=hsnazar.hyper-term-theme)
- [vscodethemes](https://vscodethemes.com)
- [Material Icon Theme]()

# 字型
字型首要考量的是易於辨識、當然如果有一些特殊才藝會更好。

[Fira Code](https://github.com/tonsky/FiraCode) 取自 Firefox OS 字型經過改造，更適合用於程式設計開發，具有好辨識、等寬、連字等效果。

VSCode 非常聰明，它會自動 fallback 無法顯示的字型，中文的部分可以設定 fallback。

{
  "editor.fontFamily": "Fira Code, '思源黑體 Medium'",
  "editor.fontLigatures": true,
  "editor.fontSize": 14,
  "editor.lineHeight": 30,
}

# 編輯器
編輯器（Editor）是 VSCode 裡面最要內容區，也是寫程式的地方。天天面對的地方一定要調好調順。

## 內建設定

{
  // 效能考量
  "editor.minimap.renderCharacters": false,
  // 使用體驗
  "editor.smoothScrolling": true,
  "editor.renderIndentGuides": false,
  "editor.renderWhitespace": "none",
  "editor.showFoldingControls": "always",
  "editor.snippetSuggestions": "top",
  // 規格
  "editor.tabSize": 2,
  "editor.wordWrap": "on",
  "files.eol": "\n",
  // BONUS
  "breadcrumbs.enabled": true,
  "window.titleBarStyle": "custom",
}

## 套件補完
- [Bracket Pair Colorizer](https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer)
- [indent-rainbow](https://marketplace.visualstudio.com/items?itemName=oderwat.indent-rainbow)

## 在編輯器之間切換
- 這個快速鍵不論在何處都可以快速切換到編輯器的群組，譬如從整合終端機或是側邊欄
- `ctrl + [1-9]`
- 在群組內快速切換分頁
- `alt + [1-9]`
- `ctrl + tab`
- 控制分頁在群組之間移動
- `alt + ←→`

# emmet
emmet 已經成為 HTML 程式設計的一個基本工具和技能。

{
  "emmet.showExpandedAbbreviation": "inMarkupAndStylesheetFilesOnly",
  "emmet.includeLanguages": {
    "javascript": "javascriptreact",
    "vue-html": "html"
  },
  "emmet.triggerExpansionOnTab": true,
}

# 排版
排版工具可以讓程式碼的編排更一致，減少人為排版的工作。

- JavaScript, Markdown 等多種語言的排版
- [prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)
- HTML （內建）

{
  // 自動整理匯入，移除沒使用的匯入
  "editor.codeActionsOnSave": {
    "source.organizeImports": true
  },
  "editor.formatOnSave": true,
  // HTML 排版
  "html.format.maxPreserveNewLines": 2,
  "html.format.wrapAttributes": "force-aligned",
  // prettier 套件排版組態（最後套用）
  "prettier.printWidth": 100,
  "prettier.singleQuote": true,
  "prettier.trailingComma": "all",
}

BONUS 快速鍵
- `alt + shift + o`：移除未使用的匯入
- `alt + shift + f`：排版

# 常用快速操作方式（快速鍵）

:::info
VSCode 提供互動式試用體驗（`alt + h, i, enter`）。
:::

## 註解
- 單列註解 `ctrl + /`
- 多列註解 `alt + shift + a`

## 多重游標操作
- 上下增加多重游標
- `ctrl + alt ↑↓`
- `alt + click`
- 多重游標方塊選取
- `alt + shift + drag`

## 內容異動
- 往下複製目前列
- `alt + shift + ↑↓`
- 選取，`ctrl + drag`
- 刪除此列
- `ctrl + shift + k`
- `alt + ↑↓`

## 選取
- 選取下一個
- `ctrl + d`
- 選取所有
- `ctrl + F2`
- 擴張選取（括號的內容）
- `shift + alt + →`

## 檔案格式或編碼
- 切換檔案格式
- `ctrl + K, m`

# IDE 體驗
VSCode 可以有近乎 IDE 等級的體驗，一堆==重構神器==，用過之後就回不去了。

:::info
VSCode 提供互動式試用體驗（`alt + h, i, enter`）。
:::

## Codelens 程式碼追蹤

{
  "editor.codeLens": true, // 預設 true
  "javascript.referencesCodeLens.enabled": true,
  "typescript.implementationsCodeLens.enabled": true,
  "typescript.referencesCodeLens.enabled": true,
}

:::info
- [Toggle - 快速切換設定](https://marketplace.visualstudio.com/items?itemName=rebornix.toggle)
- [TSLens - 更多的 Codelens](https://marketplace.visualstudio.com/items?itemName=MaxGotovkin.tslens)
:::

## 重新命名符號（Rename）
- 游標在符號（變數）上 `F2`
- 滑鼠游標在符號上右鍵選單

## 移至定義及預覽定義
- 移至定義
- `ctrl + click`
- `F12`
- 預覽定義
- `ctrl + hover`
- `alt + F12`

## 提示：重構、快速修復
- ES2015 重構，類別重構（方法抽出，prototype => class）
- 模組匯入提示（ES Module - Commonjs Module）
- 自動匯入（TypeScript）
- 抽出檔案重構 / [Move TS](https://marketplace.visualstudio.com/items?itemName=stringham.move-ts)
- promise vs async await

## JS as TS
轉寫 JS 卻可以得到 TS 的 typing 和 type checking 體驗。

// @ts-check
import webpack from 'webpack';

/* @type webpack.Configuration */
const config = {
  /* type checking and intellinsense here */
}

# 檔案總管

## 快速建立檔案 / 資料夾
- `ctrl + shift + e` 跳到檔案總管
- 方向鍵上下左快速移動
- 利用自動快速鍵建立檔案或資料夾
- 建議 `ctrl + alt + a` 建立檔案
- 建議 `ctrl + shift + alt + a` 建立資料夾
- 建立檔案時可以直接輸入巢狀路徑

# 搜尋

- 搜尋列
- 移至 `ctrl + f`
- 關閉 `esc`
- 全選搜尋 `alt + enter`
- 搜尋側邊欄
- 主要是針對資料夾搜尋

# Git
VSCode 整合了圖形化介面的 Git ，讓開發者幾乎可以在不需要用命令列的方式完成大部分 Git 操作。

## 內建設定

{
  "git.autofetch": true,
  "git.autorefresh": false, // 減少頻繁讀取 git 狀態，自訂快速鍵
  "git.path": "/path/to/git/exe",
}

## Git 套件
- 自動產生 `.gitignore` - [.gitignore Generator](https://marketplace.visualstudio.com/items?itemName=piotrpalarz.vscode-gitignore-generator)
- 快速在檔案總管切換忽略狀態 - [ignore "g" it](https://marketplace.visualstudio.com/items?itemName=Andreabbondanza.ignoregit)
- 詳細檢視 Git 紀錄 - [Git History](https://marketplace.visualstudio.com/items?itemName=donjayamanne.githistory)
- 最有名的 Git 套件 - [GitLens — Git supercharged](https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens)

## 其他
- 一定要善用命令選取列（`ctrl + shift + p / F1`），幾乎所有 Git 命令都可以透過，包含像 `git commit --amend`。
- 已經內建 Git 衝突 Codelens 輕鬆點選就能決定採用何者。

# 整合終端機
VSCode 整合了終端機，不需要離開 VSCode 的情況下就可以下指令。整合終端機還是自訂要使用哪個 shell ，一切都這麼美好。

## 終端機設定
以 Windows 為例，改成 bash

{
  "terminal.external.windowsExec": "DRIVE:\\path\\to\\bash.exe",
  "terminal.integrated.shell.windows": "DRIVE:\\path\\to\\bash.exe",
  "terminal.integrated.shellArgs.windows": ["-l"],
}

:::info
- 記得在 `%HOME%` 設定好 .bashrc 和 .bash_profile
- 可以讓 .bash_profile 自動讀取 .bashrc 不用兩邊設定

if [ -f ~/.bashrc ]; then
  source ~/.bashrc
fi

:::

## 快速鍵
終端機是開發時非常容易切換焦點的地方，熟記快速鍵是必要的技能。

- 切換整合是終端機 - `ctrl + ‵`
- 建立新的整合終端機 - `ctrl + shift + ‵`
- 建立新的終端機 - `ctrl + shift + c`
- 切割終端機 - `ctrl + \`
- 切換整合終端機聚焦 - `alt + ↑↓←→`

建議自訂聚焦終端機快速鍵，這樣可以跟編輯器來回切換 `ctrl [1-9]`
- 聚焦終端機 - `alt + ‵`

# 延伸套件

## 檢查 / 格式化
- [EditorConfig for VS Code](https://marketplace.visualstudio.com/items?itemName=EditorConfig.EditorConfig)
- [Prettier - Code formatter](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)
## 體驗提升
- [Auto Add Brackets in String Interpolation](https://marketplace.visualstudio.com/items?itemName=aliariff.auto-add-brackets)
- [Bracket Pair Colorizer](https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer)
- [indent-rainbow](https://marketplace.visualstudio.com/items?itemName=oderwat.indent-rainbow)
- [bracket-padder](https://marketplace.visualstudio.com/items?itemName=viablelab.bracket-padder)
- [change-case](https://marketplace.visualstudio.com/items?itemName=wmaurer.change-case)
## HTML / CSS
- [Auto Rename Tag](https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag)
- [colorize](https://marketplace.visualstudio.com/items?itemName=kamikillerto.vscode-colorize)
- [HTML CSS Support](https://marketplace.visualstudio.com/items?itemName=ecmel.vscode-html-css)
## JS / TS
- [Hyper JavaScript Snippets](https://marketplace.visualstudio.com/items?itemName=t7yang.hyper-javascript-snippets)
- [Path Intellisense](https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense)
- [Node.js Module Intellisense](https://marketplace.visualstudio.com/items?itemName=leizongmin.node-module-intellisense)
- [Quokka.js](https://marketplace.visualstudio.com/items?itemName=WallabyJs.quokka-vscode)
- [Sort JSON objects](https://marketplace.visualstudio.com/items?itemName=richie5um2.vscode-sort-json)
## Angular
- [Angular Language Service](https://marketplace.visualstudio.com/items?itemName=Angular.ng-template)
- [Angular Schematics](https://marketplace.visualstudio.com/items?itemName=cyrilletuzi.angular-schematics)
- [Angular Files](https://marketplace.visualstudio.com/items?itemName=alexiv.vscode-angular2-files)
## 其他
- [Markdown All in One](https://marketplace.visualstudio.com/items?itemName=yzhang.markdown-all-in-one)
- [Projects+](https://marketplace.visualstudio.com/items?itemName=fabiospampinato.vscode-projects-plus)
- [Syncing](https://marketplace.visualstudio.com/items?itemName=nonoroazoro.syncing)