Search code examples
intellij-ideaecmascript-6phpstormwebstorm

How to ignore typings-field when not using TypeScript in PhpStorm?

In JetBrains PhpStorm 2019.3, I use JavaScript ES6. Now, if I install e.g. Foundation for Sites and use it with the following code in a file called main.js:

import {Dropdown, DropdownMenu, Accordion} from 'foundation-sites';

When CTRL + click on 'foundation-sites', PhpStorm sends me to :

node_modules/foundation-sites/dist/js/foundation.d.ts

even though I do not use TypeScript. The expected behaviour would be jumping to:

node_modules/foundation-sites/dist/js/foundation.es6.js

I can change this behaviour by changing the typings field in the foundation-sites package.json:

-  "typings": "dist/js/foundation.d.ts",
+  "typings": "dist/js/foundation.es6.js",

However, changing package.json fields in third party code just to fix PhpStorm moving to the wrong file seems inconvenient. How can I make PhpStorm ignore TypeScript references and fields when not using TypeScript?

Solution

  • There is no way to tell the IDE to ignore typings field - it uses the TypeScript definition files to power its code completion for library methods. Normally it uses the following rules for navigation:

    • If type definitions are installed in the node_modules/@types folder, IDE tries to navigate to the JavaScript sources of the library when using Ctrl+click. Please note that this only works for symbols that are defined as classes, variables or functions (and not interfaces or types) in the .d.ts file.
    • If type definitions are available inside the module, IDEA does not index the JavaScript source by default and, thus, can't navigate to them. To index these files, you need choosing Include Javascript Files from module folder right-click menu.

    The worse thing is that, though the foundation-sites bundles typings with it, these typings are not correct (see https://github.com/foundation/foundation-sites/issues/11653 and linked tickets), so IDEA can't map the ES6 imports to interfaces from foundation.d.ts.

    The only workaround I can think of is commenting out the "typings": "dist/js/foundation.d.ts", in package.json - IDEA will then use declarations from foundation.es6.js for both completion and navigation