.vscode详细指南.vscode 是VSCode的配置文件夹，涵盖了常见的设置、调试配置、任务配置、扩展推荐、快捷键

.vscode 是VSCode的配置文件夹，涵盖了常见的设置、调试配置、任务配置、扩展推荐、快捷键绑定等内容。

1. `settings.json`

settings.json 用来配置 VS Code 编辑器的行为，包括格式化、主题、文件排除等。它的优先级比用户设置的优先级高。用户设置如下图

示例：配置代码格式化、主题和排除文件

{
  // 设置编辑器主题为 Dark+（默认黑暗主题）
  "workbench.colorTheme": "Dark+ (default dark)",

  // 配置编辑器的字体大小和行高
  "editor.fontSize": 14,
  "editor.lineHeight": 22,

  // 格式化设置：保存时自动格式化代码
  "editor.formatOnSave": true,

  // 配置缩进：使用 2 个空格作为缩进
  "editor.tabSize": 2,
  "editor.insertSpaces": true,

  // 排除不需要查看的文件和文件夹
  "files.exclude": {
    "**/.git": true,
    "**/node_modules": true,
    "**/*.log": true
  },

  // 文件类型关联：将 .js 文件识别为 JavaScript 文件
  "files.associations": {
    "*.js": "javascript"
  },

  // 启用自动导入代码
  "javascript.suggest.autoImports": true,

  // 配置 VS Code 终端
  "terminal.integrated.fontSize": 14
}

它的作用主要是统一开发人员使用VSCode的行为，笔者认为意义不大。开发人员有自己的喜好，没必要强行保持一致

2. `launch.json`

launch.json 用于配置调试器，以设置如何启动应用程序和调试。下面给出详细的使用示例

示例：调试 Node.js 应用

{
  "version": "0.2.0",
  "configurations": [
    {
      // 启动 Node.js 应用
      "name": "Launch Program",
      "type": "node",
      "request": "launch",
      "program": "${workspaceFolder}/app.js", // 启动的入口文件
      "skipFiles": ["<node_internals>/**"], // 跳过 Node.js 内部文件
      "outFiles": ["${workspaceFolder}/dist/**/*.js"], // 生成的 JavaScript 文件路径
      "preLaunchTask": "build", // 调试前执行的任务
      "env": {
        "NODE_ENV": "development"
      }
    },
    {
      // 附加到运行中的 Node.js 进程
      "name": "Attach to Node",
      "type": "node",
      "request": "attach",
      "port": 9229 // 连接的调试端口
    }
  ]
}

示例：调试 Python 应用

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Python: Current File",
      "type": "python",
      "request": "launch",
      "program": "${file}",
      "console": "integratedTerminal", // 在集成终端中运行
      "env": {
        "PYTHONPATH": "${workspaceFolder}/src"
      }
    }
  ]
}

之前调试代码，开发人员需要进行配置launch.json，现在有更简单的方式。

打开终端，选择JavaScript调试终端，然后在窗口中直接执行代码，即可进入调试模式

3. `tasks.json` 示例

tasks.json 用于配置自定义任务，常见的如构建、测试等命令。有些小伙伴对这个功能比较陌生，实际上所有小伙伴都在使用这个功能。

点击VSCode工具栏的终端，会出现tooltip,选中运行任务

可以看到可以运行的任务，默认显示的就是项目的npm script脚本。可以编辑、新增任务，请看下面的示例

示例：构建和测试任务

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "build", // 任务标签
      "type": "shell", // 任务类型，shell 类型表示运行 shell 命令
      "command": "npm run build", // 运行的命令
      "group": {
        "kind": "build",
        "isDefault": true // 设置为默认构建任务
      }
    },
    {
      "label": "test", // 测试任务
      "type": "shell", // 运行 shell 命令
      "command": "npm test", // 运行的命令
      "group": {
        "kind": "test"
      }
    }
  ]
}

笔者认为在前端项目中，单独配置tasks的需求不是很多，不是特别重要

4. `extensions.json` 示例

extensions.json 用于推荐和禁用 VS Code 扩展（插件）。如果开的人员没有安装extensions.json推荐的拓展，VSCode 会提示安装拓展。

用VSCode一打开项目，右下角弹出安装拓展的通知

示例：推荐和禁用扩展

{
  // 推荐插件
  "recommendations": [
    "dbaeumer.vscode-eslint", // ESLint 插件
    "esbenp.prettier-vscode", // Prettier 插件
    "ms-python.python", // Python 插件
    "octref.vetur" // Vue.js 插件
  ],
  // 禁用插件
  "unwantedRecommendations": [
    "some.extension", // 禁用某个不需要的插件
    "another.extension"
  ]
}

笔者认为该功能非常有帮助，在前端项目中，使用ESLint做静态代码分析、用Prettier做代码格式化非常有必要

5. `keybindings.json` 示例

keybindings.json 用于自定义快捷键。

示例：自定义快捷键

[
  {
    "key": "ctrl+shift+b", // 自定义快捷键
    "command": "workbench.action.tasks.build" // 触发构建任务
  },
  {
    "key": "ctrl+shift+t", // 打开最近关闭的文件
    "command": "workbench.action.files.reopenClosedFile"
  },
  {
    "key": "ctrl+shift+d", // 打开调试面板
    "command": "workbench.view.debug"
  }
]

笔者认为VSCode默认的快捷键非常好用了，没必要自己自定义快捷键，容易造成快捷键冲突

6. 自定义代码片段（`snippets/` 文件夹）

你可以在 .vscode/snippets/ 文件夹中创建自定义代码片段。比如，创建一个用于 JavaScript 的代码片段文件 javascript.json。

示例：JavaScript 的代码片段

{
  "Log to console": {
    "prefix": "log", // 触发代码片段的快捷方式
    "body": [
      "console.log('$1');" // 代码片段的内容
    ],
    "description": "Log output to console" // 代码片段的描述
  },
  "Arrow function": {
    "prefix": "af", // 触发快捷方式
    "body": ["const $1 = ($2) => {", "\t$3", "};"],
    "description": "Create an arrow function"
  }
}

如果使用GitHub Copilot之类的拓展，实际上没必要再关注snippets

总结

以下是对 .vscode 文件夹中常见配置文件的总结：

settings.json：配置编辑器行为、主题、文件排除、代码格式化等。
launch.json：配置调试器，设置如何启动和附加调试程序。
tasks.json：定义自定义任务（如构建、测试等）并设置快捷方式。
extensions.json：推荐和禁用扩展，帮助团队保持一致的开发环境。
keybindings.json：自定义快捷键，简化工作流程。
snippets/：保存自定义的代码片段，提高编码效率。

这些配置文件能够大大提升你的工作效率，尤其是在团队开发环境中，确保项目的一致性和高效性。

.vscode详细指南

1. settings.json

示例：配置代码格式化、主题和排除文件

2. launch.json