详解.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
{"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>
.