用 VS Code 配置和调试

前端

2023-12-08 18:22:48

在软件开发中，使用合适的工具和配置环境至关重要。作为一款流行的代码编辑器，Visual Studio Code（VS Code）提供了广泛的功能和选项，可以显著提高开发效率。本篇教程将重点介绍如何在 VS Code 中进行配置和调试。

配置

安装插件

VS Code 提供了丰富的插件市场，可以扩展其功能。推荐以下插件以增强配置和调试体验：

: 自动代码格式化
: 用于调试前端代码
: 用于调试 Node.js 代码

配置 Prettier 为编辑器默认格式化

Prettier 是一个代码格式化工具，可以自动确保代码遵循一致的风格指南。要将其配置为 VS Code 的默认格式化程序，请执行以下步骤：

安装 Prettier 插件
在 VS Code 中，打开“设置”
搜索“编辑器：默认格式化程序”
选择“Prettier”

调试

在 `.vscode` 中设置 `launch.json`

launch.json 文件用于配置调试设置。它定义了程序的启动模式和断点。要创建 launch.json 文件，请执行以下步骤：

在项目根目录中，右键单击并选择“新建文件”
命名文件为 .vscode/launch.json
粘贴以下内容：

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "Launch",
            "program": "${workspaceFolder}/app.js",
            "args": [],
            "cwd": "${workspaceFolder}",
            "sourceMaps": true,
            "outFiles": ["${workspaceFolder}/**/*.js"],
            "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/ts-node"
        }
    ]
}