VS Code 超级好用插件推荐

1 , 改变编辑器里面的文件图标

(1)vscode-icons

评价 :  个人比较稀饭这个。配合着好看的图片, 敲代码的心情都是开心的

 

 

2 , 预览网页必备

(1)View In Browser

(2)open in browser

(3)Live Server    

评价 :  这一个个人比较喜欢, 因为其它的插件基本都是将网页打开, 而这个网页却是将网页发布 !

 

 

3 , 给嵌套的各种括号加上不同的颜色。

(1)Bracket Pair Colorizer

功能 :  代码颜色高亮一般只会帮你区分不同的变量，这款插件给不同的括号换上了不同的颜色，括号的多的时候非常实用。

 

 

4 , 添加关闭标签

(1)Auto Close Tag

功能 :  自动添加HTML / XML关闭标签

 

 

5 , 后标签跟随重命名

(1)Auto Rename Tag

功能 :  自动重命名配对的HTML / XML标签

 

 

6 , 代码美化格式

(1)Beautify

功能 :  格式化代码

 

 

7 , 中文简体语言包

(1)Chinese (Simplified) Language Pack for Visual Studio Code

 

 

8 , 运行代码

(1)Code Runner

功能 :  非常强大的一款插件，能够运行多种语言的代码片段或代码文件：C，C ++，Java，JavaScript，PHP，Python，Perl，Ruby，Go等等

安装完成后，右上角会出现：▶

 

 

9 , 单词拼写检查

(1)Code Spell Checker

功能 :  单词拼写检查，非常推荐，有时候会拼错单词，这个不仅可以指出错误，还能提供正确单词的拼写方式。

安装好之后，选中拼写错误的单词，旁边出现黄色小灯泡，点击选择单词，直接替换。

 

 

10 , CSS颜色信息

(1)Color Info

功能 :  这个便捷的插件，将为你提供你在 CSS 中使用颜色的相关信息。你只需在颜色上悬停光标，就可以预览色块中色彩模型的（HEX、 RGB、HSL 和 CMYK）相关信息了

 

 

11 , 检查JS语法错误

(1)EsLint

功能 :  EsLint可以帮助我们检查Javascript编程时的语法错误。比如：在Javascript应用中，你很难找到你漏泄的变量或者方法。EsLint能够帮助我们分析JS代码，找到bug并确保一定程度的JS语法书写的正确性

 

 

12 , 缩进检查

(1)Guides

功能 :  提供缩进检查，有时候for, if 写多了，就分不清对应的列数，VScode虽然自带的有缩进检查，但是不明显，这个将缩进线显示为红色，非常醒目。

 

 

13 , 虚拟数据测试

(1)Faker

功能 :  使用流行的 JavaScript 库 – Faker，能够帮你快速的插入用例数据。Faker 可以随机生成姓名、地址、图像、电话号码，或者经典的乱数假文段落，并且每个类别还包含了各种子类别，你可以根据自身的需求来使用这些数据。

 

 

14 , HTML代码自动填充

(1)HTML Snippets

 

 

15 , HTML 代码格式检测

(1)HTMLHint

 

 

16 , 查看图片路径

(1)Image Preview

 

 

17 , 路径自动补全

(1)Path Intellisense

 

 

18 , 开发Python必备

(1)Python

 

 

19 , 插件同步必备

(1)Setting Sync

            详细安装教程  https://www.jianshu.com/p/4ffa3b0ad860

            将VScode的配置上传到github，以后换机器，重装系统，随时下载，不用重新找教程了

 

 

20 , CSS与JS格式化

(1)Prettier

 

 

21 , 添加TODO注释

(1)TODO Highlight

 

 

22 , 作者描述

(1)vscode-fileheader

            顶部注释模板，可定义作者、时间等信息，并会自动更新最后修改时间

            快捷键: Ctrl+Alt+i

            (默认信息可在 文件→首选项→设置 中修改)

 

 

23 , css 文件名智能提示在 html 中

(1)intelliSense for CSS class names in HTML

 

 

24 , 显示文件大小

(1)filesize

描述 :  一款在左下角显示文件大小的插件，还是挺实用的

 

 

24 , Vue语法查错, 自动补全

(1)Vetur

描述 :  Vue 语法高亮显示, 语法错误检查, 代码自动补全 (配合 ESLint 插件效果更佳)

 

 

25 , 字体颜色

(1)SynthWave‘84    字体颜色主题，一套高亮字体方案, 据说特别不错, 还没用 !

(2)One Dark Pro     个人最喜欢的黑色主题

(3)Brackets Light Pro    个人最喜欢的白色主题

(4) One Monokai

(5)Material Icon