.vscode 文件夹配置详解

行走的陀螺仪2025-11-29 23:33

.vscode 文件夹是 VS Code 工作区的配置文件目录，它允许你为特定项目定义设置、任务、调试配置和扩展推荐。这些配置会覆盖用户的全局设置，确保团队成员使用一致的开发环境。

🛠️ settings.json - 工作区设置

作用与定位

settings.json 用于定义项目特定的编辑器设置，这些设置会覆盖用户的全局设置，确保团队成员使用相同的编码风格和工具配置。

详细配置示例

json 复制代码 
{
  // ========== 文件与编辑器基础设置 ==========
  
  // 文件编码
  "files.encoding": "utf8",
  // 换行符格式
 "files.eol": "\n",
  // 保存时删除末尾空白字符
  "files.trimTrailingWhitespace": true,
  // 在文件末尾插入最终换行符
  "files.insertFinalNewline": true,
  
  // 编辑器字体大小
  "editor.fontSize": 14,
  // 制表符等于的空格数
  "editor.tabSize": 2,
  // 是否将制表符转换为空格
  "editor.insertSpaces": true,
  // 保存时自动格式化
  "editor.formatOnSave": true,
  // 粘贴时自动格式化
  "editor.formatOnPaste": true,
  // 自动检测缩进
  "editor.detectIndentation": true,
  
  // ========== 语言特定设置 ==========
  
  // JavaScript/TypeScript 配置
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.tabSize": 2
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.codeActionsOnSave": {
      "source.fixAll.eslint": true
    }
  },
  
  // Vue 文件配置
  "[vue]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  
  // JSON 配置
  "[json]": {
    "editor.quickSuggestions": {
      "strings": true
    },
    "editor.suggest.insertMode": "replace"
  },
  
  // CSS/SCSS 配置
  "[css]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[scss]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  
  // ========== 扩展特定配置 ==========
  
  // Prettier 配置
  "prettier.semi": true,
  "prettier.singleQuote": true,
  "prettier.printWidth": 100,
  "prettier.trailingComma": "es5",
  
  // ESLint 配置
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact",
    "vue"
  ],
  
  // ========== 工作区与界面设置 ==========
  
  // 排除文件和文件夹
  "files.exclude": {
    "**/node_modules": true,
    "**/dist": true,
    "**/build": true,
    "**/.git": true,
    "**/.DS_Store": true
  },
  
  "search.exclude": {
    "**/node_modules": true,
    "**/dist": true,
    "**/build": true
  }
}

覆盖全局配置，使用本地配置

json 复制代码 
{
  // -------------------------- 基础：关闭全局干扰项 --------------------------
  // 禁用VS Code自带的语言格式化（避免与Prettier冲突）
  "javascript.format.enable": false,
  "typescript.format.enable": false,
  "vue.format.enable": false,
  "json.format.enable": false,
  "css.format.enable": false,

  // 关闭VS Code默认代码校验（交给ESLint处理）
  "editor.codeActionsOnSave": {
    "source.fixAll": false, // 禁用全局自动修复，后续单独绑定ESLint
    "source.fixAll.eslint": true // 仅启用ESLint的自动修复
  },

  // -------------------------- Prettier：优先项目配置 --------------------------
  "editor.defaultFormatter": "esbenp.prettier-vscode", // 指定Prettier为默认格式化工具
  "prettier.configPath": "", // 留空 = 自动查找项目根目录的Prettier配置（.prettierrc等）
  "prettier.ignorePath": ".prettierignore", // 读取项目本地的忽略文件
  "prettier.resolveGlobalModules": false, // 不使用全局Prettier，仅用项目依赖
  "prettier.useLocalEsLint": true, // 让Prettier跟随项目ESLint规则（避免风格冲突）

  // -------------------------- ESLint：优先项目配置 --------------------------
  "eslint.enable": true, // 启用ESLint
  "eslint.useLocalEsLint": true, // 优先使用项目本地安装的ESLint（而非全局）
  "eslint.configFile": "", // 留空 = 自动查找项目根目录的ESLint配置（.eslintrc等）
  "eslint.workingDirectories": [{ "mode": "auto" }], // 自动识别项目工作目录（适配monorepo）
  "eslint.validate": [ // 指定需要ESLint校验的文件类型
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact",
    "vue",
    "json",
    "jsonc"
  ],

  // -------------------------- 自动格式化：保存时触发 --------------------------
  "editor.formatOnSave": true, // 保存时自动格式化（Prettier执行）
  "editor.formatOnSaveMode": "file", // 保存时格式化整个文件
  "editor.formatOnPaste": false, // 粘贴时不自动格式化（避免干扰）
  "editor.formatOnType": false, // 输入时不自动格式化（避免打断输入）

  // -------------------------- 特定文件类型：强制绑定工具 --------------------------
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.codeActionsOnSave": { "source.fixAll.eslint": true }
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.codeActionsOnSave": { "source.fixAll.eslint": true }
  },
  "[vue]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.codeActionsOnSave": { "source.fixAll.eslint": true }
  },
  "[jsonc]": { // 适配package.json等JSON文件
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.codeActionsOnSave": { "source.fixAll.eslint": true }
  }
}

