VScode中.MDX文件导入js/ts及内部变量自动补全咨询

1. 需求实现可行性 #

你提到的两项自动补全需求完全可以实现，目前已有成熟的支持方案，不存在暂不支持的情况，不需要等待额外功能更新。

2. 具体配置操作 #

按照以下步骤配置即可达成预期效果：

• 安装基础扩展
  首先安装VSCode官方发布的MDX扩展，该扩展会自动关联.mdx格式文件，提供基础的语法解析和语言服务对接能力。
• 修改VSCode全局配置
  按下Ctrl+,（Windows/Linux）或Cmd+,（Mac）打开设置页，搜索打开settings.json，添加以下配置：

{
  // 启用MDX语言服务
  "mdx.server.enable": true,
  // 关联mdx后缀文件到MDX语言模式
  "files.associations": {
    "*.mdx": "mdx"
  },
  // 开启TS/JS路径和变量补全
  "typescript.suggest.paths": true,
  "javascript.suggest.paths": true
}

• 配置项目级语言服务
  在项目根目录创建/修改对应配置文件，让TypeScript/JavaScript语言服务扫描识别MDX文件内容：
  • 若为JavaScript项目，创建jsconfig.json：

    {
      "compilerOptions": {
        "jsx": "react",
        "target": "ESNext"
      },
      "include": ["**/*.mdx", "**/*.js", "**/*.ts", "**/*.jsx", "**/*.tsx"]
    }
    

  • 若为TypeScript项目，修改tsconfig.json，在include数组中新增"**/*.mdx"，同时确保compilerOptions下jsx配置已开启。
• 可选增强配置
  若需要更精准的补全提示，可以安装MDX类型定义包：在项目中执行npm install @types/mdx -D，安装后框架内置组件、自定义变量的补全匹配度会进一步提升。

效果验证 #

配置完成后重启VSCode，打开MDX文件测试：

1. 导入JS/TS文件内容时，输入导入路径会自动提示可选文件，导入后使用对应内容时会弹出补全建议
2. MDX文件内部定义的变量，在JSX表达式（{}包裹的内容）中输入前缀即可触发补全，比如你示例中的myVar，输入myV时就会自动给出补全选项。如果没有自动触发，可以按下Ctrl+Space（Windows/Linux）或Cmd+Space（Mac）手动唤起补全面板。

内容的提问来源于stack exchange，提问作者Andrii Hrushetskyi