我最喜欢的 VSCode 扩展

这当然不是第一次有人列出他们最喜欢的 VSCode 扩展，也不会是最后一次，但这些是我的！我将从一些我最喜欢的 JS 相关扩展开始，然后再介绍 HTML/CSS 助手。

我从所有扩展程序中最神圣的那个开始。我发誓，这个扩展程序救了我的命。

JS 和朋友们

括号对着色器

这个扩展名的功能正如其名。它看起来可能没什么特别之处，但想想看，在处理一些深度嵌套的代码或大型文件时，它能带来什么好处。

没有括号对着色器的生活：

支架对着色器的生活：

每对括号、花括号和圆括号都有自己的颜色，这使得您可以很容易地识别可能出现“糟糕”的地方。

哇，这看起来已经很棒了，但等等——还有更多。将光标移动到第一个括号内，会绘制一条（相同颜色）与其对应的线。

简单的 React 代码片段/ Next.js 代码片段

编写样板代码需要很长时间。这很烦人。简单的 React Snippet 和 Next.js Snippet 可以减轻这种样板代码的痛苦。

带有简单 React 代码片段的功能组件和 Hooks

Next.js 代码片段

这两个扩展都有大量的片段，但我没有时间制作那么多 gif！

JavaScript（ES6）代码片段
这个与简单的 React 代码片段非常相似，但适用于普通的、原始的 JavaScript。

这些是我最常用的，但还有很多其他的。值得一提的包括：

• sti用于setInterval设置
• thenc添加.then()并.catch()遵守承诺。
• clg对于console.log()

模板字符串转换器

这个插件虽然小巧，但功能强大（实用）。只要你${}在单引号或双引号内输入内容，它就会自动将其转换为反引号。

HTML 和 CSS

VSCode 本身就非常擅长处理 HTML 和 CSS。*您可以使用它html:5来获取一些可靠的 HTML 样板。

• 输入后a您将获得打开和关闭链接标签。
• 输入后div您将获得打开和关闭链接标签。
• VSCode 为您自动完成 CSS 属性。
• 最新的 VSCode 更新允许您同时编辑开始和结束标签 (😍)。

不过还是有一些好帮手的！

HTML 标签包装器

一直以来，把已经写好的代码用新标签包裹起来都让我抓狂，不过现在终于有办法了。高亮显示，Ctrl + I，噩梦就结束了。

CSS 代码片段

没错，更多代码片段！哪个开发者不喜欢少写代码呢？

此片段列表的长度只有《权力的游戏》一书可以与之媲美。

实时 Sass 编译器

最后但同样重要的是，Live Sass Compiler！当然，你可以在终端里用一两个命令启动它，或者你也可以直接点击这个：

完全取决于你，但我知道我更愿意做什么。

这就是我目前最喜欢的扩展列表。欢迎在评论区分享你最喜欢的扩展！我一直在我的扩展宝库里寻找新的珍宝。