最佳实践

  • 将代码格式化规则统一配置在项目中
  • 为不同文件类型设置合适的格式化器
  • 配置团队统一的编码规范

⚙️ tasks.json - 构建任务配置

作用与定位

tasks.json 用于定义和配置项目构建、测试、部署等自动化任务，可以通过 VS Code 的任务运行器直接执行。

完整配置示例

json 复制代码 
{
  "version": "2.0.0",
  "tasks": [
    // ========== 前端项目构建任务 ==========
    {
      "label": "npm: install",
      "type": "shell",
      "command": "npm",
      "args": ["install"],
      "group": "build",
      "presentation": {
        "echo": true,
        "reveal": "always",
        "focus": false,
        "panel": "shared"
      },
      "problemMatcher": []
    },
    {
      "label": "npm: dev",
      "type": "npm",
      "script": "dev",
      "group": "build",
      "isBackground": true,
      "presentation": {
        "echo": true,
        "reveal": "always",
        "focus": true,
        "panel": "new"
      },
      "problemMatcher": []
    },
    {
      "label": "npm: build",
      "type": "npm",
      "script": "build",
      "group": "build",
      "presentation": {
        "echo": true,
        "reveal": "always",
        "focus": false,
        "panel": "shared"
      },
      "problemMatcher": "$eslint-stylish"
    },
    
    // ========== 测试任务 ==========
    {
      "label": "npm: test",
      "type": "npm",
      "script": "test",
      "group": "test",
      "presentation": {
        "echo": true,
        "reveal": "always",
        "focus": false,
        "panel": "new"
      },
      "problemMatcher": []
    },
    {
      "label": "npm: test:watch",
      "type": "npm",
      "script": "test:watch",
      "group": "test",
      "isBackground": true,
      "presentation": {
        "echo": true,
        "reveal": "always",
        "focus": false,
        "panel": "new"
      }
    },
    
    // ========== 代码检查任务 ==========
    {
      "label": "npm: lint",
      "type": "npm",
      "script": "lint",
      "group": "test",
      "presentation": {
        "echo": true,
        "reveal": "always",
        "focus": false,
        "panel": "dedicated"
      },
      "problemMatcher": "$eslint-stylish"
    },
    {
      "label": "npm: lint:fix",
      "type": "npm",
      "script": "lint:fix",
      "group": "test",
      "presentation": {
        "echo": true,
        "reveal": "always",
        "focus": false,
        "panel": "dedicated"
      }
    },
    
    // ========== 自定义 Shell 任务 ==========
    {
      "label": "启动开发服务器",
      "type": "shell",
      "command": "./scripts/start-dev.sh",
      "group": "build",
      "isBackground": true,
      "presentation": {
        "echo": true,
        "reveal": "always",
        "focus": true,
        "panel": "new"
      },
      "options": {
        "cwd": "${workspaceFolder}"
      }
    },
    
    // ========== 复合任务 ==========
    {
      "label": "构建和部署",
      "dependsOrder": "sequence",
      "dependsOn": [
        "npm: lint",
        "npm: build",
        "部署到服务器"
      ],
      "group": "build"
    }
  ]
}

