vscode常用插件

vscode-icons

让你的文件名结尾加上icon

image.png

Code Spell Checker

检查拼写

image.png

Rainbow Brackets

使用过后代码的括号将变成不同的颜色，方便以后更好查看

image.png

indent-rainbow

让前面的缩进显示更清晰

image.png

open in browser

在vscode中打开你现在的文件在默认浏览器中

点击右键 open in default browser 或者 Alt+B

image

Debugger for Chrome

从VS Code debug你的JavaScript code在Chrome

image.png
image.png

CSS Peek

查看html中的class和id并且定位

image.png

Path Intellisense

自动提示文件夹里的路径跟sublime里的autofile name 一样

image.png

ESLint

前端开发必备的JS提示sublime和atom都支持

官网文档地址 传送门

image.png

Stylelint

前端开发必备的CSS, Sass, Less的检测工具

image.png

Beautify

美化javascript, JSON, CSS, Sass.

image.png

Minify

压缩你的 js, css and html files

f1 然后输入Minify 会自动生成一个xxxx.min.js 在当前目录下

image

koroFileHeader

在vscode中用于生成文件头部注释和函数注释的插件，几乎支持所有语言

window：ctrl+alt+i,mac：ctrl+cmd+i, linux: ctrl+meta+i

image.png

Document This

快速规范注释你的javascript

image.png

Markdown Preview Enhanced

让你在VScode中更好书写markdown 并且有preview模式

非常好的使用介绍

image

Codelf

你的变量命名好帮手

image.png

ES7 React/Redux/GraphQL/React-Native snippets

React全家桶的代码提示

image.png

Auto Import

React里的moudles在引入的时候帮你自动填写

image.png

JavaScript (ES6) code snippets

ES6的代码提示

image.png

Import Cost

查看引用组件大小

image.png