VSCode IntelliSense默认导入失效问题求助

库代码与配置 #

math.js #

export default sum(a, b) { return a + b });

index.js #

export sum from './math'; // VSCode报错：Declaration or statement expected.ts(1128)

.babelrc配置 #

{
  "plugins": [    
    "@babel/plugin-proposal-export-namespace-from",
    "@babel/plugin-proposal-export-default-from"
  ]
}

使用时的问题 #

引入库时无IntelliSense提示：

import { sum } from '@qual/utilities';

尝试修改ESLint规则（如下）但未解决问题：

"comma-dangle": ["error", {
   "arrays": "never",
   "objects": "never",
   "imports": "never",
   "exports": "never",
   "functions": "never"
}]

解决方法 #

1. 修复代码语法错误 #

首先修正math.js里的语法问题，默认导出缺少function关键字且多了闭合括号，正确写法：

export default function sum(a, b) { return a + b; }

2. 让TypeScript识别Babel扩展语法 #

VSCode的内置TypeScript服务不支持export sum from './math'这种Babel扩展语法，可通过以下方式解决：

• 添加类型声明文件：在库根目录创建index.d.ts，手动声明导出的类型：

  export declare function sum(a: number, b: number): number;
  

• 配置ESLint支持Babel语法：安装@typescript-eslint/parser，在.eslintrc.js中指定解析器并关联Babel配置：

  module.exports = {
    parser: '@typescript-eslint/parser',
    parserOptions: {
      ecmaVersion: 'latest',
      sourceType: 'module',
      babelOptions: {
        configFile: './.babelrc'
      }
    },
    plugins: ['@typescript-eslint']
  };
  

3. 改用标准ES导出语法（推荐） #

如果不想依赖Babel插件，直接使用标准ES语法，让TS和VSCode原生识别：
在index.js中替换原有导出代码：

import sum from './math';
export { sum };

这种写法无需额外配置，IntelliSense会自动生效，TS也不会报错。

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