核心配置项详解

1. 任务类型 (type)
  • shell：执行 shell 命令
  • process：执行特定进程
  • npm：执行 npm 脚本（VS Code 自动识别）
2. 任务分组 (group)
  • build：构建任务（可通过 Ctrl+Shift+B 快速执行）
  • test：测试任务
  • none：自定义任务
3. 展示配置 (presentation)
json 复制代码 
"presentation": {
  "echo": true,           // 显示执行的命令
  "reveal": "always",     // 显示终端：always, silent, never
  "focus": false,         // 是否聚焦到终端
  "panel": "shared"       // 终端面板：shared, dedicated, new
}
4. 问题匹配器 (problemMatcher)
  • $eslint-stylish：匹配 ESLint 错误格式
  • $tsc：匹配 TypeScript 编译器错误
  • 自定义正则表达式匹配特定错误格式

使用方式

  1. Ctrl+Shift+P → "Tasks: Run Task"
  2. Terminal → "Run Task..."
  3. Ctrl+Shift+B 运行默认构建任务

🐛 launch.json - 调试环境配置

作用与定位

launch.json 配置调试环境，支持多种运行时和框架的调试，如 Node.js、Chrome、Python 等。

完整配置示例

json 复制代码 
{
  "version": "0.2.0",
  "configurations": [
    // ========== Node.js 调试配置 ==========
    {
      "name": "启动 Node.js 服务器",
      "type": "node",
      "request": "launch",
      "program": "${workspaceFolder}/src/server.js",
      "args": ["--port", "3000"],
      "env": {
        "NODE_ENV": "development",
        "DEBUG": "app:*"
      },
      "console": "integratedTerminal",
      "restart": true,
      "autoAttachChildProcesses": true
    },
    {
      "name": "调试 Node.js 测试",
      "type": "node",
      "request": "launch",
      "program": "${workspaceFolder}/node_modules/.bin/jest",
      "args": ["--verbose", "--no-cache"],
      "console": "integratedTerminal",
      "internalConsoleOptions": "neverOpen"
    },
    
    // ========== 前端项目调试配置 ==========
    {
      "name": "启动 Vue 开发服务器",
      "type": "node",
      "request": "launch",
      "program": "${workspaceFolder}/node_modules/@vue/cli-service/bin/vue-cli-service.js",
      "args": ["serve"],
      "console": "integratedTerminal",
      "serverReadyAction": {
        "pattern": "App running at:",
        "uriFormat": "http://localhost:%s",
        "action": "debugWithChrome"
      }
    },
    {
      "name": "使用 Chrome 调试前端",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:8080",
      "webRoot": "${workspaceFolder}/src",
      "breakOnLoad": true,
      "sourceMapPathOverrides": {
        "webpack:///src/*": "${webRoot}/*"
      }
    },
    
    // ========== 附加到进程配置 ==========
    {
      "name": "附加到 Node.js 进程",
      "type": "node",
      "request": "attach",
      "port": 9229,
      "restart": true,
      "localRoot": "${workspaceFolder}",
      "remoteRoot": "/app"
    },
    
    // ========== 后端 API 调试 ==========
    {
      "name": "调试 Express API",
      "type": "node",
      "request": "launch",
      "program": "${workspaceFolder}/src/app.js",
      "env": {
        "PORT": "3001",
        "DB_URL": "mongodb://localhost:27017/dev"
      },
      "skipFiles": [
        "<node_internals>/**"
      ]
    },
    
    // ========== 调试配置组合 ==========
    {
      "name": "全栈调试",
      "type": "node",
      "request": "launch",
      "program": "${workspaceFolder}/server/index.js",
      "serverReadyAction": {
        "pattern": "Server started on port (\\d+)",
        "uriFormat": "http://localhost:%s",
        "action": "startDebugging",
        "name": "调试前端"
      }
    }
  ],
  
  // ========== 调试配置组合 ==========
  "compounds": [
    {
      "name": "同时调试前后端",
      "configurations": ["启动 Node.js 服务器", "使用 Chrome 调试前端"],
      "stopAll": true
    }
  ]
}

