前端开发好用的必备的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.