VSCode Intellisense Auto Imports from @ember

1

Ok, this is clearly a blind-spot in my knowledge around how intellisense-driven auto-imports work in VSCode:

In ember projects on VSCode, when I reference a not-yet-used-in-the-current-file export from a library, for example doSomething(..), etc., VSCode helpfully pops up the potential matches to auto-add an import at the top of the file… except for Ember exports.

I have @types/ember installed, I’m running the Unstable Ember Language Server extension (and have tried the regular one), etc., etc.

I can post a bunch of config files, but even a new vanilla project seems to not do this. What am I missing?

2

…and I should add - I’m on a Mac, this project is 3.26, the others are all 3.20+, everything is current and up to date.

3

This is a quirk of how VS Code and the TS language server handles automatic imports: by default, for the sake of both performance and correctness—

  • performance: avoiding eagerly indexing all of node_modules
  • correctness: you should normally not use transitive dependencies

—the language server only auto-completes for (a) dependencies listed directly in package.json or (b) dependencies you have already imported in your project directly. If/as Ember moves to a world where folks actually depend directly on a real @ember/<whatever> package rather than ember-source, this will go away. That still seems to be some way off, though.

4

@chriskrycho I see that a fresh install of ember-cli-typescript includes separate DefinitelyTyped packages for all the ember-source provided package names directly in the app’s package.json. Should that be enough to get the completion?

If so, this would be an option, even for people who aren’t authoring in typescript:

diff --git a/package.json b/package.json
index 18f3006..61221a8 100644
--- a/package.json
+++ b/package.json
@@ -27,6 +27,33 @@
     "@ember/test-helpers": "^2.2.5",
     "@glimmer/component": "^1.0.4",
     "@glimmer/tracking": "^1.0.4",
+    "@types/ember-data": "^3.16.13",
+    "@types/ember-data__adapter": "^3.16.1",
+    "@types/ember-data__model": "^3.16.2",
+    "@types/ember-data__serializer": "^3.16.1",
+    "@types/ember-data__store": "^3.16.1",
+    "@types/ember-qunit": "^3.4.13",
+    "@types/ember-resolver": "^5.0.10",
+    "@types/ember__application": "^3.16.2",
+    "@types/ember__array": "^3.16.4",
+    "@types/ember__component": "^3.16.4",
+    "@types/ember__controller": "^3.16.4",
+    "@types/ember__debug": "^3.16.3",
+    "@types/ember__engine": "^3.16.2",
+    "@types/ember__error": "^3.16.1",
+    "@types/ember__object": "^3.12.5",
+    "@types/ember__polyfills": "^3.12.1",
+    "@types/ember__routing": "^3.16.14",
+    "@types/ember__runloop": "^3.16.3",
+    "@types/ember__service": "^3.16.1",
+    "@types/ember__string": "^3.16.3",
+    "@types/ember__template": "^3.16.1",
+    "@types/ember__test": "^3.16.1",
+    "@types/ember__test-helpers": "^2.0.0",
+    "@types/ember__utils": "^3.16.2",
+    "@types/htmlbars-inline-precompile": "^1.0.1",
+    "@types/qunit": "^2.11.1",
+    "@types/rsvp": "^4.0.3",
5

Thanks to both of you - very helpful. I’ll try those type libs tomorrow and report back!

6

And… success :rocket: - thanks again - hopefully this post helps others. With the separation of Ember into the various sub-modules, this also really accelerates “learning where stuff is”.

… for those new to Ember: typing, for example, isNone shows this:

image
image1368×164 21.4 KB

…and automatically inserts this at the top of your file:

image
image1008×68 9.34 KB

Thanks again

2 Likes
7

…final note: here’s the npm command to install the above-listed @types entries to an ember project:

npm i -D @types/ember-data @types/ember-data__adapter @types/ember-data__model @types/ember-data__serializer @types/ember-data__store @types/ember-qunit @types/ember-resolver @types/ember__application @types/ember__array @types/ember__component @types/ember__controller @types/ember__debug @types/ember__engine @types/ember__error @types/ember__object @types/ember__polyfills @types/ember__routing @types/ember__runloop @types/ember__service @types/ember__string @types/ember__template @types/ember__test @types/ember__test-helpers @types/ember__utils @types/htmlbars-inline-precompile @types/qunit @types/rsvp
1 Like
9

WebStorm doesn’t seem to be able to pick this up :thinking: Is anyone here from JetBrains’ side of the world that managed to make it work?