Ionic Code Completion and Syntax Highlighting

Ionic Framework
1

I am learning Notepad++ to write Ionic apps and pages. Notepad++ has the ability to select a language for code completion and syntax highlighting, but Ionic is not an installed “language”. At least, I don’t see it under Language > I. How can I get Notepad++ to help me write Ionic code? (When I say, “Ionic code”, I mean tags like <ion-app>, <ion-page>, <ion-content>, etc. with their accompanying attributes.)

Second, how do I get Visual Studio 2019 to do the same thing?

What editors do you prefer to use to write Ionic apps and why do you like them so much?

2

WebStorm, because I’ve been using JetBrains IDEs in Java, JavaScript, TypeScript, Go, Python, and C for over a decade. I believe there’s a 30-day trial version; you can see what you think if you like.

3

VScode - has a truckload of extensions for support on whatever you may need, including code snippets.

And is free.

ps. Ionic is strictly not a language but a library for which you likely need a snippet library. The language support is Javascript and/or Typescript, And then React, Angular or whatever you are using

4

Any special instructions for configuring WebStorm to auto-suggest and highlight Ionic syntax?

5

I read about VS Code and have seen some YouTube videos about it. I have the full-blown, paid-for Visual Studio 2019 and my hope was that, if VS Code can do it, Visual Studio Professional should, too. I just don’t know how to configure VS to show drop-down hints when I type <ion- and then suggest values for attributes. Any tips?

6

From the IDE’s POV, Ionic is a bunch of components like any other bunch of components. I use Angular, so can’t directly speak to React or Vue (although both are also supported). If IonicModule is live in the environment you’re working in (what “live” means depends on how you structure your projects WRT modules - for me, all it means is “IonicModule is imported in the app module”), then code completion should do what you want when you type <ion-whatever. Naturally, the same is also true of any components you define - their input and output properties will be available for completion and popup documentation.

7

That makes sense. It’s probably like using an editor that knows xml structure, but then you tell it that the kind of xml you’re writing is xslt and it suggests appropriate tags and attributes and does the syntax highlighting.

1 Like
8

No clue about visual studio code…

9

Thank you for this suggestion. In Visual Studio, I have the following three lines of code within my <head> tag, which I copied and pasted from the Ionic web site:

<script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core/dist/ionic/ionic.esm.js"></script>
<script nomodule src="https://cdn.jsdelivr.net/npm/@ionic/core/dist/ionic/ionic.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core/css/ionic.bundle.css" />

Yet, Visual Studio does not suggest anything to me when I write <ion-. Shouldn’t the loading of the module tell VS to help me with Ionic code completion since I’ve loaded the module in the header?

10

For vs code there are various extensions to support code completion. They have their own way such as i-button and then u get the full code