Visual Studio Code 基本介紹

Image Not Showing Possible Reasons

The image file may be corrupted
The server hosting the image is unavailable
The image path is incorrect
The image format is not supported

Learn More →

t7yang

Image Not Showing Possible Reasons

The image file may be corrupted
The server hosting the image is unavailable
The image path is incorrect
The image format is not supported

Learn More →

2018

基本資料

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

快速鍵對應（key map）

外觀總攬（主題、設定等）

應用程式選單
工作區 / 編輯器
- 小地圖
側邊欄
- 檔案總管（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

主題套件推薦：

BONUS

字型

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

Fira Code 取自 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",
}

套件補完

在編輯器之間切換

這個快速鍵不論在何處都可以快速切換到編輯器的群組，譬如從整合終端機或是側邊欄
- 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
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：排版

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

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 等級的體驗，一堆重構神器，用過之後就回不去了。

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

Codelens 程式碼追蹤






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

重新命名符號（Rename）

游標在符號（變數）上 F2
滑鼠游標在符號上右鍵選單

移至定義及預覽定義

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

提示：重構、快速修復

ES2015 重構，類別重構（方法抽出，prototype => class）
模組匯入提示（ES Module - Commonjs Module）
自動匯入（TypeScript）
抽出檔案重構 / 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
快速在檔案總管切換忽略狀態 - ignore "g" it
詳細檢視 Git 紀錄 - Git History
最有名的 Git 套件 - GitLens — Git supercharged

其他

一定要善用命令選取列（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"],
}

記得在 %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]

Syntax	Example	Reference
# Header	Header	基本排版
- Unordered List	Unordered List
1. Ordered List	Ordered List
- [ ] Todo List	Todo List
> Blockquote	Blockquote
Bold font	Bold font
Italics font	Italics font
~~Strikethrough~~	~~Strikethrough~~
19^th^	19^th
H~2~O	H₂O
++Inserted text++	Inserted text
==Marked text==	Marked text
[link text](https:// "title")	Link
![image alt](https:// "title")	Image
`Code`	`Code`	在筆記中貼入程式碼
```javascript var i = 0; ```	`var i = 0;`	在筆記中貼入程式碼
:smile:		Emoji list
{%youtube youtube_id %}	Externals
$L^aT_eX$	L^aT_eX
:::info This is a alert area. :::	This is a alert area.

Visual Studio Code 基本介紹

基本資料

快速鍵對應（key map）

外觀總攬（主題、設定等）

主題

字型

編輯器

內建設定

套件補完

在編輯器之間切換

emmet

排版

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

註解

多重游標操作

內容異動

選取

檔案格式或編碼

IDE 體驗

Codelens 程式碼追蹤

重新命名符號（Rename）

移至定義及預覽定義

提示：重構、快速修復

JS as TS

檔案總管

快速建立檔案 / 資料夾

搜尋

Git

內建設定

Git 套件

其他

整合終端機

終端機設定

快速鍵

延伸套件

檢查 / 格式化

體驗提升

HTML / CSS

JS / TS

Angular

其他