vscode自用常用插件

1、any-rule 集合了所有常用的正则

image.png

image.png

2、 Autoprefixer 自动添加css的兼容前缀

da82a3c6-496b-11e6-8d95-0bebbf0b9607.gif

3、Color Highlight 颜色代码高亮

image.png

image.png

3、Error Lens -检查代码语法错误 不同于eslint, 这个插件只提供类似的错误提示。不影响运行。

image.png

image.png

image.png

4、 Import Cost 显示引入的包大小

image.png

image.png

5、x-translator 能够在编辑器内进行翻译，变量命名很方便。 快捷键：ctrl+shift+r

006y8mN6ly1g81ax2es1fg30m80cujt5.gif

6、vue-helper 显示vue组件变量提示

local-tips.gif

6、filesize 显示当前文件大小

image.png

7、koroFileHeader 用于生成文件头部注释和函数注释的插件，支持所有主流语言,功能强大，灵活方便，文档齐全，食用简单

image.png

image.png

8、Code Runner 能够直接在vscode中执行简单的js代码

9、Highlight Matching Tag 高亮标签的开始和结束

image.png

10、Image preview 在vscode左边显示引入的图片缩略图

image.png

11、Polacode-44886 生成漂亮的js截图代码 ，能够直接在开发工具中显示保存，很方便。

image.png

12、hack字体，很好看，这是官网https://sourcefoundry.org/hack/。只需要下载下来安装，然后在vscdoe中指定'Hack'即可。很优雅的字体。

image.png

image.png

13、Tabnnie 这个插件能够根据你的编码习惯AI学习提供代码提示，用过的人都说好。

14、Indent one space vscode当你选中好几行按空格的时候，vscode会直接把你这段删掉，有了这个插件，将会把你选中的代码按空格缩进 而不是删除。

15、 css Peek 装了这个插件后 按住鼠标ctrl点击样式 就可以显示样式在哪儿定义的。 或者定位class 按键盘F12 也可以显示样式定义位置。