功能
.vscode文件夹用于存储与该项目相关的特定设置和配置
常见的文件和功能：
- extensions.json：推荐的插件列表。
- settings.json：针对当前项目的设置，会覆盖全局和用户的设置。
- launch.json：调试配置。
- tasks.json：自定义任务配置。
- snippets.code-snippets：当前项目有效的自定义代码片段
extensions.json
推荐的插件列表
{
"recommendations": [
"dbaeumer.vscode-eslint",
"connor4312.esbuild-problem-matchers",
"ms-vscode.extension-test-runner"
]
}
使用：
争论: extensions.json是否需要支持禁用扩展列表
其实我感觉应该分三种：
- 必须安装的插件
- 必须禁用的插件
- 推荐插件（不影响功能的）
settings.json
单独的项目配置, 比如有些旧项目需要关闭eslint检查或者其它插件的功能，可以在这里配置
以vue3项目为例, 来自juejin.cn/post/728631…
{
"editor.codeActionsOnSave": {
"source.fixAll": true,
"source.addMissingImports": true, // 自动导入
},
// 和codeActionsOnSave一起开启会导致格式化两次, 推荐使用codeActionsOnSave
"editor.formatOnSave": false,
// 格式化JSON文件，使用vscode自带的格式化功能就可以了，使用eslint需要安装额外的插件
"[json]": {
// eslint不会格式化json文件，可以在单独文件配置下开启formatOnSave
"editor.formatOnSave": true,
// editor.formatOnSave开启情况下才会生效
"editor.defaultFormatter": "vscode.json-language-features"
},
// 带注释的json
"[jsonc]": {
"editor.formatOnSave": true,
"editor.defaultFormatter": "vscode.json-language-features"
},
// 格式化html文件
"[html]": {
"editor.formatOnSave": true,
"editor.defaultFormatter": "vscode.html-language-features"
},
}
launch.json
调试配置，快捷键是F5
下面是vscode插件开发调试的配置
{
"version": "0.2.0",
"configurations": [
{
"name": "Run Extension",
"type": "extensionHost",
"request": "launch",
"args": [
"--extensionDevelopmentPath=${workspaceFolder}"
],
"outFiles": [
"${workspaceFolder}/dist/**/*.js"
],
"preLaunchTask": "${defaultBuildTask}"
}
]
}
参数说明
name名称type调试类型，如node, chrome, go, java, cppdbg等，extensionHost是专门用来调试插件request调试启动类型- launch 启动新的调试还是附加到已运行的进程上
- attach 附加到一个正在运行的进程
args参数outFiles编译后的代码目录preLaunchTask在启动调试会话之前要执行的任务，必须在tasks.json中定义，${defaultBuildTask}指在tasks.json中isDefault为true的任务
vscode远程调试C++代码
参考文章: medium.com/@shyabithdi…
需要插件： Native Debug
配置
{
"name": "远程调试",
"type": "gdb",
"request": "launch",
"target": "${command:pickRemoteProcess}",
"stopAtEntry": true,
"env": {},
"ssh": {
"host": "0.0.0.0",
"cwd": "/root/test/",
"password": "root",
"user": "root",
"port": 8888,
"sourceFileMap": {
"/remote/test/": " /local/ctest"
}
},
"valuesFormatting": "prettyPrinters"
}
task.json
自定义任务, 官方文档: code.visualstudio.com/docs/editor…
可以在launch.json中使用，也可以单独运行
下面也是以vscode插件项目为例
{
"version": "2.0.0",
"tasks": [
{
"label": "watch",
"dependsOn": [
"npm: watch:tsc",
"npm: watch:esbuild"
],
"presentation": {
"reveal": "never"
},
"group": {
"kind": "build",
"isDefault": true
},
"runOptions": {
"runOn": "folderOpen"
}
},
{
"type": "npm",
"script": "watch:esbuild",
"group": "build",
"isBackground": true,
"problemMatcher": "$esbuild-watch",
"label": "npm: watch:esbuild",
"presentation": {
"group": "watch",
"reveal": "never"
}
},
{
"type": "npm",
"script": "watch:tsc",
"group": "build",
"problemMatcher": "$tsc-watch",
"isBackground": true,
"label": "npm: watch:tsc",
"presentation": {
"group": "watch",
"reveal": "never"
}
}
]
}
label: 任务标识。dependsOn: 依赖的其他任务，会先执行这里面的任务。presentation: 控制在终端面板中的显示方式。revealnever值不会主动打开终端面板，实际任务已经创建了。
group: 分组，例如，Ctrl+Shift+B（在 macOS 上是 Cmd+Shift+B）默认用于运行“build”组的任务isDefault默认任务，不配置的话有多个任务时需要手动选择。
runOptions: 运行选项。runOn设置为 “folderOpen” 表示当打开文件夹时自动运行这个任务。
snippets.code-snippets
代码片段，可以用来常用命令的快捷方式，或常用的代码模板
单独配置
在.vscode下新建snippets.code-snippets，不用加后缀
{
"console.log": {
"prefix": "mylog",
"body": [
"console.log('${1:object}');",
"$2"
],
"description": "Log output to console"
},
"vue3 template": {
"prefix": "vue3",
"body": [
"<script lang=\"ts\" setup>",
"console.log('new')",
"</script>",
"",
"<template>",
" <div class=\"bg-white\">main</div>",
"</template>",
"",
"<style lang=\"postcss\" scoped></style>",
"",
],
"description": "vue3 template"
}
}
使用: 在当前项目的任意文件输入vue3或mylog，可以看到提示, 确认回车就会生成代码
全局配置
路径: Code（文件） -> 首选项 -> 配置用户代码片段 -> vue.json(按需选择)
可以选择全局配置或者针对单独后缀的文件配置
