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

1.背景

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

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

  1. .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>



.

相关推荐
tan180°8 小时前
MySQL表的操作(3)
linux·数据库·c++·vscode·后端·mysql
万千思绪11 小时前
【PyCharm 2025.1.2配置debug】
ide·python·pycharm
我在看世界13 小时前
家里vscode连公司内网vscede
vscode·ssh
百锦再14 小时前
.Net配置文件appsetting.json的几种读取方法
chrome·json·.net·依赖注入·appsetting·web.config
不想迷路的小男孩16 小时前
Android Studio 中Palette跟Component Tree面板消失怎么恢复正常
android·ide·android studio
AlickLbc16 小时前
在phpstudy环境下配置搭建XDEBUG配合PHPSTORM的调试环境
ide·phpstorm
悠悠小茉莉16 小时前
Win11 安装 Visual Studio(保姆教程 - 更新至2025.07)
c++·ide·vscode·python·visualstudio·visual studio
SZ17011023117 小时前
华为云 银河麒麟 vscode远程连接
ide·vscode·华为云
yanjiee18 小时前
需要scl来指定编译器的clangd+cmake在vscode/cursor开发环境下的配置
ide·vscode·编辑器
Waltt_Qiope21 小时前
关于使用cursor tunnel链接vscode(避免1006 issue的做法)
ide·vscode·issue