一、介紹

Visual Studio Code (簡稱 VS Code / VSC) 是一款免費開源的現代化輕量級代碼編輯器，支持幾乎所有主流的開發語言的語法高亮、智能代碼補全、自定義熱鍵、括號匹配、代碼片段、代碼對比 Diff、GIT 等特性，支持插件擴展，並針對網頁開發和雲端應用開發做了優化。軟件跨平臺支持 Win、Mac 以及 Linux。

二、常用快捷鍵

1.主命令框

F1 或 Ctrl+Shift+P: 打開命令面板。在打開的輸入框內，可以輸入任何命令，例如：

• 按一下 Backspace 會進入到 Ctrl+P 模式
• 在 Ctrl+P 下輸入 > 可以進入 Ctrl+Shift+P
  模式

在 Ctrl+P 窗口下還可以:

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

2.編輯器與窗口管理

1. 打開一個新窗口： Ctrl+Shift+N
2. 關閉窗口： Ctrl+Shift+W
3. 同時打開多個編輯器（查看多個文件）
4. 新建文件 Ctrl+N
5. 文件之間切換 Ctrl+Tab
6. 切出一個新的編輯器（最多 3 個） Ctrl+\，也可以按住 Ctrl 鼠標點擊 Explorer 裏的文件名
7. 左中右 3 個編輯器的快捷鍵 Ctrl+1 Ctrl+2 Ctrl+3
8. 3 個編輯器之間循環切換 Ctrl+
9. 編輯器換位置， Ctrl+k然後按 Left或 Right

3.代碼編輯

• 格式調整

1. 代碼行縮進 Ctrl+[ 、 Ctrl+]
2. Ctrl+C 、 Ctrl+V 復制或剪切當前行/當前選中內容
3. 代碼格式化： Shift+Alt+F，或 Ctrl+Shift+P 後輸入 format code
4. 上下移動一行： Alt+Up
   或 Alt+Down
5. 向上向下復制一行： Shift+Alt+Up 或 Shift+Alt+Down
6. 在當前行下邊插入一行 Ctrl+Enter
7. 在當前行上方插入一行 Ctrl+Shift+Enter

• 光標相關

1. 移動到行首： Home
2. 移動到行尾： End
3. 移動到文件結尾： Ctrl+End
4. 移動到文件開頭： Ctrl+Home
5. 移動到定義處： F12
6. 定義處縮略圖：只看一眼而不跳轉過去 Alt+F12
7. 移動到後半個括號： Ctrl+Shift+]
8. 選擇從光標到行尾： Shift+End
9. 選擇從行首到光標處： Shift+Home
10. 刪除光標右側的所有字： Ctrl+Delete
11. 擴展/縮小選取範圍： Shift+Alt+Left 和 Shift+Alt+Right
12. 多行編輯(列編輯)：Alt+Shift+鼠標左鍵，Ctrl+Alt+Down/Up
13. 同時選中所有匹配： Ctrl+Shift+L
14. Ctrl+D 下一個匹配的也被選中 (在 sublime 中是刪除當前行，後面自定義快鍵鍵中，設置與 Ctrl+Shift+K 互換了)
15. 回退上一個光標操作： Ctrl+U

• 重構代碼

1. 找到所有的引用： Shift+F12
2. 同時修改本文件中所有匹配的： Ctrl+F12
3. 重命名：比如要修改一個方法名，可以選中後按 F2，輸入新的名字，回車，會發現所有的文件都修改了
4. 跳轉到下一個 Error 或 Warning：當有多個錯誤時可以按 F8 逐個跳轉
5. 查看 diff： 在 explorer 裏選擇文件右鍵 Set file to compare，然後需要對比的文件上右鍵選擇 Compare with file_name_you_chose

• 查找替換

1. 查找 Ctrl+F
2. 查找替換 Ctrl+H
3. 整個文件夾中查找 Ctrl+Shift+F

• 顯示相關

1. 全屏：F11
2. zoomIn/zoomOut：Ctrl +/-
3. 側邊欄顯/隱：Ctrl+B
4. 顯示資源管理器 Ctrl+Shift+E
5. 顯示搜索 Ctrl+Shift+F
6. 顯示 Git Ctrl+Shift+G
7. 顯示 Debug Ctrl+Shift+D
8. 顯示 Output Ctrl+Shift+U

