Ionic v5 - Webstorm - templates setup for code-completion

I have been trying to get Webstorm (v 2020.1.2) working to provide intellisense/code autocompletion on html/templates without luck.

Tried different things, like not excluding node_modules/@angular & node_modules/@ionic directories from indexing, then invalidate cache and restart, also have IonicModule imported on app module, and still no luck (e.g.: typing “ion…” won’t bring the components list)

Even simple Angular *ngFor is not being suggested so I guess I’m missing something bigger than just ionic setup. However Ctrl+click on component variable included in template file correctly opens ts one.

I do have Webstorm’s Angular & AngularJS plugin setup.

This is the output from ionic info:

Ionic:

Ionic CLI : 6.16.1 (C:\Users\Julian\AppData\Roaming\nvm\v12.14.0\node_modules@ionic\cli)
Ionic Framework : @ionic/angular 5.6.9
@angular-devkit/build-angular : 12.0.5
@angular-devkit/schematics : 12.0.5
@angular/cli : 12.0.5
@ionic/angular-toolkit : 4.0.0

Capacitor:

Capacitor CLI : 3.0.1
@capacitor/android : not installed
@capacitor/core : 3.0.1
@capacitor/ios : not installed

Utility:

cordova-res : 0.9.0
native-run : 1.4.0

System:

NodeJS : v12.14.0 (C:\Program Files\nodejs\node.exe)
npm : 6.13.4
OS : Windows 10

Any ideas?

Ended up finding the solution.

Long story short: don’t mess up with node_modules folder (e.g.: right click - ‘Mark Directory as…’) - apparently Webstorm needs to be able to index libs on it, in order to provide with auto-completion for them.

Brief explanation is here:

My experience doesn’t align with your “long story short”. I only casually skimmed your SO link, but I don’t think it says what you took from it, either.

Of course, if you’re happy with your resolution, that’s the most important thing, but for other people stumbling across this thread, you absolutely can mark node_modules as “excluded” without losing autocompletion on Ionic or Angular core components in templates.

I’m running WebStorm 2021.2, but have done this for several years without any problems. There may indeed be something related to this topic going on with your situation, but I don’t think your proposed restriction is warranted.

It also takes forever to index node_modules of a typical Ionic Angular project when one is frequently running npm update, so there is definitely a real benefit to marking it (and your build directory) as excluded.

thanks so much for the information @rapropos - I should have been more explicit with my own post.
What I have done is (maybe not all steps were needed, but worked for me):

  • Closed the project in Webstorm
  • Removed .idea folder
  • Removed node_modules folder
  • Reopen project in Webstorm
  • npm install (from webstorm terminal)

Subsequenty the node_modules folder got labeled back as “library root” (which apparently I messed up with, and don’t even remember how I did :slight_smile: ).

After that, if I right click on node_modules folder, then select “Mark Directory as”, “Not Excluded” option is there, so you’re absolutely right (seems to get excluded by default - and still autocomplete works).

I’d think removing node_modules and re-creating it may not be necessary (takes time :slight_smile: ) - and there’s probably a quicker way to restore to proper state, so maybe other major tips on things to consider for auto-completion (other than not messing up with folders/setup) may help others, if you know?

1 Like