软件开发 --- VSCode 之初体验

原创

GKLBB 2024-12-16 11:20:06 ©著作权

文章标签 g++ 快捷键 json 文章分类 Html/CSS 前端开发

©著作权归作者所有：来自51CTO博客作者GKLBB的原创作品，请联系作者获取转载授权，否则将追究法律责任

VSCode 用法举例

Visual Studio Code (VSCode) 是一个轻量级但功能强大的开源代码编辑器，广泛用于开发各种编程语言的项目。VSCode 通过丰富的插件和扩展支持几乎所有主流编程语言和工具。它具有强大的代码补全、调试功能、版本控制集成以及灵活的自定义功能。下面我将通过几个常见的使用场景，介绍如何在 VSCode 中进行开发。

示例 1：创建和编辑 JavaScript 项目

1.1 安装 VSCode 和 Node.js

首先，确保你的计算机上安装了 Node.js。Node.js 包括 npm（Node 包管理器），它是管理 JavaScript 库和工具的基础。
下载并安装 VSCode。

1.2 创建 JavaScript 项目

打开 VSCode，点击 File -> Open Folder，选择或创建一个文件夹作为你的项目目录。
在 VSCode 中创建一个新的 JavaScript 文件 app.js。

console.log("Hello, VSCode!");

1.3 运行 JavaScript 程序

打开终端：点击 Terminal -> New Terminal（或者快捷键 Ctrl + ）。
在终端中运行以下命令：

node app.js

你会看到输出：Hello, VSCode!。

1.4 使用代码补全和语法高亮

在你编写代码时，VSCode 会自动提供代码补全建议。例如，当你输入 console. 时，它会提示出 log()、warn() 等方法。
代码会根据文件类型自动应用语法高亮。如果你没有看到高亮，检查文件类型是否设置为 JavaScript（右下角）。

示例 2：安装插件和扩展

VSCode 支持通过插件来扩展功能，支持各种语言和工具（如 Python、Java、Git、Docker 等）。下面是如何安装和使用插件。

2.1 安装插件

点击左侧栏的 Extensions 图标（或按快捷键 Ctrl+Shift+X）打开扩展商店。
搜索你需要的插件。例如，如果你需要为 JavaScript 提供更好的支持，可以搜索 ESLint 插件，或者为 Python 开发安装 Python 插件。

2.2 配置插件

安装完成后，某些插件可能需要配置。例如，ESLint 插件用于 JavaScript 的代码风格检查，默认情况下，它会提示你自动修复代码中的问题。

你可以通过点击文件中的警告并选择 Fix all auto-fixable problems 来自动修复代码问题。

示例 3：使用 Git 集成

VSCode 集成了 Git，可以轻松管理项目中的版本控制。

3.1 初始化 Git 仓库

打开你的项目文件夹，点击左侧栏的 Source Control 图标（或按 Ctrl+Shift+G）。
如果你的项目没有 Git 仓库，VSCode 会提示你初始化一个 Git 仓库。点击 Initialize Repository 按钮。

3.2 提交更改

你可以在 Source Control 面板中看到项目的更改（例如新添加的文件或修改过的文件）。
输入提交信息，例如：“Initial commit”。
点击 ✔ 按钮提交代码。

3.3 推送到远程仓库

在 VSCode 中打开 Source Control 面板。
点击 ...（更多操作）按钮，选择 Push，然后选择远程仓库（如 GitHub）进行推送。

示例 4：调试 JavaScript 代码

VSCode 提供强大的调试功能，支持设置断点、查看变量、堆栈跟踪等。

4.1 配置调试环境

在 app.js 文件中设置一个简单的函数：

function greet(name) {
    console.log(`Hello, ${name}!`);
}

greet("VSCode");

在你想设置断点的行上点击行号（例如，在 greet("VSCode") 这一行上）。
打开 Run 面板（左侧栏的播放按钮图标），点击 Run and Debug，选择 Node.js（因为我们在运行 JavaScript）。

