Permanently change default import style
Hello, I have a project where the import style for the components we've made is a module import structured as:
import { component } from '@company/project.subfolder.subfolder.component'This import is technically imported from our published library of components in our node_modules folder. The default behavior for Webstorm when I try to import via keyboard shortcut is to make the import relative to the file as:
import { component } from ‘project/subfolder/subfolder/component’However, if I open the suggestions menu (with alt+enter), I sometimes see an import option in there with the module import style I want. Usually as one of the “ts” marked options at the bottom of the suggestions menu. Is there a way to make this the default option to import via keyboard shortcut? I have tried combinations of all of the import style options in the settings, and also tried marking our library in node_modules as a resource root, but to no success.
Please sign in to leave a comment.
I would like to inquire if you have enabled the Use paths relative tsconfig.json option in Settings | Editor | Code Style | TypeScript | Imports. This option takes precedence over the Use path mappings from tsconfig.json setting when activated.
If enabling this option does not resolve the issue, could you please attempt to create a sample project that demonstrates the problem?
Hi Elena,
Thanks for responding, I appreciate it! I am really trying to get my team to get Webstorm licenses as I vastly prefer it to VS Code, but due to the nature of our project, this one issue has been hindering me. I have tried using that setting as well yes. I will try to create a sample project, but it may require some intensive work since I think the issue is derived from the build system my team uses. Let me try to further explain the problem in the meantime. Due to the way our project is set up, I am a bit worried that this isn't possible.
We use a build system called Bit. This publishes our components, and in the course of further development of components, our imports are supposed to point to the published library. For example, I develop component A, and then component A gets published into our library present in node_modules under our package @company, in a folder “design.base.componentA”. Now when I go to develop component B, which in the file system/project root is in the same “design/base” folder, I want to import “@company/design.base.componentA”. But instead, Webstorm obviously wants to import “../componentA” or “design/base/componentA”. I have tried a few path aliases in our tsconfig.json, this one almost fixes the issue:
But now the issue is that the imports do not follow the directory import style even though our library is set up for it, and if I try to import componentA, it will look like
If there was a way to trim off this “/componentA”, I think that would also fix my issue. Regardless, if there is a way to have Webstorm prefer/default to imports from our module in node_module over direct imports from the file system/project root, that would be great. I have also tried marking our @company library as a resource root, but that didn't seem to help.
If it provides a different path to a fix, my suggested intention actions window looks like this:
Is it possible to have that ts option be the default intention action so that can be the default quick fix?
Do you have the
index.tsin thedesign.base.componentAfolder? In this case, with the Use directory import enabled in Settings | Editor | Code Style | TypeScript | Imports, the auto-import should work as desired.