?? 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命令