vscode 好用插件

1,624 阅读2分钟

1. vscode-icons

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

2. Auto Rename Tag

自动修改匹配的 HTML 标签。

3. Auto Close Tag

自动添加HTML/XML关闭标签,与Visual Studio IDE或SublimeText相同。当我们填写了开始标签,结束标签就会被自动加上。这个非常实用,减少很多我们写html和xml的时间

4. Bracket Pair Colorizer

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

5.Highlight Matching Tag

高亮对应的 HTML 标签和标识出对应的各种括号的功能。

6.Path Intellisense

智能路径提示,可以在你输入文件路径时智能提示。

7.Markdown Preview

实时预览 markdown。

8.Prettier

大名鼎鼎的 格式化插件

9.Turbo Console Log

快捷添加 console.log,一键 注释 / 启用 / 删除 所有 console.log。

使用快捷键:

  • ctrl + alt + l 选中变量之后,使用这个快捷键生成 console.log
  • alt + shift + c 注释所有 console.log
  • alt + shift + u 启用所有 console.log
  • alt + shift + d 删除所有 console.log

10.GitLens

详细的 Git 提交日志。

11.CSS Peek

定位 CSS 类名。

12.vscode-json

处理 JSON 文件,用法看图

13.TODO Highlight

高亮 TODO,FIXME、还可以自己配置要高亮的关键字。

14.Code Spell Checker

它是一款拼写检查程序,可以为开发者报告一些常见的拼写错误。它很适合驼峰式代码

15.Color Highlight

这个扩展可以风格化在你的文件中找到的 css/web 颜色,所以你无需打开页面就能看到它们是什么颜色

16.VSCode Highlight Matching Tag

高亮匹对标签 此插件高亮显示匹对的开始和/或结束标签。还可以在状态栏中显示标签的路径。这个插件将尝试在任何地方匹配标记: 从标记属性、字符串内部、任何文件,同时还提供广泛的样式选项来定制标记的高亮显示方式。 官方支持的标签: HTML和JSX。其他风格 (XML、Vue、Angular、PHP) 也可以。

17.npm

NPM支持

18.npm Intellisense

NPM智能提示

19.Import Cost

成本提示。 Import Cost 这个扩展简直惊艳到我了,之前写代码的时候很少有关注导入包的大小。只有在后期优化的时候才考虑这些问题。但是这个插件可以在你导入包的时候就提示这个包有多大。

20. eslint

21.Material Theme Icons

22.Material Theme