面向 Web 开发人员的 15 个最佳 Visual Studio Code 扩展

2022-08-19 17:50 作者:傻大个科技 0人读过 | 我要投稿

Visual Studio Code 是用于构建现代 Web 应用程序的源代码编辑器。它是一个免费的开源编辑器。它支持许多可用于 Web 应用程序开发的扩展。今天的分享中，傻大个黑科技小妹为您分享15个最佳的 VSCode web 开发扩展：

Live Sass compiler

与 Visual Studio 扩展等其他编译器相比，此 VS Code 扩展用于将 SCSS 文件快速编译为 CSS 文件。这对于 Web 开发人员在使用 SCSS 文件开发网页时非常方便。

https://marketplace.visualstudio.com/items?itemName=ritwickdey.live-sass

Debugger for Chrome

此扩展用于在 Google Chrome 浏览器中为 Visual Studio Code 环境中的网页调试 JavaScript 代码。这个扩展比用于调试 JavaScript 代码的 Chrome 控制台方便得多。为此，首先安装扩展，然后设置lauch.json设置以调试您要调查的特定网页。

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

C＃

此扩展用于在 Visual Studio Code 编辑器中使用 C# 开发 Web 应用程序。通过使用此扩展，您可以使用 C# 代码开发和访问功能，如 Go to Definition、Find All Reference、IntelliSense 等，这些功能通常在 Visual Studio 等源编辑器中可用。

https://marketplace.visualstudio.com/items?itemName=ms-dotnettools.csharp

Live Server

此扩展用于启动具有静态和动态页面实时重新加载功能的开发本地服务器。只需在 VS 代码中进行更改并保存文件，就可以节省预览对源代码所做更改的时间。这将自动刷新浏览器并反映您在其中所做的更改，而不是我们手动刷新浏览器页面。

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

ESLint

此扩展用于分析您的 JavaScript 代码并修复其中的错误。您可以安装和编辑您的 JS 代码以修复指出的错误。您可以在以下链接中找到有关 ESLint 安装和使用的详细信息。

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

Beautify

此扩展名用于格式化 HTML 等文件。这些文件中的未格式化代码通过此扩展名转换为格式化的可读代码。您可以在 VS Code 首选项中设置此设置，然后它将自动格式化您在编辑器中键入的所有代码。

https://marketplace.visualstudio.com/items?itemName=HookyQR.beautify

Better Comments

此扩展用于区分注释类型，如警告、错误、突出显示和查询，以提高代码的可读性和可理解性。

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

Quokka

此扩展用于在 Visual Studio 代码编辑器本身中测试 JavaScript 代码，而不是在浏览器控制台中检出它。

https://marketplace.visualstudio.com/items?itemName=WallabyJs.quokka-vscode

Polacode

此扩展用于获取代码片段屏幕截图。它可用于在片段屏幕截图中轻松复制和粘贴您需要的代码，并在安装扩展程序后保存它们。

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

Path IntelliSense

此扩展用于显示项目文件路径的提示。这在处理包含大量文件的项目时会派上用场。

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

Browser Preview

这个扩展用于在 VS Code 编辑器中打开一个真实的浏览器来调试和检查你对代码所做的更改，而不是每次都在浏览器上检查它们。

https://marketplace.visualstudio.com/items?itemName=auchenberg.vscode-browser-preview

JavaScript (ES6) Code Snippets

此扩展用于为 JavaScript 代码设置快捷方式触发器，可用于调用完整代码，而不是在每个实例上输入代码。这在处理具有大量代码的项目时很有用。

https://marketplace.visualstudio.com/items?itemName=xabikos.JavaScriptSnippets

Settings Sync

此扩展用于将您的设置保存在编辑器中以在新机器中恢复它们，而不是每次都配置它们。这对于在编辑器中设置自定义开发环境很有用。使用此扩展，我们可以将设置上传到 GitHub 位置，然后将它们恢复到新机器上供编辑使用。

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

GitLens

此扩展用于从可在 VS 环境中编辑的 Git 源获取信息。可以在 VS 代码本身内部查看来自 Git 存储库文件的提交日志、文件历史记录等，这也节省了时间。

https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens

Web Dev

此扩展是 Web 开发所需的多个扩展的组合。此扩展包括一些主要扩展，例如Live Server、ESLint和JavaScript (ES6) Code Snippets。我们可以安装 Web Dev 扩展，而不是单独安装这些扩展。

https://marketplace.visualstudio.com

标签：