高效TypeScript开发：VSCode终极配置指南

⚙️ VSCode TypeScript 专属效率设置大全 (纯 settings.json 配置)

// .vscode/settings.json
{
  /* 🔍 引用与类型追踪 */
  "typescript.referencesCodeLens.enabled": true,      // 显示引用计数(点击查看所有引用处)
  "typescript.implementationsCodeLens.enabled": true, // 显示实现接口的计数
  "typescript.tsserver.trace": "off",                 // 关闭TS服务器日志(提升性能)
  
  /* 💡 智能提示增强 */
  "typescript.suggest.completeFunctionCalls": true,   // 自动补全函数调用括号
  "typescript.suggest.autoImports": true,             // 自动导入建议
  "typescript.suggest.paths": true,                   // 路径别名建议
  "typescript.preferences.renameShorthandProperties": true, // 简化对象属性重命名

  /* 🧪 实验性功能 */
  "typescript.tsserver.experimental.enableProjectDiagnostics": true, // 实时全项目错误检查

  /* 📝 编辑体验优化 */
  "typescript.updateImportsOnFileMove.enabled": "always",  // 移动文件时自动更新导入
  "editor.quickSuggestions": {                           // 快速建议触发
    "strings": true,
    "comments": false,
    "other": true
  },
  "typescript.preferences.importModuleSpecifier": "non-relative" // 优先使用非相对路径
}

🎯 核心配置详解：

1. 引用追踪增强 (referencesCodeLens)

"typescript.referencesCodeLens.enabled": true

✅ 效果：

• 在每个函数/类/变量上方显示 3 references
• 点击可直接跳转到所有引用位置

2. 自动导入优化 (autoImports)

"typescript.suggest.autoImports": true

✅ 效果：

• 输入未导入的模块时自动提示
• 选择后自动添加import语句

3. 文件移动同步 (updateImportsOnFileMove)

"typescript.updateImportsOnFileMove.enabled": "always"

✅ 效果：

• 重命名/移动文件时自动更新所有引用路径
• 防止出现"找不到模块"错误

4. 路径导入策略 (importModuleSpecifier)

"typescript.preferences.importModuleSpecifier": "non-relative"

✅ 效果：

// 优先使用：
import Button from '@/components/Button'

// 而不是：
import Button from '../../components/Button'

🏁 性能调优建议：

{
  "typescript.tsserver.maxTsServerMemory": 4096,  // 调高TS内存(解决大型项目卡顿)
  "typescript.tsserver.watchOptions": {          // 优化文件监听
    "watchFile": "useFsEvents",
    "watchDirectory": "useFsEvents"
  },
  "typescript.suggest.includeAutomaticOptionalChainCompletions": true // 可选链自动补全
}

🔚 最终配置模板：

// .vscode/settings.json
{
  // ===== 核心功能 =====
  "typescript.referencesCodeLens.enabled": true,
  "typescript.updateImportsOnFileMove.enabled": "always",
  "typescript.suggest.autoImports": true,
  
  // ===== 智能提示 =====
  "typescript.suggest.completeFunctionCalls": true,
  "typescript.preferences.importModuleSpecifier": "non-relative",
  "typescript.suggest.includeCompletionsForImportStatements": true,
  
  // ===== 性能优化 =====
  "typescript.tsserver.experimental.enableProjectDiagnostics": true,
  "typescript.tsserver.maxTsServerMemory": 4096
}

💡 提示：所有配置均需在包含tsconfig.json的TypeScript项目中生效
🔄 更新后请重启VSCode或执行> TypeScript: Restart TS server命令