Autocomplete in html files?

[jeffreymeng]

Is there a way for it to autocomplete typescript in .html typescript files?

So in webstorm(trial), it works like this:

In atom .html files, however, there are no autocomplete functions.

This is the same question as the one on Stack OVerflow, but has no answers yet.

Thank You

[jonyeezs]

This is a duplicate of #1278.

This pkg focuses mainly on ts files. I don't think this would be a typescript feature?

I've proposed, in that linked issue, to have atom-typescript to open an API so we can have plugins into the IDE.

And hopefully with enabling the TS language service plugin and a package that can utilize this atom-typescript plugin would make this work.

[jonyeezs]

or maybe have atom-typscript configurable to install plugins and expand its acceptable file types.

....hmmm maybe that would be an easy way...

[lierdakil]

FWIW, making accepted file types configurable is trivial. Grammars are defined here:

atom-typescript/lib/main/atom/utils/atom.ts

Line 25 in b4fb237

return ["source.ts", "source.tsx", "typescript"].includes(scopeName)

File extensions (because we need to detect typescript files that aren't open in editors necessarily) are a couple lines below:

atom-typescript/lib/main/atom/utils/atom.ts

Line 29 in b4fb237

return [".ts", ".tst", ".tsx"].includes(ext)

Changing those hard-coded arrays to atom.config.get('atom-typescript.typescriptGrammars') for example should be the long and short of it.

However, I'm really not sure it'll be enough.

[jonyeezs]

@lierdakil yeah that would be the easy part. I'm hoping that including a service language plugin that would support html would just work.

I'll try experiment with this

[admosity]

Maybe a combination of the angular language service: https://angular.io/guide/language-service

And: https://github.com/atom/atom-languageclient

For targeting just angular html.

[github-actions]

This issue has been marked as stale because it did not have any activity for the last 90 days or more. Remove the stale label or comment or this will be closed in 14 days

[DerZyklop]

I am still interested in this. If anyone has a workaround or hints how to get this, please post it here
✌

[arnotes]

im also interested

[DerZyklop]

@jonyeezs @arnotes @jeffreymeng Does it make sense to open a new Ticket? #1355 and #1278 got closed by bot, but are still a thing.

[lierdakil]

@DerZyklop, it does not. The issue of supporting HTML specifically is out of scope frankly. Here's what you should do:

1. Write/find a language service plug-in for html support (some say angular language service plug-in might work, but I have no idea)
2. Install & enable this plug-in in your tsconfig.json.
3. Add html to the list of TypeScript files/grammars in Atom-TypeScript settings.

Stuff should work. If it doesn't, open an issue. But don't open an issue if you're stuck on step (1) or (2), since those are not directly related to this project and this bug tracker is not a general TypeScript help forum.

[XephyLon]

Opened an Angular project, added the LS plugin in

{
  "compileOnSave": false,
  "plugins": [{
    "name": "@angular/language-service"
  }],
}

Then added .component.html and .html to the supported files

Restarted Atom and nothing works. Was hoping for any sort of error to pop up at least.

Please let me know if I'd done something wrong or if that's just how it should be.

[XephyLon]

OK here's an update.

[lierdakil]

Welp, I've spent a couple hours fiddling with this, and found this comment in the bowels of Angular's language service plug-in:

        //    Plugin augments TS language service to provide additional Angular
        //    information. This only works with inline templates and is meant to be
        //    used as a local plugin (configured via tsconfig.json)

so this apparently won't work. (note: I have no idea what are inline templates, since I don't do angular, but I'm guessing not html files)

Note, if targeting Angular specifically, you probably don't actually want to use Atom-TypeScript at all. Instead, you should perhaps look towards integrating @angular/language-server with Atom via atom-languageclient. A basic integration should be more or less straightforward. I wouldn't mind whipping up a proof of concept provided I won't have to maintain that
-- have my hands full as it is.

[lierdakil]

Okay, I'm at a loss. So I've slapped together a prototype https://github.com/lierdakil/atom-ide-angular. I've made a few such packages and seen a lot more, so it shouldn't have been an issue. And it's fine, the language server works, it accepts requests, it prints debug messages to console, all's fine. The only problem is all replies are empty: it returns empty diagnostics for obviously broken files, it returns empty completions, empty hover tooltips, so basically it "works", but does nothing. I don't have any more time to dedicate to this, and considering I don't know first thing about Angular, maybe I'm just missing something stupid. If anyone wants to try to figure this out, feel free to fork the repo, hack on the code, release the package, etc.

[XephyLon]

Forked. Will check it out now

[XephyLon]

I was expecting it to show empty replies but it's not showing anything, actually. Also how do I check if the LS is running? I've never done this before and I'd appreciate a bit of help