WebStorm doesn't work correct with Ionic framework
Hi! I'm using WebStorm 2018.1.3 with Ionic framework (based on Angular and TypeScript), and I met some issues. I don't know are they a bugs or not.
- Each page has it's own directory with 3 files with equal name and different extensions: page.ts, page.html and page.scss. Completion for classes between SCSS and HTML doesn't work. It worked for me for about a month ago in WebStorm 2017. No suggestions in HTML for class names nor for usual completion nor for double Ctrl+Space completion. But if hit Alt+Enter it suggests to create selector for my SCSS file, but it'll put this selector in the end of file, not in corresponding page-selector.
- Adding Ionic attributes adds extra symbols ="" on any attribute even if this attribute doesn't have to. For example, if I'll try to add for "button" tag attribute "ion-button" with using autocompletion it will became `ion-button=""`, instead of just `ion-button` as it should be. How I can edit attributes list to remove from Ionic's attributes those extra symbols? I don't want to disable adding ="" for attributes in HTML, which need them.
- Why WebStorm says for Ionic ionView functions "unusable"? For example, ionViewWillEnter(), which calls every time page is going to be loaded. And for this functions there is no any completion.
Please sign in to leave a comment.
>No suggestions in HTML for class names nor for usual completion nor for double Ctrl+Space completion.
works for top-level selectors, doesn't work for classes nested in page selectors. Please follow https://youtrack.jetbrains.com/issue/WEB-32929 for updates
>Adding Ionic attributes adds extra symbols ="" on any attribute even if this attribute doesn't have to
Please vote for https://youtrack.jetbrains.com/issue/WEB-32930 to be notified on any progress with it
>Why WebStorm says for Ionic ionView functions "unusable"?
by "unusable", do you mean "unused"? Only those methods that are explicitly used in your code are marked used... If the IDE can't find the method usages, it will be marked unused. You can disable the warning for ionic lifecycle methods by suppressing the inspection for statement
Thank you for your help!
1. Ok, I'll see for updates on this issue.
2. I already voted and I'll see for any updates on this issue.
3. Yes, there should be "unused". Ok, no problem with it, just asked to be clear.
And is there a way to add completion for Ionic lifecycle functions?
No:( WebStorm can only complete those methods that are explicitly inherited. But ionic components do not explicitly extend NavController, so completion would require introducing special hacks
Ok, thank you for your help!
For supporting well Ionic LifeCycle you could create your interfaces:
export declare interface OnViewWillEnter {ionViewWillEnter(): void;
}
Then implement OnViewWillEnter will help you with the autocomplete and didnt show the Unused method warning