VSCODE用插件推薦（vue，小程序，webapp炒雞好用）

Auto Close Tag — 自動閉合HTML標籤

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

background — 背景

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

Beautify css/sass/scss/less — 代碼高亮

CSS Peek — 自動查找CSS文件

Debugger for Chrome — 調試JavaScript

Easy Sass — scss/sass文件保存可自動生成並同步編譯成同名css文件

Easy WXLESS — 微信小程序WXSS文件專用，保存可自動生成並同步編譯成同名css文件

File Peek — 鼠標移到路徑名按住ctrl可打開文件

Git History — git log

GitLens — 顯示文件最近的commit和做者,顯示當前行commit信息

HTML Class Suggestions — 類名命名提示

HTML CSS Support — CSS的智能補全

HTML Snippets — 回車或tap生成標籤

Indenticator — 縮進高亮

IntelliSense for CSS class names — CSS類名智能命名提示

JavaScript (ES6) code snippets — JS語法提示

JavaScript Snippet Pack — 代碼片斷(Tab或者Enter補全)，Console命令，DOM — 文檔對象模型，Loop，Function，Timer，NodeJS，BDD，Misc

Live Server — http服務器（至關於使用nodejs的http-server，首選項-設置-用戶設置可配置更改端口：」liveServer.settings.port」: 8999）

npm — 運行npm命令

npm Intellisense — 導入模塊時，提示已安裝模塊名稱

OneDark-Pro — Atom’s ionic主題（首選項-顏色主題修改主題）

Output Colorizer — 彩色輸出信息

Path Intellisense — 編輯器中輸入路徑時,自動補全

Prettier-Code formatter — 代碼格式化（四個空格縮進：」prettier.tabWidth」: 4）

px2rem — px值轉rem

stylelint — CSS/SCSS/LESS檢查工具
首選項-設置-用戶設置配置：

"stylelint.enable": true, 
"css.validate": false, 
"scss.validate": false

SVG Viewer — 預覽SVG圖片

Vetur — Vue語法高亮

VSCode Great Icons — 文件圖標（首選項-文件圖標主題修改）

VSCode-Element-Helper — elementUI語法提示高亮

vue — Vue語法高亮
首選項-設置-用戶設置配置：

"emmet.syntaxProfiles": { 
    "vue-html": "html", 
    "vue": "html" 
}

Vue 2 Snippets — 基於最新的 Vue 官方語法高亮文件添加了語法高亮，而且依據 Vue 2 的 API 添加了代碼補全

Vue Peek — 查找vue組件文件

VueHelper — vue代碼提示插件，包括了vue2全部api，vue-router2和vuex2的代碼提示

首選項-設置-用戶設置配置：
小程序語法高亮：

"files.associations": { 
    "*.vue": "vue", 
    "*.wpy": "vue", 
    "*.wxml": "html", 
    "*.wxss": "css" 
}

我的習慣配置：

"editor.fontSize": 14, // 字體 
"editor.wordWrap": "on" // 自動換行 
"editor.formatOnSave": true // 保存自動格式化代碼

---

參考：參考