配置好 VS Code 插件是提升开发幸福感和效率最直接的一步

太棒了！配置好 VS Code 插件是提升开发幸福感和效率最直接的一步。

根据你的技术栈 (React, Node, Next, Python) 和使用的服务 (Supabase, Vercel)，我为你精心挑选了一套插件列表。我们将它分为几个类别：核心工作流、技术栈增强、平台与工具集成 以及 美化与体验。

第一部分：核心工作流 (必装)

这些插件解决了你提到的“自动保存”、“自动对齐”等基础需求，是现代开发的基石。

1. 自动格式化 (Prettier - Code formatter)

这是你提到的“自动对齐”的最佳解决方案。它是一个“有主见”的代码格式化工具，能强制统一整个项目的代码风格，避免团队成员因格式问题产生分歧。

• 插件名称： Prettier - Code formatter
• 配置步骤（非常重要！）：
  1. 安装插件。
  2. 设置 VS Code，使其在保存时自动格式化：
     • 打开设置 (快捷键 Cmd/Ctrl + ,)。
     • 搜索 Format On Save，并勾选它。
     • 搜索 Default Formatter，选择 Prettier - Code formatter。
  3. (推荐) 在你的项目根目录创建一个 Prettier 配置文件 .prettierrc.json，这样团队成员可以共享配置：

     {
       "semi": true,
       "singleQuote": true,
       "trailingComma": "all",
       "printWidth": 80,
       "tabWidth": 2
     }
     

2. 自动保存 (VS Code 内置功能)

这不是一个插件，而是 VS Code 的一个设置，但至关重要。

• 如何开启：
  • 打开设置 (Cmd/Ctrl + ,)。
  • 搜索 Auto Save。
  • 将其值从 off 改为 onFocusChange。
  • 为什么用 onFocusChange？ 当你的光标离开当前文件（比如切换到另一个文件或终端）时它才会保存。这比 afterDelay（延迟保存）更好，因为它不会在你打字打到一半时保存一个语法错误的文件，导致热更新频繁报错。

3. 代码质量检查 (ESLint)

Prettier 只管格式，而 ESLint 负责检查代码中的逻辑错误、潜在 Bug 和不规范的写法。

• 插件名称： ESLint
• 作用： 如果你的代码有潜在问题（比如定义了变量但从未使用），它会直接在编辑器里用波浪线标出。
• 注意： ESLint 需要在你的项目中进行配置（通常 Next.js 脚手架会自动帮你配好）。它和 Prettier 配合使用时，需要安装 eslint-config-prettier 来关闭与 Prettier 冲突的规则，确保 ESLint 只做代码质量检查，让 Prettier 专心做格式化。

4. Git 增强 (GitLens)

极大地增强了 VS Code 的 Git 功能。

• 插件名称： GitLens — Git supercharged
• 核心功能：
  • 可以直接在代码行上看到这行代码是谁、在什么时候提交的（行内 blame）。
  • 强大的文件和分支历史视图。
  • 轻松比较不同提交之间的代码差异。

第二部分：技术栈增强 (根据你的语言)

JavaScript / React / Next.js

• Tailwind CSS IntelliSense: 如果你用 Tailwind CSS（在 Next.js 项目中非常流行），这是必装插件。它提供智能的 class 名称补全、语法高亮和悬停提示。
• DotENV: 让你的 .env 文件（环境变量文件）有语法高亮，更易读。
• Path IntelliSense: 自动补全文件路径，在 import 模块时非常有用。
• npm IntelliSense: 在 package.json 文件中自动补全 npm 模块名称。

Python

• Python (Microsoft): 官方 Python 插件，提供了几乎所有你需要的功能：调试、智能提示、Jupyter Notebook 支持、环境管理等。
• Pylance (Microsoft): 官方出品的 Python 语言服务器，提供更快、更智能的类型检查和自动补全。通常会作为 Python 插件的依赖自动安装。
• autoDocstring - Python Docstring Generator: 快速生成符合规范的函数文档字符串 (docstrings)，只需在函数定义下输入三个引号 """ 即可。

第三部分：平台与工具集成 (Supabase / Vercel)

• Supabase (Official): Supabase 官方插件。
  • 插件名称： Supabase
  • 核心功能：
    • 直接在 VS Code 中连接到你的 Supabase 项目。
    • 查看和管理你的数据库表、数据和函数。
    • 自动生成 TypeScript 类型定义，与你的数据库 schema 保持同步，这对于前端开发来说是神器！
• Prisma: 如果你选择使用 Prisma 作为 ORM 来操作 Supabase 数据库（这是一个非常流行的组合），那么这个插件是必须的。
  • 插件名称： Prisma
  • 核心功能： 为你的 schema.prisma 文件提供语法高亮、格式化、自动补全和跳转定义。
• Docker: 现代开发几乎离不开容器化。这个插件可以让你在 VS Code 中轻松管理 Docker 镜像、容器和 docker-compose。
• Vercel: 对于 Vercel，其主要交互工具是 Vercel CLI (vercel deploy 等)，VS Code 插件提供的帮助有限。不过，你可以通过 VS Code 的集成终端来使用它，体验已经非常流畅。

第四部分：美化与体验 (可选，但强烈推荐)

• Material Icon Theme: 提供了海量的文件和文件夹图标，让你的文件浏览器一目了然，能通过图标快速分辨文件类型。
• One Dark Pro: 最受欢迎的暗色主题之一，基于 Atom 编辑器的默认主题，非常耐看。
• Better Comments: 让你的注释更具可读性。可以用 *, !, ?, todo 等前缀让不同类型的注释显示不同颜色。
  • * Important information (高亮)
  • ! Deprecated method (删除线)
  • ? Should this be exposed? (疑问)
  • // TODO: Refactor this (TODO 高亮)
• TODO Highlight: 高亮代码中的 TODO 和 FIXME 关键字，防止你忘记待办事项。

总结与安装清单

这是一个你可以直接在 VS Code 插件市场搜索和安装的清单：

安装完这些插件并完成必要的配置后，你的 VS Code 将成为一个真正为你技术栈量身打造的强大 IDE。祝你编码愉快！