相關文檔

• 官方文檔（英文版）：Documentation for Visual Studio Code

下載安裝

• https://code.visualstudio.com/Download

簡介

• VScode是微軟推出的一款輕量級的編輯器,采用了和VS相同的UI界面。
• 左側布局：是用於展示所要編輯的所有文件和文件夾的文件管理器，依次是資源管理器，搜索，GIT，調試，插件。
• 右側布局：是打開文件的編輯區域，最多可同時打開三個編輯區域到側邊。
• 底欄布局：依次是Git Branch，error&warning，編碼格式等。

常用插件

• HTML Snippets：超級使用且初級的H5代碼片段以及提示
• HTML CSS Support: css自動補齊
• VScode-icons：美化VSCode的界面，在文件名前面顯示小圖標，安裝後每次打開自動啟用。
• View InBrowser：默認瀏覽器查看HTML文件（快捷鍵Ctrl+F1）
• markdownlint：Markdown格式提示，可以通過快捷鍵 (快捷鍵Ctrl+Shift+V)
• background：可以讓vscode的背景修改為自己喜歡的圖，最多3張照片
  ```
  // Plugin background enabled.background 插件是否啟用
  "background.enabled": false,

// Use default images.使用默認圖片
"background.useDefault": false,

// Your custom Images(Max length is 3). 自己定制背景圖，最多3個
"background.customImages": [
"file:///E:/wushen.png",
"file:///E:/wushen.png",
"file:///E:/wushen.png"]

## **常用快捷鍵**

- 1.窗口管理
    - 打開一個新窗口 Ctrl+Shift+N
    - 關閉窗口 Ctrl+Shift+W
    - 縮放窗口顯示比例 Ctrl++/-
    - 側邊欄顯示和隱藏 Ctrl+B
- 2.文件管理
    - 新建文件 Ctrl+N
    - 保存文件 Ctrl+S   
    - 在當前文件內查找 Ctrl+F
    - 在當前文件內替換 Ctrl+H
    - 整個文件夾中查找 Ctrl+Shift+F
    - 切換文檔 Ctrl+Tab 
    - 向前/向後切換文檔 Ctrl+PgUp/PgDn
    - html文件預覽，需安裝插件：`View In Browser` 
- 3.分欄管理
    - 文件分欄（最多3個）Ctrl+\，或者按住Ctrl鼠標點擊Explorer裏的文件名
    - 分欄切換Ctrl+1 Ctrl+2 Ctrl+3
- 4.代碼格式管理
    - 代碼行縮進Ctrl+[， Ctrl+]
    - 折疊打開代碼塊 Ctrl+Shift+[， Ctrl+Shift+]
    - 代碼格式化：Shift+Alt+F
    - 修剪空格Ctrl+Shift+X
    - 在當前行下邊插入一行Ctrl+Enter
    - 在當前行上方插入一行Ctrl+Shift+Enter
- 5.光標相關
    - 移動到行首：Home
    - 移動到行尾：End
    - 移動到文件結尾：Ctrl+End
    - 移動到文件開頭：Ctrl+Home
    - 選中當前行Ctrl+i（雙擊）
    - 選擇從光標到行尾Shift+End
    - 選擇從行首到光標處Shift+Home
    - 刪除光標右側的所有字Ctrl+Delete
    - 同時選中所有匹配的Ctrl+Shift+L
- 6.自動保存
    - 文件 -> 自動保存 
    - Ctrl+Shift+P，輸入 auto


## **IDE設置**
 

// 控制是否顯示 minimap(縮略圖)
"editor.minimap.enabled": true,

// 視區寬度自動換行設置。
　"editor.wordWrap": "on",

// 指定用在工作臺中的顏色主題。
　"workbench.colorTheme": "Monokai"
```

VS Code實用技巧