核心配置详解

1. 调试类型 (type)
  • node：Node.js 应用程序
  • chrome：Chrome 浏览器
  • python：Python 程序
  • php：PHP 程序
2. 请求类型 (request)
  • launch：启动新程序进行调试
  • attach：附加到已运行的程序
3. 环境变量配置
json 复制代码 
"env": {
  "NODE_ENV": "development",
  "API_URL": "http://localhost:3000"
}
4. 服务器就绪动作
json 复制代码 
"serverReadyAction": {
  "pattern": "监听端口 (\\d+)",
  "uriFormat": "http://localhost:%s",
  "action": "openExternally"
}

调试技巧

  • 使用 console: "integratedTerminal" 在集成终端中查看输出
  • 配置 skipFiles 跳过 node_modules 等无关代码
  • 使用 compounds 同时调试多个相关进程

🔌 extensions.json - 扩展推荐

作用与定位

extensions.json 推荐项目相关的 VS Code 扩展，帮助团队成员快速安装一致的开发工具链。

完整配置示例

json 复制代码 
{
  // ========== 强烈推荐的扩展 ==========
  "recommendations": [
    // ===== 前端开发必备 =====
    
    // Vue.js 开发
    "vue.volar",
    "vue.vscode-typescript-vue-plugin",
    
    // React 开发
    "dsznajder.es7-react-js-snippets",
    "bradlc.vscode-tailwindcss",
    
    // ===== 代码质量工具 =====
    
    // 代码格式化
    "esbenp.prettier-vscode",
    
    // 代码检查
    "dbaeumer.vscode-eslint",
    "bradlc.vscode-tailwindcss",
    
    // TypeScript 支持
    "ms-vscode.vscode-typescript-next",
    
    // ===== 版本控制 =====
    
    // Git 增强
    "eamodio.gitlens",
    "mhutchie.git-graph",
    
    // ===== 工具增强 =====
    
    // 路径智能提示
    "christian-kohler.path-intellisense",
    
    // 自动重命名标签
    "formulahendry.auto-rename-tag",
    
    // CSS 类名智能提示
    "zignd.html-css-class-completion",
    
    // ===== 项目管理 =====
    
    // 项目模板
    "fabiospampinato.vscode-project-templates",
    
    // 代码片段
    "xabikos.javascriptsnippets",
    
    // ===== 主题和图标 =====
    
    // 文件图标
    "vscode-icons-team.vscode-icons",
    
    // 主题
    "akamud.vscode-theme-onedark",
    
    // ===== 测试相关 =====
    
    // Jest 测试
    "orta.vscode-jest",
    
    // ===== 部署和运维 =====
    
    // Docker
    "ms-azuretools.vscode-docker",
    
    // 远程开发
    "ms-vscode-remote.vscode-remote-extensionpack"
  ],
  
  // ========== 不建议的扩展 ==========
  "unwantedRecommendations": [
    // 与项目技术栈冲突的扩展
    "hookyqr.beautify",  // 使用 Prettier 替代
    "ms-vscode.vscode-typescript-tslint-plugin"  // 使用 ESLint 替代
  ]
}

扩展分类说明

1. 语言支持扩展
  • Vue : vue.volar - Vue 3 官方语言支持
  • React : dsznajder.es7-react-js-snippets - React 代码片段
  • TypeScript : ms-vscode.vscode-typescript-next - TypeScript 支持
