• 介紹
• 安裝
• VSCode 快捷鍵
• 推薦插件
  • AutoFileName (文件路徑自動補全插件)
  • JavaScript (ES6) Code Snippets (代碼片段插件)
  • Project Manager (項目管理器插件)
  • Sort Lines (代碼行排序插件)
  • Wallaby.js (測試插件)
  • Sync Settings (設置同步插件)
  • Git History (Git 歷史記錄插件)
  • EditorConfig (代碼格式化插件)
  • Document This (JSDoc注釋插件)
  • npm Intellisense (npm 模塊導入插件)
  • Align (代碼對齊插件)
  • change-case (命名格式插件)
  • vscode-icons (側邊欄圖標插件)
• 用戶自定義設置

Visual Studio Code 編輯器

介紹

Visual Studio Code是一款免費開源的現(xiàn)代化輕量級代碼編輯器，支持幾乎所有主流的開發(fā)語言的語法高亮、智能代碼補全、自定義熱鍵、括號匹配、代碼片段、代碼對比 Diff、GIT 等特性，支持插件擴展，并針對網(wǎng)頁開發(fā)和云端應用開發(fā)做了優(yōu)化。軟件跨平臺支持 Win、Mac以及 Linux，運行流暢，可謂是微軟的良心之作。

安裝

Visual Studio Code官方站點下載安裝即可。

VSCode 快捷鍵

最重要的功能就是 F1 或 Ctrl+Shift+P打開的命令面板了，在這個命令框里可以執(zhí)行VSCode的任何一條命令，可以查看每條命令對應的快捷鍵，甚至可以關閉這個編輯器。

• 按一下Backspace會進入到Ctrl+P模式里。

• 在Ctrl+P下輸入>又可以回到主命令框 Ctrl+Shift+P模式。

• 在Ctrl+P窗口下可以

  • 直接輸入文件名，快速打開文件
  • ?列出當前可執(zhí)行的動作
  • !顯示Errors或Warnings，也可以Ctrl+Shift+M
  • : 跳轉到行數(shù)，也可以Ctrl+G直接進入
  • @跳轉到symbol（搜索變量或者函數(shù)），也可以Ctrl+Shift+O直接進入
  • @:根據(jù)分類跳轉symbol，查找屬性或函數(shù)，也可以Ctrl+Shift+O后輸入:進入
  • # 根據(jù)名字查找symbol，也可以Ctrl+T

• 常用快捷鍵

  • 編輯器與窗口管理

    • 同時打開多個窗口（查看多個項目）
      • 打開一個新窗口： Ctrl+Shift+N
      • 關閉窗口： Ctrl+Shift+W
    • 同時打開多個編輯器（查看多個文件）
      • 新建文件Ctrl+N
      • 歷史打開文件之間切換 Ctrl+Tab，Alt+Left，Alt+Right
      • 切出一個新的編輯器（最多3個）Ctrl+\

  • 代碼編輯

    • 格式調整
      • 代碼行縮進Ctrl+[，Ctrl+]
      • 折疊打開代碼塊Ctrl+Shift+[， Ctrl+Shift+]
      • Ctrl+C Ctrl+V如果不選中，默認復制或剪切一整行
      • 代碼格式化：Shift+Alt+F，或Ctrl+Shift+P后輸入format code
      • 修剪空格Ctrl+Shift+X
      • 上下移動一行：Alt+Up 或Alt+Down
      • 向上向下復制一行： Shift+Alt+Up或Shift+Alt+Down
      • 在當前行下邊插入一行Ctrl+Enter
      • 在當前行上方插入一行Ctrl+Shift+Enter
    • 查找替換
      • 查找 Ctrl+F
      • 查找替換 Ctrl+H
      • 整個文件夾中查找 Ctrl+Shift+F
      • 匹配符：
        • * 匹配路徑中的一個或多個字符
        • ? 匹配路徑中的一個字符
        • ** 匹配任意數(shù)量的路徑，包括沒有
        • {} 匹配符合條件的所有組合（例如{**/*.html，**/*.txt}匹配所有HTML和txt文件）
        • [] 匹配一系列聲明的字符（例如example.[0-9]匹配example.0,example.1, …)

  • 顯示相關

    • 全屏：F11
    • 放大/縮?。?code>Ctrl + =/Ctrl + -
    • 側邊欄顯/隱：Ctrl+B
    • 側邊欄4大功能顯示：
      • Show Explorer Ctrl+Shift+E
      • Show Search Ctrl+Shift+F
      • Show Git Ctrl+Shift+G
      • Show Debug Ctrl+Shift+D
      • Show Output Ctrl+Shift+U
    • 預覽markdown Ctrl+Shift+V

  • 自動保存：File-> AutoSave ，或者Ctrl+Shift+P，輸入 auto

  • 皮膚預覽：F1后輸入 theme回車，然后上下鍵即可預覽

  • 設置中文語言：ctrl+shift+p或者F1搜索Configore Display Language設置 zh-cn 關閉軟件重啟。
    

    configlanguage.png

    tips:如果重啟菜單還是英文的，在商店查看已安裝的插件，把中文插件Chinese重新安裝一遍，然后重啟軟件。

推薦插件

• AutoFileName (文件路徑自動補全插件)
  當你需要 require 本地文件時，這個插件將為你提供基于你輸入的文件路徑的自動補全的選項。

• JavaScript (ES6) Code Snippets (代碼片段插件)
  用代碼片段加快 ES6 開發(fā)速度，例如輸入 imd 可以自動生成如下代碼：

    import { } from 'somewhere';
  

• Project Manager (項目管理器插件)
  簡單的項目管理器,可以在你的編輯器中快速切換項目。

• Sort Lines (代碼行排序插件)
  這個插件可以對選中的代碼行進行排序。也提供不區(qū)分大小寫、反向和唯一等排序功能。

  
  
  sort-lines.gif

• Wallaby.js (測試插件)
  一個高級的連續(xù)測試運行器，當您對您正在工作的文件進行測試時，它會在你的編輯器中創(chuàng)建通過測試或測試失敗的視覺反饋。

  
  
  Wallaby.gif

• Sync Settings (設置同步插件)
  你很有可能在多臺電腦上進行編碼工作。在電腦上移植你的插件和設置是輕而易舉的事，這要歸功于 Shan Ali Khan的設置同步擴展。

• Git History (Git 歷史記錄插件)
  可視化的 Git 歷史記錄插件。

  
  
  Git History.gif

• EditorConfig (代碼格式化插件)
  添加對 EditorConfig 的支持，因此當您格式化文件時，它會引用此約定。

• Document This (JSDoc注釋插件)
  在 TypeScript 和 JavaScript 文件中自動生成詳細的 JSDoc 注釋。

  
  
  Document This.gif

• npm Intellisense (npm 模塊導入插件)
  VS Code 擴展，在 import 導入語句中自動完成npm 模塊。

  
  
  npm Intellisense.gif

• Align (代碼對齊插件)
  對齊文本，使代碼根據(jù)=，:等對齊。

  對齊前：

    var test = 'string';
    var another = 10;
    var small = 10 * 10;
  

  對齊后：

    var test    = 'string';
    var another = 10;
    var small   = 10 * 10;
  

• change-case (命名格式插件)
  快速修改突出顯示的選中文本的命名格式。 camelCase（駱駝拼命名），PascalCase（首字母大寫），kebab-case（中劃線命名），underscore_delimited（下劃線命名），CONSTANT（大寫命名）等。

• vscode-icons (側邊欄圖標插件)
  可以更換側邊欄中漂亮的圖標。

用戶自定義設置

• 文件File ->首選項Preferences ->設置，打開自定義settings.json,幾乎所有設定都在settings.json里

• User settings 用戶設置

  • User settings 是全局設置，任何vs Code打開的項目都會依此配置。
  • 默認存儲在:
    • Windows: %APPDATA%\Code\User\settings.json
    • Mac: $HOME/Library/Application Support/Code/User/settings.json
    • Linux: $HOME/.config/Code/User/settings.json

• Workspace settings 工作區(qū)設置

  • Workspace settings 是本工作區(qū)的設置，會覆蓋上邊的配置
  • 存儲在工作區(qū)的.vocode文件夾下。

例如可以修改讓vscode認識.glsl擴展名

// Configure file associations to languages (e.g. "*.extension": "html"). These have precedence over the default associations of the languages installed.
"files.associations": {
    "*.glsl": "shaderlab"
}