6.其他

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

三、常用插件（前端類）

1. Open-In-Browser
由於 VSCode 沒有提供直接在瀏覽器中打開文件的內置界面，所以此插件在快捷菜單中添加了在默認瀏覽器查看文件選項，以及在客戶端（Firefox，Chrome，IE）中打開命令面板選項。
2. Quokka
Quokka 是一個調試工具插件，能夠根據你正在編寫的代碼提供實時反饋。它易於配置，並能夠預覽變量的函數和計算值結果。另外，在使用 JSX 或 TypeScript 項目中，它能夠開箱即用。
3. Faker
使用流行的 JavaScript 庫 – Faker，能夠幫你快速的插入用例數據。Faker 可以隨機生成姓名、地址、圖像、電話號碼，或者經典的亂數假文段落，並且每個類別還包含了各種子類別，你可以根據自身的需求來使用這些數據。
4. CSS Peek
使用此插件，你可以追蹤至樣式表中 CSS 類和 ids 定義的地方。當你在 HTML 文件中右鍵單擊選擇器時，選擇“ Go to Definition 和 Peek definition ”選項，它便會給你發送樣式設置的 CSS 代碼。
5. HTML Boilerplate
通過使用 HTML 模版插件，你就擺脫了為 HTML 新文件重新編寫頭部和正文標簽的苦惱。你只需在空文件中輸入 html，並按 Tab 鍵，即可生成幹凈的文檔結構。
6. Prettier
Prettier 是目前 Web 開發中最受歡迎的代碼格式化程序。安裝了這個插件，它就能夠自動應用 Prettier，並將整個 JS 和 CSS 文檔快速格式化為統一的代碼樣式。如果你還想使用 ESLint，那麽還有個 Prettier – Eslint 插件，你可不要錯過咯！
7. SVG Viewer
此插件在 Visual Studio 代碼中添加了許多實用的 SVG 程序，你無需離開編輯器，便可以打開 SVG 文件並查看它們。同時，它還包含了用於轉換為 PNG 格式和生成數據 URI 模式的選項。
8. TODO Highlight
這個插件能夠在你的代碼中標記出所有的 TODO 註釋，以便更容易追蹤任何未完成的業務。在默認的情況下，它會查找 TODO 和 FIXME 關鍵字。當然，你也可以添加自定義表達式。
9. Icon Fonts
這是一個能夠在項目中添加圖標字體的插件。該插件支持超過 20 個熱門的圖標集，包括了 Font Awesome、Ionicons、Glyphicons 和 Material Design Icons。
10. Minify
這是一款用於壓縮合並 JavaScript 和 CSS 文件的應用程序。它提供了大量自定義的設置，以及自動壓縮保存並導出為.min文件的選項。它能夠分別通過 uglify-js、clean-css 和 html-minifier，與 JavaScript、CSS 和 HTML 協同工作。
11. Change Case
雖然 VSCode 內置了開箱即用的文本轉換選項，但其只能進行文本大小寫的轉換。而此插件則添加了用於修改文本的更多命名格式，包括駝峰命名、下劃線分隔命名，snake_case 命名以及 CONST_CAS 命名等。
12. Regex Previewer
這是一個用於實時測試正則表達式的實用工具。它可以將正則表達式模式應用在任何打開的文件上，並高亮所有的匹配項。
13. Language and Framework Packs
VSCode 默認支持大量的主流編程語言，但如果你所使用的編程語言不包括在內，也可以通過下載擴展包來自動添加。同時，你還可以添加一些像 React Native 與 Vue 的相關 Web 開發插件包。
14.vscode-Path Intellisense------文件路徑提示。

15.vscode-Vue 2 Snippets------vue2的語法高亮，語法提示。

16.Auto Close Tag — 自動閉合HTML標簽

17.Auto Rename Tag — 修改HTML標簽時，自動修改匹配的標簽

18.beautify— javascript, JSON, CSS, Sass, HTML 代碼高亮

19.Debugger for Chrome — 調試JavaScript

待補…………………………

代碼編輯器——Visual Studio Code