CODEWITHSUNDEEP
javascriptintellij-ideanpmecmascript-6babeljs
Guy
Guy

Reputation: 13336

Auto-completion in Webstorm for my custom npm module (ES6/Babel)

When I use material-ui package I get nice auto-completion in Webstorm (ctrl+space):

autocompletion material

I thought it might have something to do with the fact the package includes an index.es.js file:

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';
...

So I generated my own index.es.js in my custom npm module and put it next to the transpiled 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 };
...

And yet I get no auto-complete:

autocomplete me

Any idea why?

Upvotes: 1

Views: 338

Answers (2)

colin moock
colin moock

Reputation: 1198

In WebStorm 2019.3, here are the steps I follow to force Code Completion (including auto-import) to work for a custom, self-published NPM package:

  1. Ensure that the project, itself, has a package.json file at the root of the project, and that package.json includes the desire package in the "dependency" object. For example:
{
  "name": "testproject",
  "version": "1.0.0",
  "dependencies": {
    "@yourname/yourpackage": "latest"
  }
}

  1. In WebStorm, select File > Invalidate Caches / Restart...

  2. To enable auto-import for package contents, ensure that the JavaScript file in which the package is being used has AT LEAST ONE export statement. For example, in the following code, an export is present, so Code Completion auto-imports the package function isNil():

export function init () {
  isNil
}

By comparison, the following code does not contain an export statement, so isNil() is not automatically imported:

function init () {
  isNil
}

For me, all three of the preceding steps are necessary for Code Completion to work for my own NPM packages in WebStorm.

Upvotes: 0

Guy
Guy

Reputation: 13336

Found the answer:

Had to add a jsnext:main field to the package.json of the npm module:

package.json:

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

Webstorm recognizes the package's inner exports.

Upvotes: 2

Related Questions