# VScode
VScode 終端機技巧open in new window
重點
ctrl G 輸入數字可以快速前往某一行程式碼
對著變數用F2可以將該檔案變數全部編輯!
VScode新增檔案時名稱帶入階層會自動創建資料夾 a/b.html 會自動創建 a資料夾和 b.html
# VScode 快捷鍵
- `ctrl c` `ctrl v`
- `ctrl z` `ctrl y`
- `ctrl f`
- `ctrl s`
1
2
3
4
2
3
4
- `ctrl w` 關閉分頁
- `ctrl n` 開分頁
1
2
2
- 挪上/下
- `Alt + ↑` `Alt + ↓`
- 快速複製 (可多選)
- `Alt + Shift + ↓`
- 註解或取消註解
- `Ctrl + /`
- 插件 自動排版code
- `Alt + Shift + F`
- 向下選取相同字
- `Ctrl + D `
- 選取的文字跳到該上層定義
- `F12`
- 刪除整行code
- `Ctrl + Shift + K`
- 跳到頁首 頁末
- `Ctrl + Home` `Ctrl + End`
- 跳到指定行數
- `Ctrl + G`
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
. `Ctrl + R`：切換工作區
. `Ctrl + P`：開啟選單輸入檔案名稱直接開啟檔案
. `Alt + Shift + 滑鼠左鍵`：直欄選取
1
2
3
2
3
# VScode 設定
檔案 → 喜好設定 → 設定 → 文字編輯器 → 字型 → Font Size
檔案 → 喜好設定 → 設定 → 工作台 → 外觀 → Tree:Indent
1
2
3
4
5
2
3
4
5
# 好用套件
# Watch Sass
Watch Sassopen in new window ### Bracket Pair Colorizer 彩虹括號 方便辨認 
### cdnjs F1>>可以輸入不同插件>>直接插入 html 
### Code Spell Checker 自動辨識錯字 
### indent-rainbow 彩虹縮排 方便辨認 
### Vetur 開發 Vue 專有名詞會變色 
# 內建 Emmet
VScode 內建 Emmet 語法可以快速生成 html 預設值
- 新建立一個 html
- 打驚嘆號
!馬上按Enter
其他語法可以參考: