本文介绍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)
图片