打造极致高效的 VS Code：我的前端与跨平台开发环境配置指南

作为开发者，VS Code 是我们每天面对时间最长的工具。一个顺手的编辑器不仅能提升编码效率，更能保持一天的好心情。今天和大家分享我打磨了很久的 VS Code 配置与插件清单。

这套配置不仅涵盖了 React/Vue 等前端主流技术栈，还兼顾了 Flutter 跨平台开发，同时集成了 AI 辅助和极致的代码格式化工作流。

---

🎨 核心外观与字体设置

再强大的工具也要有好看的皮囊。在 UI 和排版上，我追求的是干净、专注和现代感。

1. 主题与图标：我使用的是经典的 Atom One Dark Theme，搭配 Carbon Product Icons 和 vscode-icons。这套组合对比度舒适，长时间写代码眼睛也不容易疲劳。
2. 极简界面：关掉了占用空间的 Minimap（代码缩略图），并将侧边栏放在左侧。
3. 灵魂字体（强烈推荐）：字体我选择了 JetBrains Mono。这是一款专为开发者设计的字体，搭配代码连字（Font Ligatures）特性，能让 =>、=== 等符号变得非常优雅。

---

🛠️ 效率飙升：必备插件全家桶

我将平时使用的插件分为了几个大类，大家可以按需自取：

1. 🤖 AI 辅助编程

• GitHub Copilot & Copilot Chat：绝对的生产力工具，写注释生成代码、快速重构、解释复杂逻辑，用过就回不去了。

2. ✨ 代码质量与格式化

• Prettier - Code formatter：前端必备的代码格式化工具。
• ESLint & Stylelint：JavaScript/TypeScript 和 CSS/SCSS 的语法检查利器。
• Code Spell Checker：英语渣福音！自动检查代码中的拼写错误，避免因为变量名拼错引发的低级 Bug。
• EditorConfig for VS Code：统一团队的编辑器基本配置（缩进、换行符等）。

3. 🚀 开发语言与框架支持

• Vue (Official)：Vue 官方插件，提供极致的 Vue 3 开发体验。
• ES7+ React/Redux/React-Native snippets：React 开发者必备的快捷代码片段（比如 rfce 快速生成组件）。
• Tailwind CSS IntelliSense：写 Tailwind 时的智能提示与类名预览。
• Dart & Flutter：如果你也写跨平台 App，这两个是官方必备插件。
• Apollo GraphQL：提供 GraphQL 的语法高亮和智能提示。

4. 🧰 日常效率神器

• GitLens：Git 增强神器，每一行代码是谁什么时候写的（甩锅必备），一目了然。
• Project Manager：多项目管理神器，快捷键一键在不同项目间无缝切换。
• Turbo Console Log：快捷键自动生成带有变量名的 console.log，调试极其方便。
• Better Comments：让你的注释五颜六色（TODO、警告、高亮等），代码阅读体验翻倍。
• Auto Rename Tag & Auto Import：自动重命名 HTML/XML 标签对，自动引入依赖。
• REST Client & Thunder Client：不用离开编辑器就能发 HTTP 请求测试 API，Postman 的完美替代品。

---

⚙️ 核心 settings.json 配置清单

这套配置的核心在于保存即完美——开启了 editor.formatOnSave 和 ESLint 的 autoFix，每次按下 Ctrl/Cmd + S，代码自动排版并修复基本语法错误。

你可以直接将以下内容复制到你的 settings.json 中：

{
  // ================= 外观与字体 =================
  "workbench.colorTheme": "Atom One Dark",
  "workbench.iconTheme": "vscode-icons",
  "workbench.productIconTheme": "icons-carbon",
  "editor.fontFamily": "JetBrains Mono, Menlo, Monaco, 'Courier New', monospace",
  "editor.fontLigatures": "'ss01', 'ss02', 'ss03', 'ss06', 'zero'",
  "editor.fontSize": 18,
  "editor.fontWeight": 400,
  "debug.console.fontFamily": "JetBrains Mono",
  
  // ================= 界面优化 =================
  "editor.minimap.enabled": false,
  "editor.cursorSmoothCaretAnimation": "on",
  "workbench.list.smoothScrolling": true,
  "workbench.editor.empty.hint": "hidden",
  "workbench.editor.highlightModifiedTabs": true,
  "window.titleBarStyle": "custom",

  // ================= 代码格式化与 Lint =================
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "editor.tabSize": 2,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit"
  },
  "eslint.enable": true,
  "eslint.run": "onType",
  "eslint.validate": ["javascript", "javascriptreact", "vue", "typescript", "typescriptreact"],
  "javascript.validate.enable": false,

  // ================= Prettier 个性化配置 =================
  "prettier.printWidth": 200,
  "prettier.semi": true,
  "prettier.singleQuote": true,
  "prettier.tabWidth": 2,
  "prettier.trailingComma": "es5",

  // ================= 特定语言覆写 =================
  "[markdown]": {
    "editor.formatOnSave": false
  },
  "[css]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[scss]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },

  // ================= 拼写检查自定义词典 =================
  "cSpell.ignoreWords": [
    "antd", "persistor", "stylelint", "nestjs", "testid", "timeslot"
  ],

  // ================= Git & 其他杂项 =================
  "git.autofetch": true,
  "git.enableSmartCommit": true,
  "files.autoSave": "off",
  "files.eol": "\n",
  "typescript.updateImportsOnFileMove.enabled": "always",
  "better-comments.multilineComments": true
}