Skip to content

bug: Code Completion and Auto Import for ionic-vue aren't working out-of-the-box for WebStorm #24298

Closed
@daviesdoclc

Description

@daviesdoclc

Prerequisites

Ionic Framework Version

  • v4.x
  • v5.x
  • v6.x

Current Behavior

Most Ionic components such as <IonCardHeader> aren't found when using code completion nor are they auto-imported when using WebStorm 2021.3. Even if I manually import, the properties on it aren't found (for example 'color'). Interestingly enough <IonCard> is found and the properties are able to be code completed. However, even that component won't auto import. I still have to do that manually.

It seems the signature in proxies.d.ts aren't what WebStorm is expecting. It does fallback to web-types.json. But that file only has IonCard in it, not IonCardHeader. So that list looks incomplete. I think because build-web-types.js ignores stuff from core/dist/docs.json that don't have a 'usage.vue' defined. So web-types.json is pretty incomplete.

If I use ionic-react, then code completion AND auto-import BOTH work as they should. It seems ionic-vue is broken (or WebStorm's interpretation of what is a component type is broken).

Expected Behavior

I would expect when I type '<IonCardHe' that I can auto complete and select '<IonCardHeader>'. That should auto import the component (and add it to the components section of the Vue options). I should then be able to type 'color' as a property and have it be found. Currently none of this works.

Steps to Reproduce

Create a ionic-vue project (ionic start --type=vue)

Edit Home.vue and type '<IonCardHe' somewhere in the <template>.

Notice it is not auto-completing to <IonCardHeader>.

Go ahead and add an import and components entry for IonCardHeader. Now notice that the properties aren't shown when trying to type <IonCardHeader color>.

Code Reproduction URL

No response

Ionic Info

[WARN] Error loading @capacitor/ios package.json: Error: Cannot find module '@capacitor/ios/package'

   Require stack:
   - /Users/daviesd/.nvm/versions/node/v14.17.6b/lib/node_modules/@ionic/cli/lib/project/index.js
   - /Users/daviesd/.nvm/versions/node/v14.17.6b/lib/node_modules/@ionic/cli/lib/index.js
   - /Users/daviesd/.nvm/versions/node/v14.17.6b/lib/node_modules/@ionic/cli/index.js
   - /Users/daviesd/.nvm/versions/node/v14.17.6b/lib/node_modules/@ionic/cli/bin/ionic

[WARN] Error loading @capacitor/android package.json: Error: Cannot find module '@capacitor/android/package'

   Require stack:
   - /Users/daviesd/.nvm/versions/node/v14.17.6b/lib/node_modules/@ionic/cli/lib/project/index.js
   - /Users/daviesd/.nvm/versions/node/v14.17.6b/lib/node_modules/@ionic/cli/lib/index.js
   - /Users/daviesd/.nvm/versions/node/v14.17.6b/lib/node_modules/@ionic/cli/index.js
   - /Users/daviesd/.nvm/versions/node/v14.17.6b/lib/node_modules/@ionic/cli/bin/ionic

Ionic:

Ionic CLI : 6.18.1 (/Users/daviesd/.nvm/versions/node/v14.17.6b/lib/node_modules/@ionic/cli)
Ionic Framework : @ionic/vue 5.9.1

Capacitor:

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

Utility:

cordova-res : not installed globally
native-run : 1.5.0

System:

NodeJS : v14.17.6 (/Users/daviesd/.nvm/versions/node/v14.17.6b/bin/node)
npm : 7.22.0
OS : macOS Big Sur

Additional Information

No response

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions