TypeScript Clearly & Quickly

Beginner friendly

My goal in developing quick-lint-js is to make JavaScript (and TypeScript) easier for beginners to learn by catching their silly mistakes.

TypeScript's compiler already catches coding mistakes for you. Its fantastic Visual Studio Code extension is the main reason behind its popularity. However, TypeScript is not easy. It has over 80 keywords and many archaic features for compatibility with Node.js, browser, and JavaScript.

What can quick-lint-js do that TypeScript's extension and compiler can't? Let's walk through some examples.

Keyword confusion

I am dyslexic, so sometimes simple issues are hard for me to notice. Can you tell what's wrong with the following code by looking at TypeScript's error messages? Hint: I often confuse different keywords which start with the same letter.

it('matches on first word', await () => {
  await table.searchForItem('Hello');
  await table.expectItemsCount('vis', 1);
});

it('matches on first word', await () => {
  await table.searchForItem('Hello');
  await table.expectItemsCount('vis', 1);
});

TSX is not a TypeScript superset

TSX is TypeScript with JSX (React) extensions. JSX is a backwards-compatible extension to JavaScript, so naturally TSX is a backwards-compatible extension to TypeScript, right?

Unfortunately, some valid TypeScript code is not valid TSX. If you copy-paste code from a .ts file to a .tsx file, you might be in for a surprise:

const trim = <T>(f: (a: T) => boolean) => {
  return (arg1: any, arg2: T) => {
    return f(arg2);
  };
};

const trim = <T>(f: (a: T) => boolean) => {
  return (arg1: any, arg2: T) => {
    return f(arg2);
  };
};

JSX is not HTML

In HTML, whitespace is mostly unimportant, and elements can be placed side-by-side naturally. JSX mimics HTML but is its own language with its own quirks, including JSX fragments and JavaScript's famous ASI.

When you make a mistake with JSX, TypeScript does tell you about it, but a beginner might not know how to fix the problem. quick-lint-js gives you better hints so you can quickly fix your code:

export function Spacer() {
  return
    <EuiSpacer size="xs" />
    <EuiHorizontalRule margin="none" />
    <EuiSpacer size="xs" />
}

export function Spacer() {
  return
    <EuiSpacer size="xs" />
    <EuiHorizontalRule margin="none" />
    <EuiSpacer size="xs" />
}

Emoji...⁉️

Since its iPhone debut in 2008, emoji has been the primary method of communication among zoomers. What better place than TypeScript variable names for our favorite emotive icons? Sadly, the designers of TypeScript (and JavaScript) don't let us have fun. 🙁

let 💩 = 'TypeScript';

let 💩 = 'TypeScript';

Excited to try quick-lint-js? Installation couldn't be simpler! No package.json nonsense or config file headaches. Just plug quick-lint-js into your editor and it works:

• install quick-lint-js
• 🌐 try in browser
• code on GitHub

Fast linting

quick-lint-js's name would be nonsense if it wasn't quick. How quick is quick? Beyond human perception.

Quick install

Installing quick-lint-js is fast and easy. Once it's installed, it lints immediately. No configuration required!

quick-lint-js supports per-project configuration, but you rarely ever need it. Instead, spend more time coding and less time configuring by taking advantage of quick-lint-js's sensible defaults.

Quick lint

You don't need to install quick-lint-js often. What really matters is day-to-day usage. How fast is quick-lint-js at checking code as you type? See for yourself:

Even on my fast computer, TypeScript and ESLint make coding feel sluggish. But with quick-lint-js, everything is snappy and responsive. (Relatively snappy and responsive, that is. Visual Studio Code is has its own layer of slowness. quick-lint-js feels even better in Vim.)

• install quick-lint-js
• 🌐 try in browser
• code on GitHub

What's next?

What is in quick-lint-js's future for version 4.0? I am going to play with Vue in 2024, so implementing Vue SFC in quick-lint-js (and also Svelte and plain HTML) sounds like the perfect next step. While focusing on TypeScript, I accumulated a big backlog of tiny bugs, and also thought of some easy-to-implement lint rules.