Visual Studio 代码概述Visual Studio Code overview

Visual Studio Code是一个轻型但功能强大的源代码编辑器。Visual Studio Code is a lightweight, but powerful source code editor. Visual Studio Code适用于 Windows、Linux 和 macOS。Visual Studio Code is available for Windows, Linux, and macOS. 它包括对 JavaScript、TypeScript 和 Node.js 的内置支持,因此在自定义之前,它是 Web 开发人员的一个很好的工具。It includes built-in support for JavaScript, TypeScript, and Node.js, so it is a great tool for web developers before you customize it. 如果尚未使用它,请下载Visual Studio Code。If you are not using it yet, download Visual Studio Code.

ExtensionsExtensions

若要获取下面突出显示的任何扩展,请在 Windows/Linux 或 Visual Studio Code 中的 Ctrl + Shift + X Command + Shift + macOS) 上导航到扩展 X \ (选择。To acquire any of the extensions highlighted below, navigate to Extensions (select Ctrl+Shift+X on Windows/Linux or Command+Shift+X on macOS) in Visual Studio Code.

在 Marketplace 中搜索特定扩展,然后选择"安装 "。Search the Marketplace for the specific extension and choose Install.

安装调试器Microsoft Edge Visual Studio Code扩展

调试程序Microsoft EdgeDebugger for Microsoft Edge

使用调试器 for Microsoft Edge Visual Studio Code 扩展,可以分行调试前端 JavaScript 代码,并直接从 Visual Studio Code console.log() 查看语句With the Debugger for Microsoft Edge Visual Studio Code extension, debug your front-end JavaScript code line-by-line and see console.log() statements directly from Visual Studio Code.

使用调试器工具,你可以启动或附加到 Microsoft Edge \ (EdgeHTML) 和 Microsoft Edge \ (Chromium) 。Using the Debugger tool, you may launch or attach to both Microsoft Edge (EdgeHTML) and Microsoft Edge (Chromium). 有关从配置和示例配置Microsoft Edge调试Visual Studio Code演练,请导航到调试 launch.json 器 For Microsoft Edge Visual Studio Code ExtensionFor a walkthrough of debugging Microsoft Edge from Visual Studio Code and sample launch.json configurations, navigate to Debugger For Microsoft Edge Visual Studio Code Extension. 选择以下图像以查看扩展的操作。Choose the following image to see the extension in action.

适用于 Edge Visual Studio Code的调试器在操作中

Microsoft Edge工具Visual Studio CodeMicrosoft Edge Tools for Visual Studio Code

使用Microsoft Edge Tools for Visual Studio Code Visual Studio Code 扩展,请使用 Microsoft Edge**** 浏览器的 Elements Visual Studio Code。With the Microsoft Edge Tools for Visual Studio Code Visual Studio Code extension, use the Elements tool of the Microsoft Edge browser within Visual Studio Code. 用于以下操作。Use it for the following actions.

  • 附加到实例或启动 Microsoft Edge。Attach to an instance or launch an instance of Microsoft Edge.
  • 显示运行时 HTML 结构。Display the runtime HTML structure.
  • 更新布局。Update the layout.
  • 修复样式设置问题。Fix styling issues.

有关详细信息,请导航到 Microsoft Edge Tools for Visual Studio Code Visual Studio Code extensionFor more information, navigate to Microsoft Edge Tools for Visual Studio Code Visual Studio Code extension.

Microsoft Edge适用于Visual Studio Code Visual Studio Code扩展的工具

webhintwebhint

使用 Webhint(一个可自定义的 Lint 工具)可改进网站的以下功能。Use webhint, a customizable linting tool, to improve the following functionality of your site.

  • 辅助功能Accessibility
  • 性能Performance
  • 跨浏览器兼容性Cross-browser compatibility
  • PWA兼容性PWA compatibility
  • 安全性Security

它会检查代码的编码实践和常见错误。It checks your code for coding practices and common errors. Webhint 开放源代码项目(最初由 Microsoft Edge 开发)现在是OpenJS Foundation 的一部分The webhint open-source project, initially developed by the Microsoft Edge team, is now part of the OpenJS Foundation. 该Microsoft Edge团队将继续与社区中的 Web 开发人员一起为 webhint 做贡献。The Microsoft Edge team continues to contribute to webhint alongside web developers in the community.

Webhint 扩展Visual Studio Code屏幕截图

通过添加webhint扩展以识别并修复网站中Visual Studio Code。Identify and fix problems in your website by adding the webhint extension for Visual Studio Code. 提示检查 HTML、CSS、JavaScript、TypeScript 等。Hints examine HTML, CSS, JavaScript, TypeScript, and more. 提示显示为内联下划线,并汇总在"问题 " 窗格中。Hints appear as inline underlines and are summarized in the Problems pane.

有关详细信息,请导航到"如何使用webhint Visual Studio Code"。For more information, navigate to How to use webhint in Visual Studio Code.