如何在VSCode中配置CSS Modules在React的JS文件里实现类名点击跳转和智能提示-VSCode-PHP中文网

根本原因是 typescript 语言服务无法推导 css module 的具体键名，导致无补全和跳转；需安装 typescript-plugin-css-modules 插件并正确配置 tsconfig.json 和 .vscode/settings.json，确保使用工作区 typescript 版本及正确的语言模式。

如何在vscode中配置css modules在react的js文件里实现类名点击跳转和智能提示

为什么 import styles from './xxx.module.css' 后没有补全和跳转

根本原因不是插件没装，而是 TypeScript 语言服务压根不知道 styles 对象里有哪些键。默认情况下，import styles from './Button.module.css' 的类型是 { [key: string]: string }，编辑器无法推导出 styles.primary 这种写法是否合法，自然不提示、也不能跳转。

必须安装 typescript-plugin-css-modules 插件

这个插件会为每个 .module.css 文件动态生成对应的 .d.ts 类型声明，让 TypeScript 知道 styles 具体长什么样。它不是 VSCode 扩展，而是 TypeScript 编译器插件，所以只对 .ts/.tsx 文件生效。

运行 npm install -D typescript-plugin-css-modules（推荐本地安装）
在 tsconfig.json 的 compilerOptions.plugins 中添加配置：

{
  "compilerOptions": {
    "plugins": [
      {
        "name": "typescript-plugin-css-modules",
        "options": {
          "customMatcher": "\.(c|le|sc)ss$"
        }
      }
    ]
  }
}

注意：customMatcher 要覆盖你实际用的后缀，比如用 .module.scss 就得写 \.(c|le|sc)ss$；若还用了 .pcss，需扩展正则。

VSCode 必须使用工作区 TypeScript 版本

插件依赖 TypeScript 语言服务加载，而 VSCode 默认可能用内置 TS 版本（不识别插件）。必须强制它用项目里的 node_modules/typescript。

dmap-jsapi-skill

DMap GL地图JSAPI（dmapgl）开发指南。用于编写、审查、调试 DMap 地图 API 代码，涵盖地图初始化、覆盖物渲染、图层管理、事件处理、控件交互等任务。当用户提及 dmap、dmapgl、jsapi‑gl 或相关地图开发需求时自动触发。

下载

在项目根目录创建 .vscode/settings.json
写入以下内容（无需全局设置）：

{
  "typescript.tsdk": "node_modules/typescript/lib",
  "typescript.enablePromptUseWorkspaceTsdk": true
}

改完后执行 Developer: Reload Window 或重启 VSCode。右下角点击 TypeScript 版本号，确认显示的是“Workspace version”而非“Bundled”。

跳转到定义仍失败？检查文件关联和语言模式

即使类型有了，VSCode 也可能因语言模式错误导致 Go to Definition 不触发。常见于自定义后缀（如 .page.tsx）或未识别为 TypeScript React。

打开任意 .tsx 文件，看右下角语言标识 —— 必须是 TypeScript React，不是 TypeScript 或 Plain Text
如果是非标后缀，在 .vscode/settings.json 加映射："files.associations": { "*.page.tsx": "typescriptreact" }
确保 typescript-plugin-css-modules 的 getScriptSnapshot 钩子能被调用：它只对匹配 customMatcher 的 CSS 文件生成 .d.ts 快照，路径必须可读（不能是 symlink 循环或权限拒绝）