vscode前端开发常用插件汇总

1.HTML Snippets

超级实用且初级的 H5代码片段以及提示

2.HTML CSS Support

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

3.Debugger for Chrome

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

https://github.com/Microsoft/vscode-chrome-debug/blob/master/images/demo.gif?raw=true

github.com

4.jQuery Code Snippets

超过130个用于JavaScript代码的jQuery代码片段。只需键入字母’jq’即可获得所有可用jQuery代码片段的列表。

5.vscode-icons

让 vscode 资源树目录加上图标

vscode-icons/vscode-icons

github.com
图标

6.Path Intellisense

自动路径补全

7.Document this

“Document This”是Visual Studio代码扩展,它自动为TypeScript和JavaScript文件生成详细的JSDoc注释。

8.ESlint

JavaScript代码检测, JavaScript代码风格检测, JavaScript代码自动格式化.

9.HTMLHint

html代码检测

10.Project Manager

在多个项目之前快速切换的工具

11.beautify

格式化代码的工具

12.Bootstrap 3 Sinnpet

常用 bootstrap 的可以下

13.Atuo Rename Tag

修改 html 标签,自动帮你完成尾部闭合标签的同步修改

formulahendry/vscode-auto-rename-tag

github.com
图标

14.GitLens

丰富的git日志插件

15.fileheader

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

16.Bracket Pair Colorizer

让括号拥有独立的颜色,易于区分。可以配合任意主题使用。

17.Class autocomplete for HTMLaessoft

扩展自动扫描一个活动的HTML文件的外部CSS样式表链接。当找到样式表时,类名被提取出来,并与Visual Studio代码的代码完成特性一起使用。

18.Code Runner

能够运行多种语言的代码片段或代码文件:C,C ++,Java,JavaScript,PHP,Python,Perl,Ruby,Go等等

19.css peek

能够查看CSS ID和类的字符串作为HTML文件中相应的CSS定义

20.Font-awesome codes for html

用于 html 的Font-awesome代码片段

21.filesize

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

22.Git History

以图表的形式查看git日志

DonJayamanne/gitHistoryVSCode

github.com
图标

23.htmltagwrap

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

24.Indenticator

突出目前的缩进深度

25.IntelliSense for CSS class names

智能提示 css 的 class 名

26.Image Preview

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

27.JavaScript (ES6) code snippets

es6代码片段

28.Live Sass Compiler

实时编译 sass

29.markdownlint

markdown 语法检查

30.open in browser

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

31.Quokka.js

wallabyjs/quokka

github.com
图标
实时观看 javascript 的变量的变化

32.TSLint

测试正则的插件

Microsoft/vscode-typescript-tslint-plugin

github.com
图标

33.vetur

语法高亮、智能感知

Vetur | Vetur

vuejs.github.io

34.VueHelper

vue代码片段

OYsun/vscode-VueHelper

github.com
图标

35.Dracula Official

主题风格

36.One Dark Pro

代码主题

  1. Color Info

提供你在 CSS 中使用颜色的相关信息

38.SVG Viewer

无需离开编辑器,便可以打开 SVG 文件并查看它们

39.TODO Highlight

能够在你的代码中标记出所有的 TODO 注释,以便更容易追踪任何未完成的业务

40.Minify

用于压缩合并 JavaScript 和 CSS 文件的应用程序
本篇博客是自己学习笔记的整理,仅供学习交流,切勿用于商业用途,如有侵权,请联系博主删除,博主QQ:1105810790

猜你喜欢

转载自blog.csdn.net/qq_41880073/article/details/114371392