DEV Community

Cover image for npm packages, types, and the quick-fix install
JSLab
JSLab

Posted on

npm packages, types, and the quick-fix install

#javascript #typescript #showdev #npm

JSLab feature notes: one docs page, explained. Today: npm packages.

A scratchpad without packages is a calculator. Here's how JSLab, a JavaScript & TypeScript scratchpad for macOS, handles them.

Install once, every tab can import it

⌘I (or Tools → NPM Packages…, or the activity bar) opens the package sheet. Search the registry as you type and click Add, or type name@version and press Return: exact versions and ranges both work.

import { nanoid } from "nanoid";
nanoid(); // Auto Log shows a fresh id on every run
Enter fullscreen mode Exit fullscreen mode

Packages install into one project that every tab shares, so every other tab can import a package you add in one tab straight away, without restarting JSLab.

Types and autocomplete

The editor reads the types of what you install, so imports autocomplete and type-check. Inside an import's quotes, installed packages are suggested as you type.

A package that doesn't ship its own types needs its @types package. Turn on Install Types Automatically in Settings → NPM and JSLab adds it whenever an installed package has no types of its own.

The quick-fix install

This is the part I use most. Import something you haven't installed:

import dayjs from "dayjs";
dayjs().format("dddd, MMMM D");
Enter fullscreen mode Exit fullscreen mode

The import is underlined in the editor, with a quick fix to install the package (or its @types package). In a browser tab, the failed run also shows an error row with an Install button and the package's name. Either way, the tab runs again by itself once the install finishes.

In a Bun tab, Bun usually fetches a missing package by itself when it runs; installing it still gives the editor its types.

Keeping things tidy

The Installed list shows each package's installed and latest version, with Update and Remove on every row and Update All for everything. A major version bump is marked Major before you install it.

Two safety defaults worth knowing:

  • Install scripts (postinstall and friends) are blocked by default. When an install needs one, the sheet offers Allow Scripts and Retry.
  • JSLab uses its own .npmrc, never your ~/.npmrc. Edit it in Settings → NPM for private registries; tokens never appear in JSLab's logs.

JSLab launches Nov 15. The full page: https://js-lab.app/docs/npm-packages

Top comments (0)