我的 VSCode 配置：打造高效开发环境的 40+ 实用设置

当时只道寻常
10 阅读4分钟

分享一套精心调校的 VSCode 配置，包含代码运行、编辑器体验、格式化、终端等多个维度的优化，让你的开发环境更顺手

1. 核心配置速览

以下是完整的 VSCode 配置文件，包含 50+ 个实用设置：

{
  // 代码运行相关配置
  "code-runner.clearPreviousOutput": true,
  "code-runner.runInTerminal": false,
  "code-runner.executorMap": {
    "javascript": "node",
    "typescript": "npx esno"
  },

  // 编辑器体验
  "editor.bracketPairColorization.enabled": true,
  "editor.guides.bracketPairs": true,
  "editor.smoothScrolling": true,
  "editor.cursorBlinking": "expand",
  "editor.cursorSmoothCaretAnimation": "on",
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "editor.tabSize": 2,
  "editor.stickyScroll.enabled": false,

  // 资源管理器
  "explorer.compactFolders": false,

  // 扩展管理
  "extensions.ignoreRecommendations": true,
  "extensions.closeExtensionDetailsOnViewChange": true,

  // 文件处理
  "files.autoGuessEncoding": true,
  "files.associations": {
    "manifest.json": "jsonc",
    "pages.json": "jsonc",
    "*.cjson": "jsonc",
    "*.wxss": "css",
    "*.wxs": "javascript"
  },

  // Prettier 配置
  "prettier.arrowParens": "always",
  "prettier.printWidth": 180,
  "prettier.semi": false,
  "prettier.singleQuote": true,
  "prettier.tabWidth": 2,
  "prettier.useTabs": false,
  "prettier.vueIndentScriptAndStyle": false,
  "prettier.withNodeModules": false,

  // 终端配置
  "terminal.external.windowsExec": "C:\\Program Files\\Git\\git-bash.exe",
  "terminal.integrated.defaultProfile.windows": "Git Bash",

  // TypeScript 环境
  "typescript.locale": "zh-CN",
  "typescript.disableAutomaticTypeAcquisition": true,

  // 更新设置
  "update.mode": "manual",
  "update.showReleaseNotes": false,
  "update.enableWindowsBackgroundUpdates": false,

  // 窗口设置
  "window.dialogStyle": "custom",

  // 工作台配置
  "workbench.colorTheme": "Default Dark Modern",
  "workbench.iconTheme": "vscode-icons",
  "workbench.startupEditor": "none",
  "workbench.enableExperiments": false,
  "workbench.list.smoothScrolling": true
}

2. 代码运行与执行器配置

  • 自动清空输出：每次运行前自动清空之前的输出信息，保持终端整洁
  • 终端运行设置：关闭在终端中运行代码，避免终端污染
  • 执行器映射：为 JavaScript 和 TypeScript 配置不同的执行器，TypeScript 使用 npx esno 防止输出乱码

3. 编辑器体验优化

  • 括号配对：启用彩色显示和垂直辅助线，提高代码可读性
  • 平滑滚动：开启编辑器平滑滚动，提升浏览体验
  • 光标动画：启用光标闪烁和平滑插入动画，增强编辑体验
  • 自动格式化：保存时自动格式化代码，保持代码风格一致
  • 缩进设置：使用 2 空格缩进，符合现代前端开发规范

4. 文件与资源管理器设置

  • 文件夹显示：禁用紧凑文件夹显示，更清晰地展示文件结构
  • 编码处理：自动猜测文件编码，避免乱码问题
  • 文件关联：为特定文件类型配置正确的编辑器语言模式

5. 扩展管理配置

  • 忽略推荐：关闭扩展推荐通知，减少干扰
  • 自动关闭详情：离开扩展视图时自动关闭扩展详细信息页面，保持界面简洁

6. Prettier 格式化配置

  • 箭头函数：始终为单个参数添加括号，提高代码一致性
  • 行宽限制：设置 180 字符行宽，减少不必要的换行
  • 分号设置：不添加分号，遵循现代 JavaScript 编码规范
  • 引号风格：使用单引号，统一代码风格
  • 缩进设置：2 空格缩进，与编辑器设置保持一致

7. 终端设置

  • Git Bash：在 Windows 上使用 Git Bash 作为默认终端，提供类 Unix 命令体验

8. TypeScript 环境配置

  • 中文语言：设置 TypeScript 语言环境为中文，更友好的错误提示
  • 禁用自动类型获取：关闭自动下载第三方库的类型声明文件，减少网络请求

9. 更新与窗口设置

  • 手动更新：设置手动更新模式，避免自动更新打断开发流程
  • 关闭发行说明：更新后不显示发行说明，减少干扰
  • 禁用后台更新：关闭 Windows 后台更新，节省系统资源
  • 自定义对话框：使用自定义窗口对话框样式，提升视觉体验

10. 工作台与主题配置

  • 深色主题：使用 Default Dark Modern 主题，减少眼部疲劳
  • 图标主题：安装 vscode-icons 图标主题，更直观地识别文件类型
  • 启动设置：打开空工作区时不显示欢迎页面，直接进入编辑状态
  • 禁用实验性功能：关闭实验性功能，保持稳定的开发环境

11. 必备插件推荐

  • Code Runner：一键运行多种语言的代码片段
  • vscode-icons：提供丰富的文件图标，增强文件识别
  • Prettier - Code formatter：代码格式化工具，保持代码风格一致

12. 核心总结

这套配置覆盖了 VSCode 的多个核心功能模块，从代码运行、编辑器体验到格式化、终端设置，全方位优化了开发环境。通过这些设置，你可以获得更流畅、更高效的编码体验，减少不必要的手动操作，专注于代码本身的逻辑实现。

你有哪些 VSCode 配置技巧？或者使用了哪些提升开发效率的插件？欢迎在评论区分享你的经验～

avatar
文章
阅读
粉丝