VS Code實用技巧

相關文檔

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

下載安裝

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

簡介

• 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"