详解.vscode文件夹

在我们使用VSCode开发项目的时候，在根目录中经常会出现一个.vscode文件夹，它是干什么的？

总所周知，VSCode 的配置分两类

• 全局的用户配置
• 当前工作区配置

VSCode打开的文件夹的根目录是一个工作区，.vscode目录就是存放当前工作区相关配置文件的目录，这样分享项目时，也把该项目的 VSCode 配置分享出去了，保证了协同工作开发环境的统一性。

vscode目录下一般有 4 种配置文件和项目中的代码片段。

• extensions.json：推荐当前项目使用的插件
• setting.json：vscode编辑器和插件的相关配置
• launch.json：调试配置文件
• task.json：任务配置
• xxxxxxx.code-snippets：项目中共享的代码片段

extensions.json

可以将插件添加到该项目的推荐列表中。

在拓展中所有我们需要添加的插件，如下图

点击插件的“设置”按钮，选择“添加到工作区建议”

生成 extensions.json 文件

{
  "recommendations": ["dbaeumer.vscode-eslint"]
}

以后，别人拿到我们的项目，就可以直接安装项目中推荐的扩展插件

点击“推荐”，列表会显示我们在 extensions.json 文件中添加的插件列表，我们也可以反向移除插件。

代码片段

对于一些重复代码，我们可以在 vscode 中配置用户代码片段，方便一键生成。

代码片段有用户级别的，也有项目级别的。

• 用户级别，比如你换了台电脑，就可以将自己之前保存的代码片段共享过来
• 项目级别的就是便于团队成员之间使用。

创建代码片段

在 `.vscode` 中，你可以创建代码片段（snippets）以提高开发效率。这些代码片段可以包含变量、占位符和上下文信息，帮助开发者快速编写代码，避免重复工作。用户可以自定义代码片段以适应特定的项目需求或个人习惯。

在vscode左下角，点击设置按钮，选择新建用户代码片段：

选择工作区（可以项目级别的代码片段，也可以全局代码片段）

VSCode中的代码片段有固定的 json 格式，所以我们一般会借助于一个在线工具来完成，具体的步骤如下：

• 复制自己需要生成代码片段的代码；
• 在https://snippet-generator.app/网站中生成代码片段；
• 在VSCode中配置代码片段；

比如生成一个求和函数的代码片段：

复制到项目级别的sum.code-snippets 代码片段文件中

以后在我们的项目中，输入sum就会显示我们的自己创建的代码片段，片段出现在 IntelliSense 中

VSCode 的 IntelliSense 是一种智能代码补全功能，提供上下文相关的建议和信息，包括代码提示、参数信息和文档，帮助开发者更高效地编写代码。

这样，我们就可以快速插入定义带有返回类型的函数代码片段。 

task.json

之前很多工作都是通过命令行为完成，比如执行一个文件 node test.js。

可以通过 tasks.json 文件配置各种任务，这可以帮助你在编辑器中直接运行和管理 npm 命令，例如安装依赖、构建项目、运行测试等。

创建任务配置文件

在vscode左下角，点击设置按钮，选择新建任务：

配置 npm 任务

在 tasks.json 文件中，可以定义一个或多个任务。每个任务可以对应一个 npm 脚本。下面是一个示例，展示如何配置一个简单的 npm 任务来运行 npm install： 

{
    "version": "2.0.0",
    "tasks": [
        {
            "label": "npm install",
            "type": "shell",
            "command": "npm",
            "args": [
                "install"
            ],
            "group": {
                "kind": "build",
                "isDefault": true
            },
            "problemMatcher": []
        },
        {
            "label": "npm run build",
            "type": "shell",
            "command": "npm",
            "args": [
                "run",
                "build"
            ],
            "group": {
                "kind": "build",
                "isDefault": false
            },
            "problemMatcher": [],
            "presentation": {
                "reveal": "always"
            }
        }
    ]
}

参数详解：

label: 任务的名称，用于在 VSCode 的任务列表中显示。

type: 指定任务类型，这里使用 shell 表示使用 shell 命令。对于 npm，你也可以使用 process 类型，它会更好地与 npm 集成。例如：

{
    "type": "process",
    "command": "npm",
    "args": [
        "run",
        "build"
    ]
}

command: 要执行的命令，这里是 npm。

args: 命令的参数，例如 install 或 run build。

group: 指定任务是构建任务还是测试任务等。isDefault 可以设置为 true 来标记为默认任务。

problemMatcher: 用于解析编译器输出的工具，通常留空或指定为 $tsc-watch, $tsc, 或其他预定义的匹配器。对于 npm 脚本，通常留空或使用 []。

presentation: 控制任务输出在终端中的显示方式。

presentation属性如何控制任务输出在终端中的显示方式

具体而言，`presentation` 对象包含几个选项，主要是 `reveal`、`echo`、`focus` 和 `panel`。

reveal控制任务输出显示的位置。

• `always`: 每次任务运行时，终端都会自动打开并显示输出。
• `silent`: 任务运行时不会自动显示终端。输出会在输出面板中，但不会打扰用户。
• `never`: 任务运行时不会显示输出，无论是终端还是输出面板。

echo控制是否在终端中回显命令。

• `true`: 回显命令。
• `false`: 不回显命令。

focus控制任务是否应该在运行时聚焦到终端。

• `true`: 运行时聚焦到终端。
• `false`: 不聚焦。

panel控制输出面板的行为。

• `shared`: 使用共享的面板。
• `dedicated`: 创建一个新的专用面板。
• `new`: 每次都创建一个新面板。

以下是一个示例 `tasks.json` 配置：

{
    "version": "2.0.0",
    "tasks": [
        {
            "label": "My Task",
            "type": "shell",
            "command": "echo Hello World",
            "presentation": {
                "reveal": "always",
                "echo": true,
                "focus": true,
                "panel": "dedicated"
            }
        }
    ]
}

在这个示例中，每次运行 "My Task" 时，终端会打开并显示 `Hello World` 的输出，同时任务会聚焦到该终端。

运行任务

• 在 VSCode 中，按 Ctrl+Shift+P (Windows/Linux) 或 Cmd+Shift+P (Mac) 打开命令面板。
• 输入并选择 Tasks: Run Task。
• 选择你之前配置的任务（例如 npm install 或 npm run build）。

通过这种方式，你可以在 VSCode 中方便地管理和运行 npm 脚本。