详解.vscode 下的json .vscode文件夹下各个文件的作用

1.背景

看一些开源项目的时候,总是看到vscode先有不同的json文件,再次做一下总结方便之后查看

settings.json肯定不用多说了 vscode 编辑器分为 全局用户配置 和 当前工作区配置 那么.vscode文件夹下的settings.json文件夹肯定就是当前工作区配置了 在此文件对单个的项目进行配置 这样分享项目时，也把该项目的 vscode 配置分享出去了，保证了协同工作开发环境的统一性

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

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

2.文件介绍

2.1 extensions.json 插件推荐

我们只需要在插件页面点击添加到工作区建议 就可以生成在extensions.json文件 并且把该文件添加到推荐区 反之可以把已添加的从工作区建议删除 删除该插件的推荐

通过插件筛选可以看到项目推荐的插件有哪些

2.2. setting.json

• 在vscode左下角，点击设置按钮
• 可以通过以下两个位置进行配置
• 无论是可视化区域选择的内容 还是通过setting.json设置的都可以生成在.vscode文件夹下的setting.jison文件中
  
• 例如

2.3. launch.json

创建调试配置文件

• 例如 选择调试引擎后，就会自动生成调试配置文件
  
  

2.4. task.json

配置任务

• 如果项目中存在 package.json 文件，vscode 就会读取其中的脚本命令，可以方便的将脚本命令配置为任务。

• 比如自动配置好 node 执行 test.js 文件的任务。

• package.json

{
  "name": "vite-create-vue3",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vue-tsc -b && vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "vue": "^3.5.13"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^5.2.1",
    "@vue/tsconfig": "^0.7.0",
    "typescript": "~5.7.2",
    "vite": "^6.2.0",
    "vue-tsc": "^2.2.4"
  }
}

• 例如
  
  

运行任务

2.5. 代码片段

对于一些重复代码，我们可以在 vscode 中配置用户代码片段，方便一键生成。
代码片段有用户级别的，也有项目级别的。用户级，比如你换了台电脑，就可以将自己之前保存的代码片段共享过来，项目级别的就是便于团队成员之间使用了。

vscode选择新建代码片段 选择自己项目的代码片段选项 当然也可以建立全局的 看自己需求

生成方式 此处我们可以借助工具
先写一个模板拷贝到这个网站(https://snippet-generator.app/?description=&tabtrigger=&snippet=&mode=vscode)中
例如

<template>
  <div>
    
  </div>
</template>

<script setup lang="ts">
defineOptions({ name: '' })
</script>

<style lang="scss" scoped>
</style>

.