工欲善其事，必先利其器

外掛位置

C:\Users(使用者)\Administrator(你的使用者名稱).vscode\extensions

外掛集合https://www.oschina.net/translate/top-visual-studio-code-extensions

部分演示https://blog.csdn.net/qq_38906523/article/details/77278403

解決cpu佔用過高

檔案->首選項->搜尋“search.followSymlinks”改為false

1、 Atom One Dark Theme （主題）

2、Bracket Pair Colorizer （對括號對進行著色）

3、Eslint 程式碼規範

4、git Lens

5、Vetur （vue程式碼高亮）

6、vscode-icons （檔案圖示）

7、Path Intellisense （路徑提示器）

8、filesize （會在左下角顯示檔案大小）

9、Indenticator （程式碼縮排）

10、VueHelper Vue2程式碼段（包括Vue2 api、vue-router2、vuex2）

11、add jsdoc comments / Complete JSDoc Tags / fileheader (文件註釋)

12、Auto Rename Tag （修改html標籤，自動幫你完成尾部閉合標籤的同步修改）

13、beautify （程式碼美化）

14、JavaScript (ES6) code snippets

15、EditorConfig for VS Code（統一的編輯配置對團隊開發很有用）

16、IntelliSense for CSS class names （CSS 類名補全，會自動掃描整個專案裡面的 CSS 類名並在你輸入類名時做智慧提示）

17、Live Server （http伺服器）、會出現問題

18、view in browse （瀏覽器預覽html）ctrl + f1

Auto Close Tag 自動閉合HTML標籤

Auto Rename Tag 修改HTML標籤時，自動修改匹配的標籤

Bookmarks 新增行書籤

Can I Use HTML5、CSS3、SVG的瀏覽器相容性檢查

Code Runner 執行選中程式碼段（支援大量語言，包括Node）

CodeBing 在VSCode中彈出瀏覽器並搜尋，可編輯搜尋引擎

Color Highlight 顏色值在程式碼中高亮顯示

Color Picker 拾色器

Document This 註釋文件生成

EditorConfig for VS Code EditorConfig 外掛

Emoji 在程式碼中輸入emoji

ESLint ESLint外掛，高亮提示

File Peek 根據路徑字串，快速定位到檔案

Font-awesome codes for html FontAwesome提示程式碼段

ftp-sync 同步檔案到ftp

Git Blame 在狀態列顯示當前行的Git資訊

Git History(git log) 檢視git log

GitLens 顯示檔案最近的commit和作者，顯示當前行commit資訊

Guides 高亮縮排基準線

Gulp Snippets Gulp程式碼段

HTML CSS Class Completion CSS class提示

HTML CSS Support css提示（支援vue）

HTMLHint HTML格式提示

Indenticator 縮排高亮

JavaScript (ES6) code snippets ES6語法程式碼段

language-stylus Stylus語法高亮和提示

Lodash Lodash程式碼段

markdownlint Markdown格式提示

MochaSnippets Mocha程式碼段

Node modules resolve 快速導航到Node模組

npm 執行npm命令

npm Intellisense 匯入模組時，提示已安裝模組名稱

Output Colorizer 彩色輸出資訊

Partial Diff 對比兩段程式碼或檔案

Path Autocomplete 路徑完成提示

Path Intellisense 另一個路徑完成提示

Prettify JSON 格式化JSON

Project Manager 快速切換專案

REST Client 傳送REST風格的HTTP請求

Settings Sync VSCode設定同步到Gist

String Manipulation 字串轉換處理（駝峰、大寫開頭、下劃線等等）

Test Spec Generator 測試用例生成（支援chai、should、jasmine）

TODO Parser Todo管理

Version Lens package.json檔案顯示模組當前版本和最新版本

vetur 目前比較好的Vue語法高亮

View Node Package 快速開啟選中模組的主頁和程式碼倉庫

vscode-icons 檔案圖示，方便定位檔案

VSCode Great Icons 檔案圖示拓展

VueHelper Vue2程式碼段（包括Vue2 api、vue-router2、vuex2）

附錄：VSCode首選項配置

{
    "editor.tabSize": 2,
    "files.associations": {
        "*.vue": "vue"
    },
    "eslint.autoFixOnSave": true,
    "eslint.options": {
        "extensions": [
            ".js",
            ".vue"
        ]
    },
    "eslint.validate": [
        "javascript",
        "javascriptreact",
        "vue",
        "vue-html"
    ],
    "search.exclude": {
        "**/node_modules": true,
        "**/bower_components": true,
        "**/dist": true
    },
    "emmet.syntaxProfiles": {
        "javascript": "jsx",
        "vue": "html",
        "vue-html": "html"
    },
    "extensions.autoUpdate": true,
    "editor.renderWhitespace": "boundary",
    "editor.cursorBlinking": "smooth",
    "workbench.welcome.enabled": true
}