VSCode中为Meteor开发配置运行时实现IntelliSense条件导入解析

方案1：多环境路径映射（推荐，适合前后端代码目录拆分的项目） #

VSCode的智能提示完全基于项目根目录/子目录下的jsconfig.json（JavaScript项目）或tsconfig.json（TypeScript项目）的路径配置，你可以分别给客户端、服务端代码目录配置专属的映射规则：

第一步：确认项目目录结构 #

你的项目需要满足前后端代码拆分到独立目录的规范：

项目根目录
├── jsconfig.json
└── src
    ├── client # 所有客户端代码存放目录
    │   └── jsconfig.json
    ├── server # 所有服务端代码存放目录
    │   └── jsconfig.json
    └── models
        └── messages
            ├── index.js # 你的条件导入文件
            ├── client
            │   └── index.js # 客户端实现
            └── server
                └── index.js # 服务端实现

第二步：编写配置文件 #

1. 根目录jsconfig.json（基础公共配置）：

{
  "compilerOptions": {
    "baseUrl": ".",
    "target": "ESNext",
    "module": "ESNext",
    "moduleResolution": "Node"
  },
  "exclude": ["node_modules", ".meteor"]
}

2. src/client/jsconfig.json（客户端专属配置）：

{
  "extends": "../../jsconfig.json",
  "compilerOptions": {
    "paths": {
      // 单个文件映射
      "../../models/messages": ["./src/models/messages/client/index.js"],
      // 批量映射所有模型的客户端实现，后续新增模型无需修改配置
      "../../models/*": ["./src/models/*/client/index.js"]
    }
  }
}

3. src/server/jsconfig.json（服务端专属配置）：

{
  "extends": "../../jsconfig.json",
  "compilerOptions": {
    "paths": {
      // 单个文件映射
      "../../models/messages": ["./src/models/messages/server/index.js"],
      // 批量映射所有模型的服务端实现，后续新增模型无需修改配置
      "../../models/*": ["./src/models/*/server/index.js"]
    }
  }
}

配置完成后重启VSCode，打开客户端目录下的代码时，智能提示会自动匹配模型的客户端实现；打开服务端目录下的代码时，会自动匹配模型的服务端实现。

方案2：类型声明文件兜底（适合前后端代码未拆分目录的场景） #

如果你的项目没有严格拆分前后端代码目录，可以给条件导入文件补充类型声明，让智能提示能识别导出内容：
在src/models/messages目录下新建index.d.ts文件：

import { Meteor } from 'meteor/meteor';

declare module './index' {
  // 根据当前环境自动匹配导出类型
  export const Messages: Meteor.isClient 
    ? typeof import('./client/index').Messages 
    : typeof import('./server/index').Messages;
  // 其他需要导出的变量都可以按照上述格式声明
}

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