launch.json 将 VS Code 转变为完整的 Web 开发 IDE

这些天，当我开始一个新项目时，我会创建以下 launch.json 文件并将其放入项目根目录下的 .vscode 文件夹中。

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "pwa-msedge",
            "request": "launch",

            "name": "webdebug",
            "url": "http://localhost:8080",
            "webRoot": "${workspaceFolder}",
            "runtimeExecutable": "stable",
            "runtimeArgs": ["--headless"]
        }
    ]
}

这将使 Visual Studio Code 成为一个环境，它提供了我构建 Web 产品所需的一切，无需离开它。如果您想尝试一下，可以使用我最基本的 vanilla JS ToDo 应用作为示例，它已经拥有正确的launch.json.

看起来是这样的：

步骤 1：使用内置终端

Visual Studio Code 内置了终端，可用于启动服务器。您还可以在这里运行构建脚本或进行版本控制。不过，内置版本控制可能更方便。

第 2 步：启动浏览器调试会话

激活Run and Debug并启动调试会话会为该项目打开一个专用的浏览器实例。这意味着您每次都能获得一个干净整洁的浏览器。当然，localhost:8080如果您需要依赖扩展程序或登录数据，也可以使用其他浏览器。当调试工具栏出现并且编辑器下边框颜色发生变化时，您可以看到调试会话正在运行。在我的例子中，颜色从蓝色变为橙色。

步骤3：打开开发者工具

激活开发人员工具图标将打开 Visual Studio Code 内的浏览器开发人员工具。

现在，您可以执行浏览器中的所有操作，而无需离开编辑器上下文。这允许您使用源代码旁边的开发者工具来更改 DOM 和 CSS。

步骤 4：打开截屏视频

激活截屏按钮后，Visual Studio Code 中会显示一个新面板，用于显示浏览器渲染效果。这是一个交互式浏览器窗口，您可以将截屏标签页移动到 Visual Studio Code 中的任何位置。您还可以模拟不同的移动环境，浏览器会设置正确的用户代理并模拟触摸界面。

步骤 5：使用功能

一旦这一切运行起来，你就拥有了构建和调试我的 Web 项目所需的所有功能。你将获得：

开发人员工具和源代码之间的完全双向交互。

如果您更改了元素的 CSS，VS Code 会跳转到项目中的正确文件并复制更改。它不会自动保存文件。这是为了防止自动触发构建脚本，您可能需要尝试多次更改才能达到预期结果。不过，更改会实时显示在截屏视频中。

对代码进行内联 linting。

如果您的代码有问题，Visual Studio Code 会为其添加波浪下划线。您可以滚动鼠标，查看代码，了解问题原因以及如何修复。如果您编写了代码，Visual Studio Code 会自动检查，并提示您存在错误以及如何修复。您还可以使用“问题”面板查看项目中的所有问题。

Visual Studio Code 中的浏览器控制台

Visual Studio Code 中的调试控制台现在是您的浏览器开发者工具控制台。您可以在那里查看 console.log() 消息。您可以完全访问 window 对象，并可以使用 DOM 便捷方法和快捷方式。

断点调试

由于处于调试会话中，您可以进行完整的断点调试。您可以设置断点，与项目交互，并逐步执行脚本。在逐步执行过程中，您会获得内联信息，并且在您分析正在发生的事情时，执行会暂停。

关闭调试会话将关闭浏览器

完成后，您可以点击调试栏中的停止按钮，一切将恢复原状。无需关闭浏览器窗口或开发者工具会话。

带注释的 launch.json 文件

{
    "version": "0.2.0",
    "configurations": [
        {
            // Launch Microsoft Edge in the background
            "type": "pwa-msedge",
            "request": "launch",
            // Use the stable branch of Microsoft Edge
            "runtimeExecutable": "stable",
            // run it as headless (no window)
            "runtimeArgs": ["--headless"],
            // name of the debugging session
            "name": "webdebug",
            // Open the address localhost:8080
            // This needs to run - I use the http-server
            // npm package
            "url": "http://localhost:8080",
            // Open the workspace at the root of the server
            "webRoot": "${workspaceFolder}"
        }
    ]
}

缺少什么了吗？

我们正在为此进行一些改进，这些改进将在接下来的几个版本中上线。具体来说，我们正在进行以下改进：

• Sourcemap 支持调试 Sass/Less 文件
• 问题报告的过滤选项
• 自动修复建议
• 集成到 Visual Studio

如果您有任何好的想法，请随时与我联系或在官方 GitHub 存储库上提交问题。