4.2 调试代码

点击绿色的 Start Debugging 按钮（或者使用快捷键 F5）。
调试过程会在 VSCode 中停止，你可以查看 Variables、Watch、Call Stack 等面板，逐步执行代码，检查变量值等。

示例 5：使用 VSCode 的 Jupyter Notebook 支持

如果你从事 Python 开发，尤其是数据科学工作，VSCode 提供了对 Jupyter Notebook 的支持，可以让你在编辑器中直接运行和调试代码。

5.1 安装 Jupyter 插件

在 Extensions 面板中，搜索并安装 Jupyter 插件。
安装完成后，VSCode 会自动启用 Jupyter 支持。

5.2 打开或创建 Notebook

在 File 菜单中选择 New File，然后保存文件为 .ipynb 格式，或者直接打开现有的 .ipynb 文件。
你可以像在 Jupyter Notebook 中一样输入代码，按 Shift+Enter 运行代码块。

示例 6：使用 Live Server 插件

如果你正在开发前端项目，使用 Live Server 插件可以方便地查看你的 HTML 文件的实时预览。

6.1 安装 Live Server 插件

打开 Extensions 面板，搜索 Live Server 并安装它。

6.2 启动本地开发服务器

右键点击你的 HTML 文件，选择 Open with Live Server。
VSCode 会启动一个本地开发服务器，并自动在浏览器中打开文件。每当你保存文件时，浏览器会自动刷新，实时显示你的更改。

示例 7：自定义设置

VSCode 允许你通过 Settings 面板进行个性化配置。

7.1 修改主题

点击 File -> Preferences -> Color Theme，然后选择你喜欢的主题（如 Dark+、Light+、Solarized 等）。
你也可以在 Settings 中搜索和更改其他设置，如字体大小、行号显示等。

7.2 配置快捷键

点击 File -> Preferences -> Keyboard Shortcuts，你可以查看所有默认快捷键，并自定义自己常用的快捷键。

总结

VSCode 是一个轻量级但功能强大的代码编辑器，适用于各种编程语言的开发，尤其在前端开发和 JavaScript 开发方面表现出色。其优势包括：

代码编辑和补全：通过插件支持多种编程语言，智能代码补全。
集成版本控制：与 Git 无缝集成，便于版本管理。
调试功能：支持断点、变量查看、堆栈跟踪等功能，方便调试。
插件支持：通过插件扩展功能，支持各种开发工具（如 Docker、Jupyter、Live Server 等）。
自定义设置：可以自定义主题、快捷键、代码风格等。

VSCode 的这些功能使其成为开发者日常使用的强大工具。

使用 VSCode 开发一个 C++ 程序

以下是一步一步的指导，帮助你在 Visual Studio Code (VSCode) 中创建并编译一个 C++ 程序。

第 1 步：安装 VSCode 和必需的插件

下载并安装 VSCode：

访问 Visual Studio Code 官方网站下载并安装 VSCode。

安装 C++ 插件：

打开 VSCode，点击左侧边栏的扩展图标（或者使用快捷键 Ctrl + Shift + X）。
在搜索框中输入 C++，找到并安装 C/C++ 插件，作者为 Microsoft。
这个插件提供了 C++ 的智能提示、调试、代码导航等功能。

安装 C++ 编译器：

如果你还没有安装 C++ 编译器，可以安装以下工具：

Windows: 安装 MinGW 或者使用 Visual Studio 的 MSVC 编译器。
macOS: 使用命令 xcode-select --install 安装 Xcode 命令行工具，其中包含 g++ 编译器。
Linux: 使用命令 sudo apt install g++ 安装 GCC 编译器。

第 2 步：设置 VSCode 工作区

打开 VSCode，点击 文件 -> 打开文件夹，然后选择你想要保存 C++ 项目的文件夹。
在 VSCode 中创建 C++ 文件：

右键点击工作区中的文件夹，选择 新建文件，并命名为 main.cpp（或者你可以使用任何其他名称）。

