五个不容错过的VS Code杀手级插件

2024年 1月 25日 48.6k 0

本文介绍5个非常实用的VS Code插件。

1. Prettier

安装链接:https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode

Prettier 是一个代码格式化程序,它会自动格式化代码,使代码看起来更“漂亮”;还会修复代码中的任何多余空格或不均匀的括号。

2. Bracket Pair Colorizer

安装链接:https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer-2

Bracket Pair Colorizer 可以帮助开发者快速查找括号、括号和大括号,它通过为每个匹配的括号对分配不同的颜色来实现这一点。当光标位于一对括号内时,Bracket Pair Colorizer 会显示一条与括号对相同颜色的线条,将它们连接在一起,从而帮助识别每个开放括号的相应闭合括号的位置。

图片图片

此插件可以提高编码效率,减少由于括号错误导致的 bug。

3. Auto Rename Tag

安装链接:https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag

Auto Rename Tag 非常实用,可以为开发人员节省很多时间和精力。它可以同时编辑开放标签和关闭标签的标签类型,使编写 HTML 标签变得更加轻松快捷。而且,当开发人员在开放标签中按下空格键时,第二个标签将停止复制,因此开发人员可以方便地为标签添加类名、href、ID 等属性。这个插件可以大大提高开发效率,减少编写错误的几率,是 Web 开发人员的必备工具。

图片图片

4. VSCode-Icons

安装链接:https://marketplace.visualstudio.com/items?itemName=vscode-icons-team.vscode-icons

如果你非常在乎软件界面的视觉效果,那么会喜欢这个插件。这是一个为文件提供更多图标的扩展包,它可以帮助开发人员更快地识别和区分不同类型的文件。即使原来没有对应的唯一图标,这个扩展包也会为不同类型的文件提供更多的图标。这样一来,开发人员就可以更轻松地在多个文件之间进行切换和管理了。

以下是图标的示例:

图片图片

5. CSS Peek

安装链接:https://marketplace.visualstudio.com/items?itemName=pranaygp.vscode-css-peek

CSS Peek 允许开发人员在正在悬停的当前元素上查看所有 CSS 信息。这可以节省很多时间,同时在编码 HTML 或 JS 文件时允许更改 CSS 文件。它还可以用于仅查看和参考使用 CSS 显示的特定代码片段的方式。

  • Peek:内联加载 CSS 文件并做快速编辑(Ctrl/Command+Shift+F12)
  • Go To:直接转到 CSS 文件或在新编辑器中打开它(F12)

图片图片

相关文章

JavaScript2024新功能:Object.groupBy、正则表达式v标志
PHP trim 函数对多字节字符的使用和限制
新函数 json_validate() 、randomizer 类扩展…20 个PHP 8.3 新特性全面解析
使用HTMX为WordPress增效:如何在不使用复杂框架的情况下增强平台功能
为React 19做准备:WordPress 6.6用户指南
如何删除WordPress中的所有评论

发布评论