PHPStorm/WebStorm does not add import statements to vue component from library

I am working on a project where I am using Vue and Bootstrap-Vue.

As per Bootstrap-Vue's documentation (https://bootstrap-vue.js.org/docs/#tree-shaking-with-module-bundlers) when using a bundler one could import the used components locally to a custom component to reduce bundle size.

The problem is that PHPStorm (or WebStorm, tested in both) does not add the import statements for the Bootstrap-Vue components when auto importing from code completion. I searched a lot in the forums and could not find a solution.

My guess is that PhpStorm assumes BootstrapVue's components are available globally and don't mind to add the import statements when auto importing from code completion.

Right now I am importing all the BootstrapVue's components manually. I searched the forums and issue tracker and could not find a related solution.

For completeness, below is a snippet illustrating my request:

 

<template>
<BCard>
<IconButton />
</BCard>
</template>

<script>
// the import stament below was added manually by me
import {BCard} from 'bootstrap-vue';

// the import statement below was added automatically by the IDE
import IconButton from '@/js/components/IconButton';

export default {
name: 'MyApp',

components: {
BCard, // <-- added manually by me
IconButton, // <-- added automatically by IDE
},
};
</script>
7 comments
Comment actions Permalink

this is likely a result of fixing https://youtrack.jetbrains.com/issue/WEB-28512

Do you have bootstrap components registered globally via Vue.component(comp) or Vue.use(plugin)?

Sample project that shows up the issue would he helpful

0
Comment actions Permalink

There is no sense to register every component globally (webpack will bundle entire libraries, not just used components).

PHPStorm should add those references if component is not registered globally. Currently it registers only if component is inside same node package.

0
Comment actions Permalink

>PHPStorm should add those references if component is not registered globally. 

It does add them, as far as I can check

 

>Currently it registers only if component is inside same node package.

please share a sample project the issue can be reproduced with

0
Comment actions Permalink

As of WebStorm 2020.2, I can still reproduce this issue. As requested, here is a minimal sample project for reproducing the issue https://gitlab.com/jhartnett/webstorm-vue-import-issue. Instructions are included in the repo's README.md.

The detection of globally added components is overzealous and triggers if global registrations are detected whether or not they are actually used (this is understandable since determining if the registrations are in use is undecidable in general). Since there's no perfect automated solution, can we have an option in settings to enable/disable the fix in https://youtrack.jetbrains.com/issue/WEB-28512?_ga=2.170741539.224012963.1596826451-1005407315.1569199717? Or even better, a blacklist to disable the fix for specific components/modules? That way the fix could be on by default, but those of us who don't use global registrations to allow for tree-shaking could disable it to get auto-importing.

Please let me know if you want me to create a ticket for this in youtrack.

0
Comment actions Permalink

Yes, the youtrack ticket would be appreciated!

0

Please sign in to leave a comment.