vscode 前端常用的插件

插件列表:

1.Color Info 

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

代码片段比对

2.Partial Diff

3.SVN

       不解释

4.Vetur

  —— 语法高亮、智能感知、Emmet等

包含格式化功能,Alt+Shift+F(格式化全文),Ctrl+K Ctrl+F(格式化选中代码,两个Ctrl需要同时按着)

5.EsLint

  —— 语法纠错

6.JavaScript(ES6) code snippets

    —— ES6语法智能提示以及快速输入,除js外还支持.ts,.jsx,.tsx,.html,.vue,省去了配置其支持各种包含js代码文件的时间

7.Path Intellisense

   —— 自动路劲补全

8.HTML CSS Support 

     —— 让 html 标签上写class 智能提示当前项目所支持的样式

9.vue

10.emmet

11.  Chinese

   设置简体中文    //中文

12. Auto Rename Tag 

  //自动重命名配对的HTML / XML标签(必备)

13. Beautify

  //格式化javascript,JSON,CSS,Sass,和HTML

14.Class autocomplete for HTML  

    //智能提示HTML class =“”属性(必备)

15.Code Runner

 //非常强大的一款插件,能够运行多种语言的代码片段或代码文件:C,C ++,Java,JavaScript,PHP,Python,Perl,Ruby,Go等等,安装完成后,右上角出现:

点击这个按钮就可以运行你的文件了(必备)

16.Debugger for Chrome  

    //让vscode映射 chrome 的 debug功能,使静态页面都可以用 vscode 来打断点调试

17.Document This  

//添加注释块

18.Filesize

 //在底部状态栏显示当前文件大小,点击后还可以看到详细创建、修改时间

19. Git History

以图表的形式查看git日志

使用command+shift+p(Ctrl+shift+p) 输入git log就可以看到了

20.GitLens 

     可以增强 VSCode 内置 Git 的功能。例如 commits 搜索,历史记录和显示的代码作者身份具体功能可以查看Feature list

21.git日志插件

22. HTML Snippets

html代码片段(必备)

23. htmlhint

html代码检测

24. htmltagwrap

可以在选中HTML标签中外面套一层标签

使用:选择一大段代码,然后按“Alt + W”

25. Indenticator

突出目前的缩进深度

26.IntelliSense for CSS class names

智能提示css 的 class 名

27. Image Preview

鼠标移到路径里显示图像预览

28. JavaScript Snippet Pack

js代码片段(必备)

29. jQuery Code Snippets

jQuery代码片段

30. Live Sass Compiler

实时编译sass ,不过需要配置,附上我的配置

"liveSassCompile.settings.formats":[   // You can add more    {

    "format": "compressed",//压缩

      "extensionName": ".min.css",//编译后缀名

       "savePath": "./css"//编译保存的路径

 }

   ],

使用

31.markdownlint

markdown语法检查

32.Node.js Modules Intellisense

可以在导入语句中自动完成JavaScript / TypeScript模块。

33. npm Intellisense

在导入语句中自动填充npm模块,跟Node.js Modules Intellisense差不多

34. open in browser

当前的html文件用浏览器打开,类似 webstorm 的那四个小浏览器图标功能,前提条件html 文件必须保存

快捷键alt+b

35. Output Colorizer

输出提示的文字颜色有一些变化,方便获取关键信息

36. Prettier

格式化JavaScript / TypeScript / CSS。

37. Project Manager

工程项目过多时,shift+cmd+p(shift+ctrl+p)然后输入project,第一次选择edit Project编辑自己的工程项目,之后就可以直接选择open打开你的项目

38. Sass

写sass必备

39. vscode-faker

生成假数据,地址,电话,图片等等

打开方式shift+cmd+p(shift+ctrl+p)) 然后输入faker 就可以选择了

40. Quokka.js

实时观看javascript的变量的变化

使用:先shift+cmd+p (ctrl+shift+p)输入 quokka 选择 new javascript 就行了�

41. Regex Previewer

测试正则的插件

42. TSLint

检查typescript编程时的语法错误语法

43. TypeScript Importer

自动搜索工作区文件中的TypeScript定义,并将所有已知符号作为完成项,以允许代码完成。

44. vscode-icons

目录树图标

45. react

React-Native/React/Redux snippets for es6/es7

react代码片段,下载人数超多�

46.react-beautify

格式化javascript, JSX, typescript, TSX文件

47.VueHelper

vue代码片段

48.Vue TypeScript Snippets

vue的 typescript 代码片段

49.Vue 2 Snippets

vue 2代码片段

50.Typings Installer              

                  ——安装vscode 的代码提示依赖库,基于typtings的,比如提示angular或者jQuery智能感知

51.JS-CSS-HTML Formatter   

                     ——代码对齐。每次保存代码的时候它会自动对齐代码

主题

52.Dracula Official

个人最喜欢的主题,应该是最好看的主题之一

53.One Dark Pro

这个也好看

54.Atom One Dark Theme(老版本)

这个和One Dark Pro差不多,One Dark Pro颜色主题多一些

55.One Monokai Theme

56.Eva Theme

里面包含黑色和白色主题,这个白色主题感觉挺好看的

57.Boxy Theme Kit

 vscode设置显示代码缩略图

文件–首选项–设置 搜索 minimap 打上对勾就可以了

58.Bracket Pair Colorizer

颜色识别匹配括号

59.Code Spell Checker 单词拼写检查

     检测代码中单词拼写正确性

      我们在编写代码的时候经常会不小心拼写错误造成软件运行失败,安装这个插件后会自动帮我们识别单词拼写错误并且给出修改建议,大大帮我们减轻了排除bug的压力。

 60.CSS Peek

