一、拓展
名稱 | 簡述 |
Auto Close Tag | 自動閉合HTML標籤 |
Auto Import | import提示 |
Auto Rename Tag | 修改HTML標籤時，自動修改匹配的標籤 |
Babel JavaScript | babel外掛，語法高亮 |
Babelrc | .babelrc檔案高亮提示 |
Beautify css/sass/scss/less | css/sass/less格式化 |
Better Align | 對齊賦值符號和註釋 |
Better Comments | 編寫更加人性化的註釋 |
Bookmarks | 新增行書籤 |
Bracket Lens | 在閉合的括號處提示括號頭部的程式碼 |
Bracket Pair Colorizer 2 | 用不同顏色高亮顯示匹配的括號 |
Can I Use | HTML5、CSS3、SVG的瀏覽器相容性檢查 |
Code Outline | 展示程式碼結構樹 |
Code Runner | 執行選中程式碼段（支援多數語言） |
Code Spell checker | 單詞拼寫檢查 |
CodeBing | 快速開啟Bing並搜尋，可設定搜尋引擎 |
Color Highlight | 顏色值在程式碼中高亮顯示 |
Color Info | 小視窗顯示顏色值，rgb,hsl,cmyk,hex等等 |
Color Picker | 拾色器 |
CSS-in-JS | CSS-in-JS高亮提示和轉換 |
Dash | 整合Dash |
Debugger for Chrome | 偵錯Chrome |
Document This | 註釋檔案生成 |
DotENV | .env檔案高亮 |
Edit csv | 編輯CSV檔案 |
EditorConfig for VS Code | EditorConfig外掛 |
Emoji | 在程式碼中輸入emoji |
endy | 將輸入遊標跳轉到當前行最後面 |
Error Gutters | 在行號處提示錯誤程式碼 |
ESLint | ESLint外掛，高亮提示 |
File Peek | 根據路徑字串，快速定位到檔案 |
filesize | 狀態列顯示當前檔案大小 |
Find-Jump | 快速跳轉到指定單詞位置 |
Font-awesome codes for html | FontAwesome提示程式碼段 |
ftp-sync | 同步檔案到ftp |
Git Blame | 在狀態列顯示當前行的Git資訊 |
Git File History | 快速瀏覽單檔案歷史提交變動 |
Git Graph | Git圖形化檢視，方便瀏覽和操作 |
Git History(git log) | 檢視git log |
Git Tree Compare | Git樹形比對，檢視不同分支的差異 |
gitignore | .gitignore檔案語法 |
GitLens | 顯示檔案最近的commit和作者，顯示當前行commit資訊 |
GraphQL for VSCode | graphql高亮和提示 |
Guides | 高亮縮排基準線 |
Gulp Snippets | Gulp程式碼段 |
Highlight Matching Tag | 高亮匹配選中的標籤 |
HTML CSS Class Completion | CSS class提示 |
HTML CSS Support | css提示（支援vue） |
HTMLHint | HTML格式提示 |
htmltagwrap | 快捷包裹html標籤 |
htmltagwrap | 包括HTML |
Import Beautify | import分組、排序、格式化 |
Import Cost | 行內顯示匯入（import/require）的包的大小 |
Indenticator | 縮排高亮 |
IntelliSense for css class names | css class輸入提示 |
JavaScript (ES6) code snippets | ES6語法程式碼段 |
JavaScript Standard Style | Standard風格 |
Jest Runner | 支援執行Jest單個測試檔案或單個用例 |
JS Refactor | 程式碼重構工具，提取函數、變數重新命名等等 |
JSON to TS | JSON結構轉化為typescript的interface |
JSON Tools | 格式化和壓縮JSON |
jumpy | 快速跳轉到指定單詞位置 |
language-stylus | Stylus語法高亮和提示 |
Less IntelliSense | less變數與混合提示 |
Lodash | Lodash程式碼段 |
Log Wrapper | 生產列印選中變數的程式碼 |
markdownlint | Markdown格式提示 |
MochaSnippets | Mocha程式碼段 |
Node modules resolve | 快速導航到Node模組 |
npm | 執行npm命令 |
npm Intellisense | 匯入模組時，提示已安裝模組名稱 |
Output Colorizer | 彩色輸出資訊 |
Partial Diff | 對比兩段程式碼或檔案 |
Parameter Hints | 在函數呼叫處指示引數名稱 |
Path Autocomplete | 路徑完成提示 |
Path Intellisense | 另一個路徑完成提示 |
Polacode | 將程式碼生成圖片 |
PostCss Sorting | css排序 |
Prettier - Code formatter | prettier官方外掛 |
Prettify JSON | 格式化JSON |
Project Manager | 快速切換專案 |
Quokka.js | 不需要手動執行，行內顯示變數結果 |
Rainbow CSV | CSV檔案使用彩虹色渲染不同列 |
React Native Storybooks | storybook預覽外掛，支援react |
React Playground | 為編輯器提供一個react元件執行環境，方便偵錯 |
React Standard Style code snippets | react standar風格程式碼塊 |
REST Client | 傳送REST風格的HTTP請求 |
Sass | sass外掛 |
Settings Sync | VSCode設定同步到Gist |
Sort lines | 排序選中行 |
Sort Typescript Imports | typescript的import排序 |
String Manipulation | 字串轉換處理（駝峰、大寫開頭、下劃線等等） |
stylelint | css/sass/less程式碼風格 |
SVG Viewer | SVG檢視器 |
Syncing | vscode設定同步到gist |
Test Spec Generator | 測試用例生成（支援chai、should、jasmine） |
TODO Parser | Todo管理 |
Todo Todo Tree | 收集程式碼中的TODO註釋，支援快速搜尋 |
Toggle Quotes | 切換JS中的引號，" -> ' -> ` |
TS/JS postfix completion | ts/js字尾提示 |
TSLint | TypeScript語法檢查 |
Types auto installer | 自動安裝@types宣告依賴 |
TypeScript Hero | TypeScript輔助外掛，管理import、outline等等 |
TypeScript Import | TS自動import |
TypeScript Import Sorter | import整理排序 |
Typescript React code snippets | React Typescript程式碼段 |
TypeSearch | TS宣告檔案搜尋 |
Version Lens | package.json檔案顯示模組當前版本和最新版本 |
vetur | Vue外掛 |
Volar | Vue外掛，支援Vue3 |
View Node Package | 快速開啟選中模組的主頁和程式碼倉庫 |
Visual Studio IntelliCode | 基於AI的程式碼提示 |
VS Live Share | 實時多人協助 |
VSCode Great Icons | 檔案圖示拓展 |
vscode-database | 運算元據庫，支援mysql和postgres |
vscode-icons | 檔案圖示，方便定位檔案 |
vscode-random | 隨機字串生成器 |
vscode-spotify | 整合spotify，播放音樂 |
vscode-styled-components | styled-components高亮支援 |
vscode-styled-jsx | styled-jsx高亮支援 |
Vue Peek | 支援跳轉到Vue元件定義檔案 |
Vue TypeScript Snippets | Vue Typescript程式碼段 |
VueHelper | Vue2程式碼段（包括Vue2 api、vue-router2、vuex2） |
Wallaby.js | 實時測試外掛 |
Wrap Console Log Lite | 對選中程式碼快速console.log |
二、主題
名稱 | 預覽 |
Atom One Light Theme |  |
bluloco-dark |  |
bluloco-light | |
Enki Theme |  |
eppz! (C# theme for Unity) | |
Eva Theme | |
Flat UI |  |
GitHub Theme |  |
Monokai Pro | |
New Moon VSCode | |
One Dark Pro | |
Plastic | |
spacegray-vscode |  |
Splus |  |
三、個人偏好設定設定（僅供參考）
{ "breadcrumbs.enabled": true, "editor.tabSize": 2, "editor.renderWhitespace": "boundary", "editor.cursorBlinking": "smooth", "editor.minimap.renderCharacters": false, "editor.fontFamily": "'Fira Code', 'Droid Sans Mono', 'Courier New', monospace, 'Droid Sans Fallback'", "editor.fontLigatures": true, "explorer.confirmDragAndDrop": false, "extensions.autoUpdate": false, "files.insertFinalNewline": true, "git.autofetch": true, "git.path": "F:\\Program Files\\Git\\cmd\\git.exe", "search.exclude": { "**/node_modules": true, "**/dist": true
}, "typescript.locale": "en", "window.titleBarStyle": "custom", "window.title": "${dirty}${activeEditorMedium}${separator}${rootName}", "window.zoomLevel": 1, "workbench.activityBar.visible": true, "workbench.colorTheme": "Plastic - deprioritised punctuation", "workbench.iconTheme": "vscode-great-icons", "workbench.startupEditor": "newUntitledFile", "eslint.autoFixOnSave": true, "eslint.validate": ["javascript", "javascriptreact", "vue"], "vsicons.projectDetection.autoReload": true, "vsicons.dontShowNewVersionMessage": true, "tslint.autoFixOnSave": true, "debugwrapper.wrappers": { "default": "console.log('$eSEL', $SEL)"
}, "prettier.tslintIntegration": true, "cSpell.userWords": [ "Unmount"
], "jest.autoEnable": false,
}