第 3 步：编写 C++ 程序

在 main.cpp 文件中编写一个简单的 C++ 程序：

#include <iostream>

using namespace std;

int main() {
    cout << "Hello, VSCode!" << endl;
    return 0;
}

第 4 步：配置 C++ 编译和调试环境

为了在 VSCode 中编译和调试 C++ 代码，你需要设置一些配置文件。

4.1 配置任务（tasks.json）

点击 终端 -> 配置任务 -> 创建任务。
选择其他，然后选择 C++ (GCC)（假设你已经安装了 g++ 编译器）。这将会为你创建一个名为 tasks.json 的文件，配置 C++ 编译选项。

如果你没有看到 C++ (GCC) 选项，你也可以手动编辑 tasks.json。点击 终端 -> 配置任务，然后选择 创建任务，手动填写以下配置：

{
    "version": "2.0.0",
    "tasks": [
        {
            "label": "build",
            "type": "shell",
            "command": "/usr/bin/g++",  // macOS/Linux 下的 g++ 编译器路径
            //"command": "C:\\MinGW\\bin\\g++.exe",  // Windows 下的 g++ 编译器路径
            "args": [
                "-g",                 // 生成调试信息
                "main.cpp",           // 输入文件
                "-o", "main"          // 输出文件
            ],
            "group": {
                "kind": "build",
                "isDefault": true
            },
            "problemMatcher": ["$gcc"],
            "detail": "Generated task by VSCode"
        }
    ]
}

4.2 配置调试（launch.json）

点击左侧的运行图标，进入 Run and Debug 面板。
点击 创建 a launch.json 文件，选择 C++ (GDB/LLDB) 。
根据你的操作系统进行配置：

Windows:

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Debug (g++)",
            "type": "cppdbg",
            "request": "launch",
            "program": "${workspaceFolder}/main.exe",
            "args": [],
            "stopAtEntry": false,
            "cwd": "${workspaceFolder}",
            "environment": [],
            "externalConsole": true,
            "MIMode": "gdb",
            "setupCommands": [
                {
                    "description": "Enable pretty-printing for gdb",
                    "text": "-enable-pretty-printing",
                    "ignoreFailures": true
                }
            ],
            "miDebuggerPath": "C:/MinGW/bin/gdb.exe", // 这里使用 MinGW 的 gdb 调试器
            "preLaunchTask": "build", // 在调试之前运行编译任务
            "miDebuggerArgs": "",
            "logging": {
                "moduleLoad": false,
                "trace": false,
                "engineLogging": false
            },
            "serverStarted": "",
            "filterStderr": false,
            "filterStdout": false
        }
    ]
}

macOS/Linux:

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Debug (g++)",
            "type": "cppdbg",
            "request": "launch",
            "program": "${workspaceFolder}/main",
            "args": [],
            "stopAtEntry": false,
            "cwd": "${workspaceFolder}",
            "environment": [],
            "externalConsole": true,
            "MIMode": "gdb",
            "setupCommands": [
                {
                    "description": "Enable pretty-printing for gdb",
                    "text": "-enable-pretty-printing",
                    "ignoreFailures": true
                }
            ],
            "miDebuggerPath": "/usr/bin/gdb", // Linux 下的 gdb 路径
            "preLaunchTask": "build", // 在调试之前运行编译任务
            "miDebuggerArgs": "",
            "logging": {
                "moduleLoad": false,
                "trace": false,
                "engineLogging": false
            },
            "serverStarted": "",
            "filterStderr": false,
            "filterStdout": false
        }
    ]
}

4.3 配置文件概述

tasks.json：定义了编译 C++ 程序所需的命令。这里我们使用 g++ 来编译 main.cpp 文件并生成可执行文件 main（Windows 上为 main.exe）。
launch.json：定义了调试配置。当你按下调试按钮时，VSCode 会根据 launch.json 中的配置启动调试器。