使用此插件,你可以追踪至样式表中CSS 类和 ids 定义的地方。当你在 HTML 文件中右键单击选择器时,选择“ Go to Definition 和 Peek definition ”选项,它便会给你发送样式设置的 CSS 代码。

61.Better Align

  #对齐用的,设置一下快捷键 Ctrl + Alt + =,对块自动等号对齐

62.Import Cost

引入包大小计算,对于项目打包后体积掌握很有帮助

 63.HTML Boilerplate

通过使用HTML 模版插件,你就摆脱了为 HTML 新文件重新编写头部和正文标签的苦恼。你只需在空文件中输入 html,并按 Tab 键,即可生成干净的文档结构。

64.TODO Highlight

这个插件能够在你的代码中标记出所有的TODO 注释,以便更容易追踪任何未完成的业务。在默认的情况下,它会查找 TODO 和 FIXME 关键字。当然,你也可以添加自定义表达式。

65.Rainbow Brackets

为圆括号,方括号和大括号提供彩虹色。这对于Lisp或Clojure程序员,当然还有JavaScript和其他程序员特别有用。

效果如下:

66.Indent-Rainbow

用四种不同颜色交替着色文本前面的缩进

67.scss IntelliSense   scss 智能提示,补全

68.AutoFileName (文件路径自动补全插件)

       当你需要 require 本地文件时,这个插件将为你提供基于你输入的文件路径的自动补全的选项。

69.Pigment    

遇到颜色代码时,Pigment会将颜色渲染在这段代码的下面。

70.Settings Sync

Settings Sync 提供了同步个人设置的功能,当我们需要换电脑进行开发时,比如回家用自己的电脑,或者换了新的电脑,该插件可以帮你同步之前做的设置,不需要在每台电脑上都重新设置一次。

vscode 选中后相同内容高亮插件推荐

71.highlight-icemode

   1. first step

ctrl + shift + p 打开 command panel , 输入 preferences: open user settings 打开用户设置,找到 highlight-icemode 配置项

2. secode step

将左侧内容复制到右侧可编辑tab 中,设置上自己想要的颜色就ok了。


{

    // Set backgroundColor

    "highlight-icemode.backgroundColor": "red",

    // Set Border Color

    "highlight-icemode.borderColor": "blue"

}

72.vscode中选择HTML标签对高亮

扩展插件中,安装这个插件“VSCode Highlight Matching Tag”

vs code这个编辑器,如果高亮显示对应的标签?

我一点div, vs code这个编辑器把所有的div都高亮了,但是只想高亮闭合的那个div,该怎么设置呢?谢谢


这个问题也困惑我很久了,brackets就可以很好的实现,但是其他功能又没有vsc好用,纠结。

问题解决,把正在编辑的文件识别为html就可以显示高亮显示对应标签了。php文件 

手动识别为

,就可以了

73.vue-beautify

vue文件格式化,有三种用法

1、快捷键ctrl+shift+f ;

2、在文件中右键选择Beautify Vue ;

3、按f1,搜索 Beautify Vue然后点击.

拓展插件

这部分主要介绍一些针对特定开发环境的插件

74.Vscode-element-helper

使用element-ui库的可以安装这个插件,编写标签时自动提示element标签名称。

https://upload-images.jianshu.io/upload_images/2484592-2c9831f44f9834a7.gif?imageMogr2/auto-orient/strip|imageView2/2/w/992/format/webp

75.     工具包版本信息

在package.json中显示你下载安装的npm工具包的版本信息,同时会告诉你当前包的最新版本。

76.WakaTime 计算代码工作量

这是一款时间记录工具,它可以帮助你在vs code中记录有效的编程的时间。

并且将数据用折线图的形式展示出来,为你呈现一周内的工作趋势,曾经编写项目的时候最多一天编程将近12个小时,你的付出和努力wakatime都知道。

同时在他的官网中,也会显示用扇形图的形式显示你编写各个语言所占用的时间比例,以及你在各个项目中所用的时间占比,是一个非常好的数据报告,项目结束的时候你可以在它的Dashboard中清晰地看出自己的时间都是如何分配的。

Settings Sync VSCode设置同步到Gist

有时候我们到了新公司或者换了新电脑需要配置新的开发环境,这时候一个一个下载插件,再重新配置vs code就非常麻烦而且你还不一定记得那么全面,通过这个插件我们可以将当前vs code中的配置上传到Gist,之后再通过Gist下载,就可以将所有配置同步到新环境中了。

点击左侧侧边栏Developer settings,进入开发者设置。

选择Personal access tokens,点击右侧Generate new token。

填写token名称,在下方勾选gist。

点击下方的Generate token按钮生成一个新的token。

将生成的新的token保存下来。

在vscode中安装Settings Sync插件,输入Ctrl+Shift+p输入Sync,选择更新/上传配置。

将github中生成的token输入,点击回车。

在控制台中自动生成一串id,之后便可以通过token和id进行配置同步。

输入Ctrl+Shift+p输入Sync,选择下载配置,输入token和id即可同步下载。

安装angular 需要的插件:

Angular 7 Snippets:Angular语法填充(标签)

Angular Files:生成Angular的文件模板(Component、Module、Pipe等等)

Angular Follow Selector:文件跳转(Component跳转到html、scss文件)

Angular Language Service:引用填充和跳转到定义(html中进行引用补全)

使用vscode自动生成vue代码模板

参考:https://www.cnblogs.com/binky/p/12672242.html

vscode右键打开文件

把这几个勾上就好了

vscode 总是报正在运行“Prettier - Code formatter”格式化程序(配置)。等,卸载一下vscode,重新安装一下就好了

彻底卸载vscode:

参考:https://www.cnblogs.com/muou2125/p/10388440.html

推荐阅读更多精彩内容