Real project tooling

Why tooling?

Code is read far more often than it is written, by many people. Tools catch whole classes of mistakes automatically, keep style arguments out of code reviews, and protect secrets. Setting them up takes an hour and saves weeks.

ESLint: find problems

ESLint is a linter: it reads your code without running it and warns about likely bugs (unused variables, == instead of ===, a missing await, an unreachable line) and risky patterns. Rules are configured in eslint.config.js.

npm install --save-dev eslint @eslint/js
npx eslint .            # report problems
npx eslint . --fix      # fix what can be fixed automatically

Prettier: format code

Prettier rewrites the layout of your code (spaces, quotes, line breaks) into one consistent style. Everyone's editor formats on save, and nobody argues about semicolons again. Let Prettier handle formatting and ESLint handle correctness.

Environment variables and secrets

Settings that change between your laptop, the test server and production (database URL, API keys, port) should come from environment variables, not be written in the code. Locally they often live in a .env file. Node can load it with node --env-file=.env app.js in recent versions, or with the dotenv package.

# .env  (NEVER commit this file; add it to .gitignore)
PORT=3000
PAYMENT_API_KEY=test_key_here
DATABASE_URL=postgres://localhost/shop_dev

const port = Number(process.env.PORT ?? 3000);
const apiKey = process.env.PAYMENT_API_KEY;
if (!apiKey) throw new Error('PAYMENT_API_KEY is not set');

Debugging with breakpoints

1. In VS Code, click left of a line number to set a breakpoint (a red dot).
2. Start "Run and Debug" (or run node --inspect app.js and open chrome://inspect in Chrome).
3. When execution stops, hover variables, look at the call stack, and step over / into / out of lines.
4. Add a debugger; statement in code to pause there when DevTools is open.

A debugger shows every variable at the moment of the bug, which is usually faster than adding and removing console.log lines.

Bundlers and running TypeScript

Front-end code is usually bundled: a bundler (Vite, esbuild, webpack, Rollup) follows your imports, combines and minifies files, and handles TypeScript and JSX. For Node, you can compile TypeScript with tsc, run it with a tool like tsx during development, or, in recent Node versions, run simple .ts files directly because Node can strip the types; check the Node.js documentation for your version.