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

1.背景

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

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

.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

js 复制代码

{
  "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)中

例如

js 复制代码

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

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

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