Claude Code深度集成VS Code的完整指南

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.tabSize": 2,
  "editor.insertSpaces": true,
  "typescript.preferences.importModuleSpecifier": "non-relative",
  "typescript.preferences.quoteStyle": "double",
  "typescript.inlayHints.parameterNames.enabled": "all",
  "files.associations": {
    "*.css": "tailwindcss"
  },
  "tailwindCSS.experimental.classRegex": [
    ["cva\\(([^)]*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"],
    ["cx\\(([^)]*)\\)", "(?:'|\"|`)([^']*)(?:'|\"|`)"]
  ],
  "editor.quickSuggestions": {
    "strings": "on"
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

{
  "recommendations": [
    "Anthropic.claude-code",
    "esbenp.prettier-vscode",
    "dbaeumer.vscode-eslint",
    "bradlc.vscode-tailwindcss",
    "prisma.prisma",
    "ms-azuretools.vscode-docker",
    "eamodio.gitlens",
    "usernamehw.errorlens"
  ]
}

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Next.js Dev",
      "type": "node",
      "request": "launch",
      "program": "${workspaceFolder}/node_modules/.bin/next",
      "args": ["dev"],
      "env": {
        "NODE_ENV": "development"
      },
      "console": "integratedTerminal",
      "serverReadyAction": {
        "pattern": "started server on .+, url: (https?://.+)",
        "uriFormat": "%s",
        "action": "openExternally"
      }
    }
  ]
}

# VS Code 工作流约定
## 格式化
- Prettier 自动格式化，保存时触发，不要生成不符合 Prettier 规则的代码
- 单引号→双引号（tsconfig 和 prettier 都设置了 double）
- 行尾不加分号（.prettierrc 配置）
## 代码组织
- 导入顺序：React → 第三方库 → 内部模块 → 类型
- 每个文件只导出一个主要组件/函数，避免 barrel exports 导致 tree-shaking 失效
- 组件文件名用 PascalCase，工具函数文件名用 camelCase
## 调试友好
- 复杂函数加 console.log 时用 `[FunctionName]` 前缀方便过滤
- 生产代码不留 console.log，用 logger 工具（lib/logger.ts）
## 类型安全
- 开启 TypeScript strict 模式，不用 any，实在需要用 unknown
- 第三方库没有类型时，在 types/vendor.d.ts 里手写声明

# 构建产物
.next/
dist/
out/
build/

# 依赖
node_modules/
.pnp/

# 环境变量（敏感）
.env
.env.local
.env.*.local

# 类型声明（第三方，Claude 已知）
*.d.ts
!src/types/*.d.ts
!types/*.d.ts

# 测试快照（体积大）
**/__snapshots__/
**/*.snap

# 静态资源
public/fonts/
public/images/

# 编辑器配置（Claude 不需要）
.vscode/
!.vscode/settings.json

# 锁文件
package-lock.json
yarn.lock
pnpm-lock.yaml

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "Claude: 生成当前文件的测试",
      "type": "shell",
      "command": "claude",
      "args": [
        "-p",
        "为当前文件 ${file} 生成完整的单元测试，用 Jest + Testing Library，覆盖所有导出函数和主要分支"
      ],
      "group": "test",
      "presentation": {
        "reveal": "always",
        "panel": "new"
      }
    },
    {
      "label": "Claude: Review 当前文件",
      "type": "shell",
      "command": "claude",
      "args": [
        "-p",
        "Review 文件 ${file}，重点检查：1）类型安全 2）潜在的运行时错误 3）出海场景的特殊问题（时区、编码、货币）4）性能问题"
      ],
      "group": "build",
      "presentation": {
        "reveal": "always",
        "panel": "new"
      }
    },
    {
      "label": "Claude: 生成 API 文档",
      "type": "shell", 
      "command": "claude",
      "args": [
        "-p",
        "为文件 ${file} 里的所有导出函数生成 JSDoc 注释，包括参数类型、返回值、使用示例"
      ],
      "group": "build",
      "presentation": {
        "reveal": "always",
        "panel": "new"
      }
    }
  ]
}

{
  "Claude: API Route Template Prompt": {
    "prefix": "capiPrompt",
    "body": [
      "生成 Next.js App Router 的 ${1:GET|POST|PATCH|DELETE} 路由：",
      "- 路径：app/api/${2:resource}/route.ts",
      "- 用 Zod 验证${3:请求体}",
      "- Prisma 操作 ${4:Model} 表",
      "- 返回 { success: boolean, data?: any, error?: string }",
      "- 金额字段用整数（分为单位）",
      "- 完整错误处理"
    ],
    "description": "Claude Code API 路由生成 Prompt"
  },
  "Claude: Refactor Prompt": {
    "prefix": "crefactorPrompt",
    "body": [
      "重构这段代码：",
      "- TypeScript strict 模式",
      "- 提取魔法数字为常量",
      "- 超过 15 行的逻辑抽成独立函数",
      "- 加完整的 JSDoc 注释",
      "- 保持原有功能不变，先写测试再改实现"
    ],
    "description": "Claude Code 重构 Prompt"
  }
}

import js from "@eslint/js"
import typescript from "@typescript-eslint/eslint-plugin"

export default [
  js.configs.recommended,
  {
    rules: {
      // 禁止硬编码时区
      "no-restricted-syntax": [
        "error",
        {
          "selector": "Literal[value='Asia/Shanghai']",
          "message": "不要硬编码时区，用用户的 timezone 设置或 UTC"
        }
      ],
      // 禁止直接用 new Date() 做时间比较（时区问题）
      "no-restricted-globals": [
        "error",
        {
          "name": "Date",
          "message": "用 dayjs 或 date-fns 处理时间，避免时区 Bug"
        }
      ]
    }
  }
]

{
  "label": "Claude: Review",
  "type": "shell",
  "command": "which claude && claude -p '...' || echo 'Claude Code CLI 未安装，请运行 npm install -g @anthropic-ai/claude-code'",
}