2. 代码质量工具
  • Prettier : esbenp.prettier-vscode - 代码格式化
  • ESLint : dbaeumer.vscode-eslint - 代码检查
  • Tailwind CSS : bradlc.vscode-tailwindcss - CSS 框架智能提示
3. 开发效率工具
  • GitLens : eamodio.gitlens - Git 增强
  • Path Intellisense : christian-kohler.path-intellisense - 路径自动完成
  • Auto Rename Tag : formulahendry.auto-rename-tag - 自动重命名 HTML 标签
4. 测试和调试
  • Jest : orta.vscode-jest - Jest 测试运行器
  • Docker : ms-azuretools.vscode-docker - Docker 容器管理

使用方式

  1. 团队成员打开项目时，VS Code 会提示安装推荐的扩展
  2. 手动安装：Extensions 视图 → Show Recommended Extensions
  3. 批量安装：Ctrl+Shift+P → "Extensions: Install Recommended Extensions"

🎯 综合配置最佳实践

1. 项目结构示例

复制代码 
my-project/
├── .vscode/
│   ├── settings.json      # 工作区设置
│   ├── tasks.json         # 构建任务
│   ├── launch.json        # 调试配置
│   └── extensions.json    # 扩展推荐
├── src/
├── package.json
└── README.md

2. 团队协作建议

  • 将 .vscode 文件夹加入版本控制
  • 为不同技术栈提供预设配置
  • 定期更新扩展推荐列表
  • 文档化复杂的调试配置

3. 环境特定配置

json 复制代码 
// settings.json - 环境特定覆盖
{
  "[vue]": {
    "editor.defaultFormatter": "vue.volar"
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

4. 条件配置

json 复制代码 
// tasks.json - 根据条件执行不同任务
{
  "label": "构建项目",
  "type": "shell",
  "command": "npm",
  "args": [
    "run",
    "${command:pickBuildTarget}"  // 用户选择构建目标
  ]
}

通过合理配置 .vscode 文件夹中的这些文件，可以创建高度定制化、团队一致的开发环境，大幅提升开发效率和协作体验。

相关推荐
2503_928411561 小时前
11.24 Vue-组件2
前端·javascript·vue.js
Bigger2 小时前
🎨 用一次就爱上的图标定制体验：CustomIcons 实战
前端·react.js·icon
谢尔登2 小时前
原来Webpack在大厂中这样进行性能优化！
前端·webpack·性能优化
cypking3 小时前
Vue 3 + Vite + Router + Pinia + Element Plus + Monorepo + qiankun 构建企业级中后台前端框架
前端·javascript·vue.js
雨雨雨雨雨别下啦4 小时前
【从0开始学前端】vue3简介、核心代码、生命周期
前端·vue.js·vue
simon_93494 小时前
受够了压缩和收费？我作为一个码农，手撸了一款无限容量、原图直出的瀑布流相册！
前端
这儿有一堆花4 小时前
重磅推出！Google Antigravity：一次 “以 Agent 为中心 (agent-first)” 的 IDE 革命
vscode·ai·ai编程·googlecloud
e***87704 小时前
windows配置永久路由
android·前端·后端
Dorcas_FE5 小时前
【tips】动态el-form-item中校验的注意点
前端·javascript·vue.js
热门推荐
01GitHub 镜像站点02BongoCat - 跨平台键盘猫动画工具03【保姆级教程】免费使用Gemini3的5种方法！免翻墙/国内直连04UV安装并设置国内源05Linux下V2Ray安装配置指南06安娜的档案(Anna’s Archive) 镜像网站/国内最新可访问入口（持续更新）07“我的电脑”图标没了怎么办 4种方法找回08Gemini 3.0 Pro Preview 实测报告09全球最强模型Grok4，国内已可免费使用！（附教程）10Labelme从安装到标注：零基础完整指南