项目基建（七）.vscode文件夹 统一编辑器全流程设置

.vscode 文件夹

将VS Code 生成的文件夹上传到远端仓库，可以实现团队成员的编辑器设置统一

.vscode 文件夹通常是在 Visual Studio Code 中创建项目时自动生成，但也可以手动创建。

生成方式

如果你在 Visual Studio Code 中打开一个没有 .vscode 文件夹的项目，可以进行以下操作：

文件(File) -> 首选项(Preferences) -> 设置(Settings) -> 工作区(Workspace)，在工作区设置中添加需要的配置项，Visual Studio Code 会自动在项目根目录下生成 .vscode 文件夹，并将配置文件保存在其中

优势

• 统一团队的编辑器设置，代码风格统一
• 强制工具版本同步，避免冲突
• 新成员拉取项目后，会自动提示安装需要的插件，省了调试编辑器浪费的时间

配置launch.json

http://59.110.235.189/create-react-app/docs/setting-up-your-editor/

launch.json 能预设调试参数（如环境变量、断点策略），减少手动配置时间，提升问题定位效率‌

点击vs code 调试 -> 自定义运行和创建launch.json文件，添加以下代码：

{
  "version": "0.1.0",
  "configurations": [
    {
      "name": "Chrome",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:3000",
      "webRoot": "${workspaceRoot}/src",
      "sourceMapPathOverrides": {
        "webpack:///src/*": "${webRoot}/*"
      }
    }
  ]
}

配置settings.json

settings.json 设置缩进、换行符等代码规则

vscode ctrl+shift+P ,输入settings.json，选择首选项：打卡工作区设置，添加以下代码：

{
  "todohighlight.keywords": ["TIPS:", "NOTICE:"],
  "editor.codeActionsOnSave": {
    "source.fixAll": "explicit"
  },
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[css]": {
    "editor.defaultFormatter": "stylelint.vscode-stylelint"
  },
  "[postcss]": {
    "editor.defaultFormatter": "stylelint.vscode-stylelint"
  },
  "[scss]": {
    "editor.defaultFormatter": "stylelint.vscode-stylelint"
  },
  "[less]": {
    "editor.defaultFormatter": "stylelint.vscode-stylelint"
  },
  "editor.formatOnSave": true,
  "scss.lint.unknownAtRules": "ignore",
  "stylelint.validate": ["css", "less", "postcss", "scss", "sass", "tsx"]
}

配置extensions.json

extensions.json 设置了编辑器安装的扩展插件

{
  "recommendations": [
    // 代码质量与格式化
    "dbaeumer.vscode-eslint",     // ESLint（JavaScript/TypeScript 静态检查）
    "esbenp.prettier-vscode",     // Prettier（自动代码格式化）

    // 版本控制
    "eamodio.gitlens",            // GitLens（增强 Git 提交历史查看）

    // 语言支持
    "ms-vscode.vscode-typescript-tslint-plugin", // TypeScript 语法支持
    "vue.volar",                  // Vue 3 开发支持

    // 协作工具
    "ms-vsliveshare.vsliveshare", // Live Share（实时协作编码）

    // 效率增强
    "streetsidesoftware.code-spell-checker" // 代码拼写检查
  ]
}

配置代码片段

vscode 文件-> 首选项->配置用户代码片段 ->新建 XXX 文件夹的代码片段文件，命名为xxx.code-snippets，即可编辑代码片段

‌EditorConfig 和 .vscode 文件夹的对比

• EditorConfig（跨平台）
  • 团队使用不同编辑器时，统一代码风格
• .vscode （VS Code 专属）
  • ‌VS Code 的设置工作‌：通过 launch.json 统一调试参数、tasks.json 定义构建脚本、extensions.json 管理插件依赖‌
  • 高级代码控制‌：强制启用 Prettier 格式化、ESLint 规则校验等 VS Code 插件行为‌

‌EditorConfig解决跨编辑器的基础代码风格问题，.vscode 文件夹深度定制 VS Code 的开发全流程。

正确的策略

大型项目**建议同时使用两者，**通过优先级规则实现配置分层管理‌，优势互补：

• ‌基础风格‌：由 .editorconfig 定义缩进（indent_size = 2），确保所有编辑器遵循相同规则‌14。
• ‌高级规则‌：由 .vscode/settings.json 覆盖更细粒度的 VS Code 专属配置（如 "editor.formatOnSave": true）‌