vs code 簡易使用教程（前端）
阿新 • • 發佈：2018-12-12
一、vs code 常用外掛
安裝方法：點選vscode左側擴充套件，搜尋外掛，點選安裝
- Path Intellisense 可以查詢檔案路徑
- Auto Rename Tag 改變開始標籤自動修改結尾標籤
- Document This js 的註釋模板(Ctrl+Alt+D and again Ctrl+Alt+D)
- beautify 格式化程式碼的工具
- AutoFileName 檔案路徑自動補全外掛
- ESLint 新增對 ESLint 的支援
- Project Manager 專案管理器外掛，可以在你的編輯器中快速切換專案
- Settings Sync 設定同步外掛
- EditorConfig 程式碼格式化外掛
- Align 使程式碼根據 =，: 等對齊
- npm Intellisense 在 import 匯入語句中自動完成npm 模組。
- Vetur vue開發者才需安裝，包含語法高亮、程式碼片段、Emmet、程式碼格式化、錯誤檢測功能
- Git History Git 歷史記錄外掛
-
Git Easy 這個外掛可以匯入下面的 Git 命令，以便您可以在命令面板中使用。和 Atom 中實用非常相似。
- Git Easy: Init
- Git Easy: Add Origin
- Git Easy: Add Remote
- Git Easy: Add File/Directory
- Git Easy: Add All Modified
- Git Easy: Commit
- Git Easy: Pull Current Branch from Origin
- Git Easy: Push Current Branch to Origin
- Git Easy: Push Current Branch (to any remote)
- Git Easy: Status
- Git Easy: Create New Branch
- Git Easy: Change/Checkout Existing Branch
- Git Easy: Log All
- Git Easy: Log Current File
二、vs code 常用快捷
- 命令面板：F1（命令面板可以執行相應外掛）
- 重新命名：F2
- 跳轉定義（切出新編輯器）： Ctrl + Alt + click
- 跳轉定義（切出新tab）：F12 或 Ctrl + 左鍵點選檔案
- 快速定位檔案 ctrl + p
- 分割編輯視窗 ctrl+ \
- 快速調出終端 Ctrl+`
- ctrl + d 選擇同樣元素
- shift + tab 移動程式碼
三、Emmet
輸入 div 回車
<div></div>
<!-- div.className -->
<div class="className"></div>
輸入 div#IDname 回車
<div id="IDname"></div>
輸入ul>li*2 回車
<ul>
<li></li>
<li></li>
</ul>
四、snippets 定義程式碼片段，便於快速複用
依次點選：左下角設定圖示=》使用者程式碼片段=》在頂部彈出框中選擇新建程式碼片段，起個名字儲存後，生成的檔案註釋中有下面一段，把註釋去掉，修改對應的內容即可，各項內容含義看下面註釋。
"Print to console": { //是智慧提示顯示的
"scope": "javascript,typescript",
"prefix": "log", //使用者輸入此處字元進行提示
"body": [//程式碼片段寫在此處
"console.log('$1');", // $1代表游標位置
"$2"
],
"description": "描述"
}
這樣定義後，下次輸入log，就會顯示提示，在提示中選擇我們定義的那項，就會將程式碼片段插入，游標自定義到相應的$1處