前端、VUE開發 VS Code (10個常用快捷鍵、17個常用插件)

VS Code 使用指南 [前端開發]

VS Code 是一款來自Microsoft某團隊的優秀的套殼浏覽器(開源 免費 編輯器) 真香！ 😀

下載下傳位址：https://code.visualstudio.com/

快捷鍵

我常用的快捷鍵

1. 打卡終端 CTRL + `
2. 顯示/隐藏側邊欄 CTRL + B
3. 查找下一個（需要先選中） CTRL + D
4. 格式化代碼 ALT + SHIFT + F （實在不習慣 我修改為 CTRL + ALT + L）
5. 注釋代碼 CTRL + /
6. 向右縮進 Tab
7. 向左縮進 SHIFT + Tab
8. 向上向下複制一行 ALT + SHIFTt + Up 或 ALT + SHIFT + Down
9. 同時選中所有比對： CTRL + SHIFTt + L

10. 打卡指令視窗 CTRL + SHITF + P

    > Reload Window 重新開機視窗 (釋放記憶體用)

插件

1.Bracket Pair Colorizer

為代碼中的各種結對的括号提供了顔色高亮

2.Chinese (Simplified) Language Pack for Visual Studio Code

界面漢化

3.Code Runner

代碼一鍵運作

4.Dracula Official

一款吸血鬼配色主題

5.Easy LESS

轉換less檔案

6.Git History

擴充GIT操作 牆裂推薦

7.markdownlint

預覽 編輯 markdown檔案

8.Material Icon Theme

美化 檔案圖示

9.Debugger for Chrome

友善調試

10.Path Intellisense

導入檔案 路徑自動補全

11.Prettier - Code formatter

格式化代碼

12.Reactjs code snippets

React代碼提示

13.TypeScript Hero

輔助TS組織和導入

14.Vetur

代碼高亮 格式化

15.Vue 2 Snippets

代碼片段補全

16.Vue VSCode Snippets

代碼片段提示 依賴 Vue 2 Snippets

17.vue-helper

增強了對Element-UI，VUX，IVIEW進行寫Vue和擴充的能力

重要的是 按住Ctrl點選方法名或事件名可以快速定位跳轉到對應方法代碼行