vscode插件-前端开发

215 阅读3分钟

引自:https://zhuanlan.zhihu.com/p/57389333

1. HTML Snippets

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

2. HTML CSS Support

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

3. Debugger for Chrome

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

4. jQuery Code Snippets

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

5. vscode-icons

让 vscode 资源树目录加上图标

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 标签,自动帮你完成尾部闭合标签的同步修改

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日志

23. htmltagwrap

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

24. Indenticator

突出目前的缩进深度

25. IntelliSense for CSS class names

智能提示 css 的 class 名

26. Image Preview

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

27. JavaScript (ES6) code snippets

代码片段

28. Live Sass Compiler

实时编译 sass

29. markdownlint

markdown 语法检查

30. open in browser

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

31. Quokka.js

实时观看 javascript 的变量的变化

32. TSLint

测试正则的插件

33. vetur

语法高亮、智能感知

34. VueHelper

vue代码片段

35. Dracula Official

主题风格

36. One Dark Pro

代码主题

37. Color Info

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

38. SVG Viewer

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

39. TODO Highlight

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

40. Minify

用于压缩合并 JavaScript 和 CSS 文件的应用程序