Getting autocomplete in VS Code components JS files

[bbkane]

Hello! How do I enable VS Code Intellisense inside JS files?

What I'm doing:

• remove all my VS Code settings and extensions
• create a new project with npx @observablehq/framework@latest create
• Use all the defaults

$ npx @observablehq/framework@latest create
(node:10952) ExperimentalWarning: CommonJS module /home/linuxbrew/.linuxbrew/lib/node_modules/npm/node_modules/debug/src/node.js is loading ES Module /home/linuxbrew/.linuxbrew/lib/node_modules/npm/node_modules/supports-color/index.js using require().
Support for loading ES Module in require() is an experimental feature and might change at any time
(Use `node --trace-warnings ...` to show where the warning was created)
Need to install the following packages:
@observablehq/[email protected]
Ok to proceed? (y) y

npm warn deprecated [email protected]: This module is not supported, and leaks memory. Do not use it. Check out lru-cache if you want a good and tested way to coalesce async requests by a key value, which is much more comprehensive and powerful.
npm warn deprecated [email protected]: Glob versions prior to v9 are no longer supported
┌   observable create  v1.13.0
│
◆  Welcome to Observable Framework! 👋 This command will help you create a new app.
│  When prompted, you can press Enter to accept the default value.
│
│  Want help? https://observablehq.com/framework/getting-started
│
◇  Where should we create your project?
│  ./hello-framework
│
◇  What should we title your app?
│  Hello Framework
│
◇  Include sample files to help you get started?
│  Yes, include sample files
│
◇  Install dependencies?
│  Yes, via npm
│
◇  Initialize git repository?
│  Yes
│
◇  Installed! 🎉
│
◇  Next steps… ──────────╮
│                        │
│  cd ./hello-framework  │
│  npm run dev           │
│                        │
├────────────────────────╯
│
└  Problems? https://github.com/observablehq/framework/discussions

• open hello-framework in VS Code
• navigate to src/components/timeline.js
• try to hover over Plot.plot to get IntelliSense, and try to autocomplete properties

I've tried this on macOS and PopOS.

Maybe the issue is how the default import works?

import * as Plot from "npm:@observablehq/plot";

Or maybe I need to install some types definition?

I searched the repo for "vscode", "autocomplete", "intellisense", but I didn't see anyone else asking about this.

[mootari]

The pragmatic answer is to install and import Plot locally because it bundles its own types.

Afaik TypeScript does not support remote type declarations, which means that whatever types you want to reference have to be available locally. If you were to import from a package like d3 which has its types provided via DefinitelyTyped, you could install the respective type declarations (@types/d3) and then add the following to your tsconfig.json:

    "paths": {
      "npm:d3": ["./node_modules/@types/d3"]
    },    

Note that even though the path is allowed to contain a single wildcard, it won't do us any good in most cases because of the way DT packages are named (e.g. @foo/bar becomes @types/foo__bar):

      "npm:*": ["./node_modules/@types/*"]

(but again, don't!)

You can read more about the paths option here and here.

[mootari]

Do I need to change the import statement?

Yes, you'll need to change the import statement to

import * as Plot from "@observablehq/plot";

You can find more details about imports in the Framework docs: https://observablehq.com/framework/imports#local-imports

[mootari]

(Had a typo in my last answer - it still had the "npm:" prefix in it. Thanks @Fil!)

[bbkane]

Ok, yes that worked perfectly! To summarize:

• Install the package locally instead of via an npm import: npm install @observablehq/plot
• Remove the npm: from the import: import * as Plot from "@observablehq/plot";
• IntelliSense (autocomplete/hover for docs/etc) should work

Thanks so much! Do you know why npx @observablehq/framework@latest create doesn't install Observable Plot locally from the start? It seems like 99% of Observable Framework use cases will involve Observable Plot

[mbostock]

@bbkane We recommend npm: imports by default so that you can just use libraries without having to install them first.

[bbkane]

Thanks @mbostock, it helps to get a sense of the tradeoffs involved!