VSCode

插件推荐

---

vscode-icons

文件太多一眼看不过来？用这个插件区分每个文件的类型，显示不同的文件icon.更加清晰直观。

icon.png

Open in Browser

如果使用过Hbuilder或者sublime的知道可以直接点击按钮或者右键鼠标用浏览器查看效果。vscode可以通过这个插件安装右键鼠标选择在浏览器中打开当前页面。

Browser.png

Auto Rename Tag

在编写html文件时，有时候要修改一个标签，需要开始标签和闭合标签都要手动修改，这个插件帮助我们自动修改匹配到的闭合标签。

usage.gif

Auto Close Tag

这个插件可以帮助我们在写标签的时候，写完开始标签之后，自动补全闭合标签。
在写组件标签（非html标签时）的时候会比较方便。

Path Autocomplete

文件路径自动补全插件，如果不装那就只能手敲了，不仅费时间还容易出错。

path-autocomplete.gif

Vetur

让vue代码高亮显示。支持.vue文件中标签自动补全。

vetur.png

Vue 2 Snippets

也可以使vue代码高亮，支持vue语法，自动提示功能。

vue.png

Power Mode

让你的每一次敲击都火花带闪电。这个插件需要配置一下，文件 > 首选项 > 设置。添加以下配置。

"powermode.enabled": true

demo-presets-particles.gif

抖动效果会感觉有些卡顿，如果不想要抖动的效果可以添加以下配置

"powermode.enableShake":false

px2rem

在做移动端适配的时候一般使用rem单位来设置大小，但是每次设置大小都需要算一下对应的rem值会非常浪费时间。这个 插件可以帮助我们自动转换成rem值。

px2rem.png

Color Info

可以显示当前颜色的信息，也可以使用选色小面板进行选色。

color_info.png
还可以点击颜色值得位置进行十六进制和rgba还有hsl值之间的转换
color_info2.png

Bracket Pair Colorizer

括号高亮显示，一个文件中括号如果多的话，可以五颜六色显示，还有引导线自动匹配括号。

pair.png

Chinese (Simplified) Language Pack for VS Code

如果英文不是特别好的小伙伴可以安装此插件，相当于安装一个中文版的VSCode。

English.png Chinese.png

Prettier - Code formatter

格式化代码，添加这个插件后可以按CMD + Shift + P搜Format Document点击此选项手动格式化，也可以通过设置，做到保存文件自动格式化。

"prettier.singleQuote": true,  //自动使用单引号（如果用了双引号，保存自动变成单引号）
"prettier.eslintIntegration": true, // 使用prettier-eslint代替prettier
"prettier.tabWidth": 4, //tab键的宽度

"editor.formatOnSave": true, //保存自动格式化

GitLens

这个插件也是非常强大的，从它的大小就能看出来，安装完之后VSCode左侧多了一个Git的图标。

GitLens.png

然后可以看到左边区域，可以查看有哪些提交领先于远程代码；本地做了哪些更改；历史提交；查看分支；查看远程等等。

还有一个功能就是把鼠标光标点在哪一行，就会在这一行的后面显示出是谁在什么时候提交的。防止队友甩锅神器。

防甩锅.png

设置

---

jsx语法中html标签自动补全

找到emmet.includeLanguages项，给它添加以下属性：

"emmet.includeLanguages": {
    "javascript": "javascriptreact"
},

常用设置

"editor.fontSize": 16, //字体大小
"javascript.format.enable": true,  //格式化
"javascript.validate.enable": true, //验证
"editor.renderIndentGuides": true, //参考线