Question

当我使用material-ui包时，我在Webstorm中获得了很好的自动完成功能（ctrl + space）：

我认为它可能与包含index.es.js文件的事实有关：

import _AppBar from './AppBar';
export { _AppBar as AppBar };
import _AutoComplete from './AutoComplete';
export { _AutoComplete as AutoComplete };
import _Avatar from './Avatar';
export { _Avatar as Avatar };
import _Badge from './Badge';
export { _Badge as Badge };
import _BottomNavigation from './BottomNavigation';
...

所以我在自定义的npm模块中生成了自己的index.es.js，并将它放在已编译的index.js旁边：

import {ActionTypes as _ActionTypesElements} from './reducers/elements/elements';
export { _ActionTypesElements as ActionTypes };

import {ActionTypes as _ActionTypesAppState} from './reducers/appState/appState';
export { _ActionTypesAppState as ActionTypesAppState };

import _appStateActions from './reducers/appState/appState_actions';
export { _appStateActions as appStateActions };
...

然而我没有自动完成：

知道为什么吗？

Answer 1

找到答案：

必须在npm模块的package.json中添加 jsnext：main 字段：

的package.json：

 ...
 "module": "./index.js",
 "jsnext:main": "./index.es.js",
 ...

Webstorm识别包的内部导出。

Answer 2

在WebStorm 2019.3中，我执行以下步骤来强制代码完成（包括自动导入）以用于自定义，自发布的NPM包：

请确保项目本身在项目的根目录中具有package.json文件，并且package.json在“ dependency”对象中包含了desire软件包。例如：

{
  "name": "testproject",
  "version": "1.0.0",
  "dependencies": {
    "@yourname/yourpackage": "latest"
  }
}

在WebStorm中，选择“文件”>“使缓存无效/重新启动...
要对包内容启用自动导入，请确保使用该包的JavaScript文件具有AT LEAST ONE导出语句。例如，在以下代码中，存在导出功能，因此“代码完成”功能自动导入包函数isNil（）：

export function init () {
  isNil
}

通过比较，以下代码不包含export语句，因此isNil（）不会自动导入：

function init () {
  isNil
}

对我来说，前面的所有三个步骤对于代码完成对于WebStorm中我自己的NPM包都是必需的。

Webstorm中自动完成我的自定义npm模块（ES6 / Babel）

2 个答案: