Quality and bundling — Node.js, npm and testing

Tools that take care of your code

As a project grows, writing code "by hand" is not enough: you need tools that detect errors, unify the style and prepare the code for production. Let's look at the three main families.

Linters: ESLint

A linter analyzes your code without running it and warns about problems: unused variables, dangerous comparisons (== instead of ===), potential errors and violations of the team's style rules. The most used one in JavaScript is ESLint.

npm install --save-dev eslint
npx eslint src/        # analyzes the src folder
npx eslint src/ --fix  # automatically fixes what it can

The linter catches things like this before they break in production:

let total = 5;      // 'total' is never used  -> linter warning
if (x = 3) { ... }  // assignment instead of comparison?  -> warning

Formatters: Prettier

A formatter deals only with the appearance of the code: indentation, quotes, trailing commas, line length... It does not look for errors; it rewrites the code with a consistent format. The standard is Prettier.

npm install --save-dev prettier
npx prettier --write .   # reformats all the files

The key difference: ESLint deals with quality (possible bugs), Prettier with format (aesthetics). They are used together and remove arguments about style in teams.

Bundlers: Vite, esbuild, webpack

Your source code is spread across many modules (import/export) and maybe uses modern syntax that some browsers don't understand. A bundler takes all those files and:

combines them into a few optimized files,
minifies the result (removes spaces and long names so it weighs less),
transforms modern syntax into a compatible one,
handles images, CSS and other assets.

That's why you bundle for production: the browser downloads fewer and smaller files, so the site loads faster. The most used tools are Vite and esbuild (modern and very fast) and webpack (the classic one).

npm run build   # usually launches the bundler and generates the dist/ folder

npm scripts: the glue

All these tools are orchestrated with the scripts in package.json. Instead of remembering long commands, you name them:

{
  "scripts": {
    "lint": "eslint src/",
    "format": "prettier --write .",
    "build": "vite build",
    "test": "vitest"
  }
}

And you run them with npm run lint, npm run build, etc. This way anyone on the team uses exactly the same flow with a short, memorable command.