我最推荐的 10 个 Visual Studio Code Web 开发扩展

介绍

Visual Studio Code（简称 VS Code）是 2021 年最流行的 Web 开发编辑器。Visual Studio Code 最令人印象深刻的功能之一是可定制性，尤其是在扩展方面。今天，我将向你展示我最喜欢的 10 个 VS Code Web 开发扩展。

安装 VS Code 和 VS Code 扩展

为了使用 VS Code 的扩展，您需要下载 VS Code。您可以点击此处下载。

要安装扩展，请按CTRL+SHIFT+X或直接点击 Visual Studio Code 的扩展图标。搜索扩展并点击“安装”。 扩展的选择仅代表我个人的看法。

1. ESLint
想要写出更好的代码？想要团队代码格式一致？那就安装 ESLint 吧。这个扩展可以配置为自动格式化代码，并在出现 linting 错误/警告时“发出警报”。VS Code 也经过了完美的配置，可以显示这些错误/警告。

链接：https://marketplace.visualstudio.com/items?itemName =dbaeumer.vscode-eslint

2. 实时服务器
在代码编辑器中进行修改，切换到浏览器，然后刷新即可查看更改。对于开发人员来说，这无休止地重复着这些步骤，但如果您的浏览器能够在每次修改后自动刷新，那会怎样？这就是实时服务器的用武之地！只需点击一下按钮，您的网站即可在本地启动并运行。它可在您的编辑器中实时预览我们的 Web 应用程序。

链接：https://marketplace.visualstudio.com/items?itemName =ritwickdey.LiveServer

3. Prettier - 代码格式化程序
Prettier 是格式化和提高效率的救星。在设置中配置后，Prettier 会在保存时格式化您的文件。与其每天花费数小时让代码看起来干净利落，不如使用 Prettier。此扩展程序可以对 JavaScript、CSS 和 HTML 代码进行格式化。

再也不用担心格式化！

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

4. Material Icon Theme
喜欢 Google 的 Material Design 吗？那就来看看这个 Material 主题图标包吧。里面有数百个不同的图标，看起来都很棒！

链接：https://marketplace.visualstudio.com/items? itemName=PKief.material-icon-theme

5. 更好的评论
此扩展程序可帮助您创建更加人性化且易于阅读的评论。

链接：https://marketplace.visualstudio.com/items?itemName =aaron-bond.better-comments

6. 路径智能感知
记住特定的文件名和文件所在的目录可能会很棘手。此扩展程序将为您提供智能感知功能。当您开始在引号中输入路径时，您将获得目录和文件名的智能感知。这将节省您在文件资源管理器中花费的大量时间。

链接： https: //marketplace.visualstudio.com/items ?itemName=christian-kohler.path-intellisense

7. Polacode
你知道在文章和推文中看到的那些花哨的代码截图吗？嗯，它们很可能来自 Polacode。它使用起来非常简单。将一段代码复制到剪贴板，打开扩展程序，粘贴代码，然后点击保存图片！

链接：https://marketplace.visualstudio.com/items? itemName=pnp.polacode

8. Chrome 调试器
信不信由你，调试 JavaScript 不仅仅是编写 console.log() 语句（尽管这已经够多了）。Chrome 内置了一些功能，让调试体验更加出色。这款扩展将强大的 Chrome 调试器直接引入了 Visual Studio Code。它对于前端开发人员进行测试和调试非常有用。

链接：https://marketplace.visualstudio.com/items?itemName =msjsdiag.debugger-for-chrome

9. Bracket Pair Colorizo​​r
扩展程序会为匹配的括号和圆括号赋予相同的颜色。它可以避免你花费太多时间寻找正确的右括号。如果你使用的语言使用括号而不是缩进（抱歉，Python 用户），那么这个扩展程序必不可少。

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

10. 设置同步
包括我在内的开发人员花费大量时间自定义开发环境，尤其是文本编辑器。使用“设置同步”扩展程序，您可以将设置保存在 Github 中。然后，只需一个命令即可将它们加载到任何新版本的 VS Code 中。再也不会因为设置错误而无法使用！

链接：https://marketplace.visualstudio.com/items?itemName =Shan.code-settings-sync

结论

希望这篇文章能对你的 Web 开发有所帮助。感谢阅读。