JavaScript Tooling

After this lesson, you will be able to: Compare bundlers (Vite / esbuild / webpack), transpilers, linters, and formatters.

JS tooling has consolidated. Knowing what each tool does prevents 'why is my build broken' confusion.

Prerequisites:Advanced TypeScript

Bundlers — what + why

Bundler = takes your source files + dependencies → produces optimized output for browser/Node. Vite (Rollup-based for prod, esbuild for dev): the modern default for new projects. Sub-second HMR. esbuild: Go-based, blazing fast. Used inside other tools (Vite uses it for dev). Lower-level. Webpack: the legacy giant. Configurable, slower. Still widely used in older projects. For new projects in 2026: Vite for apps, esbuild or tsup for libraries.

Transpilers

Transpiler = JS source → JS source (different version). Why? Browser compatibility, JSX, TS. tsc: official TypeScript compiler. Slow but accurate. esbuild / SWC: fast Rust/Go transpilers. Most build tools use one of these now. Babel: the legacy default; still used for cutting-edge proposals and plugins. For most projects: rely on Vite or your framework's defaults; don't hand-configure.

ESLint + Prettier — the daily duo

Linter catches bugs; formatter handles style.

python

// eslint.config.js (flat config, 2026 default)
import tseslint from "typescript-eslint";

export default tseslint.config(
  {
    extends: [
      ...tseslint.configs.recommended,
      ...tseslint.configs.stylistic,
    ],
    rules: {
      "no-console": "warn",
      "@typescript-eslint/no-unused-vars": ["error", { argsIgnorePattern: "^_" }],
    },
  },
);

// .prettierrc.json
// {
//   "semi": true,
//   "singleQuote": false,
//   "trailingComma": "all",
//   "printWidth": 80
// }

// package.json scripts
// "lint": "eslint .",
// "format": "prettier --write ."

Biome — the upstart

Biome combines linter + formatter in one Rust binary. 10x faster than ESLint + Prettier. Younger ecosystem (some ESLint rules missing); adoption growing fast. Switch when: speed matters and the rules you need are supported. Stick with ESLint+Prettier otherwise, universal.

Common mistakes only experienced JS devs avoid

Hand-writing webpack configs in new projects. Use Vite. Skipping Prettier and arguing about formatting in PRs. Wasted hours. Running ESLint on Prettier-conflicting rules. Use eslint-config-prettier to disable conflicting rules. Skipping --cache on big projects. ESLint caches results between runs.

Quick Check

Why pair ESLint with Prettier instead of using one for everything?

Pick the cleanest answer.

←TypeScript in Depth (Advanced)

Back to JavaScript (Standalone Deep Dive)

Testing JavaScript→