前端開發好用的必備的vsCode插件

綜合插件

Chinese

適用於 VS Code 的中文（簡體）語言包
此中文（簡體）語言包爲 VS Code 提供本地化界面。

HTML CSS Support

設置中添加以下代碼：

"editor.parameterHints": true,
"editor.quickSuggestions": {
    "other": true,
    "comments": true,
    "strings": true}

Mithril Emmet

編寫HTML+CSS必備的插件，代碼快速編寫工具，可以快到飛起。

id（#），class（.）

div#test
div.test

重複（*）

div*5

CSS部分

m-10--20 to margin: -10px -20px;
m10 → margin: 10px;
m1.5 → margin: 1.5em;
m1.5ex → margin: 1.5ex;
m10foo → margin: 10foo;
m10ex20em → margin: 10ex 20em;
m10ex-5 → margin: 10ex -5px;
p → %
e → em
x → ex
#1 → #111111
#e0 → #e0e0e0
#fc0 → #ffcc00
lh2 → line-height: 2;
fw400 → font-weight: 400;
 
p!+m10e!
padding:  !important;
margin: 10em !important;
 
w: webkit
m: moz
s: ms
o: o

HTML Snippets

html自動聯想

Image preview

可以在vsCode裏面預覽圖片

JavaScript (ES6) code snippets

js代碼自動提示，補全。

Path Intellisense

自動補全，聯想路徑地址

Code Runner

代碼一鍵運行，在vsCode也能執行某段代碼。

Code Spell Checker

用於typescript和javascript的簡單拼寫檢查

Auto Close Tag

當您在結束標記中鍵入結束括號時，它將添加結束標記。它支持HTML，Handlebars，XML，PHP，Vue，JavaScript，Typescript，JSX等。 ​​​​

Auto Rename Tag

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

ESLint

這個不用多說了，規範代碼格式的。1.審查代碼是否符合編碼規範和統一的代碼風格；2.審查代碼是否存在語法錯誤；

Beautify

Beautify是格式化代碼的插件
可美化JS、JSON、CSS、Sass、HTML（其他類型的文件不行）

Bracket Pair Colorizer

可以把不同嵌套層級的各種類型的括號，用不同的顏色標註出來。

Color Highlight

css顏色直接顯示，並且高亮

Highlight Matching Tag

突出顯示匹配標記。

Vue插件

Vetur

1.Vetur支持.vue文件的語法高亮顯示，除了支持template模板以外，還支持大多數主流的前端開發腳本和插件，比如Sass和TypeScript。
2.VSCode本身自帶了Emmet，能夠通過Tab鍵對HTML5的代碼進行快速開發，不過，VSCode中需要修改Emmet配置才能對Vue進行支持。在settings.json文件添加如下代碼：

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

Vue 2 Snippets

主要加強vue的便捷寫法

Vue VSCode Snippets

快捷生成vue骨架，data，methods等

1. vue基本骨架 vbase
2. data vdata
3. methods vmethod
4. v-for vfor

vscode-element-helper

element-ui自動聯想

微信小程序插件

minapp

Easy LESS

將.less文件編譯成.wxss文件

配置：
打開vsCode的設置，點擊右上角的打開設置(json)找到settings.json文件，在裏面最後一行加入如下代碼

"less.compile": {
        "outExt": ".wxss"
    }

小程序開發助手

微信小程序開發助手 for VSCode，代碼提示 + 語法高亮

wechat-snippet

由微信官方文檔照搬下來的代碼片段。 方便自己使用，同時也給需要者提供幫助。

小程序助手

wxapp-helper

VSCODE 微信小程序開發助手

• 功能
  • 生成頁面/組件
  • 頁面/組件模板可配置(.js, .wxml, .wxss, .json)
  • 文件名及命名風格可配置
  • 支持生成 TypeScript
  • 插入亂數假文(Lorem), 詞庫可配置, 字數可輸入
  • 插入圖片 URL, 來源可配置, 尺寸可輸入
  • 插入用戶頭像 URL, 來源可配置, 尺寸可輸入

備份及同步

Settings Sync

插件文檔地址：link.