TypeScript ESLint and Prettier

ESLint finds configurable code-quality problems, while Prettier formats code consistently. typescript-eslint integrates TypeScript-aware lint rules; some rules require information from a tsconfig project. Keep the responsibilities separate: formatting is not type checking, and linting does not replace runtime tests.

The code is already formatted in a readable style. A formatter might change whitespace, while a rule such as no-floating-promises can flag risky statements that ordinary formatting cannot detect.

Prettier does not validate program behavior, and ESLint without configured type information does not perform a full compiler check.

Save as eslint-prettier.ts. The following program passed strict TypeScript compilation, and the displayed output was captured by executing its emitted JavaScript with Node.js 22.16.0.

TypeScript source

const values: number[] = [1, 2, 3];
const doubled = values.map(value => value * 2);
console.log(doubled.join(", "));

Verified output

2, 4, 6

Compile: npx tsc --strict --target es2022 --module commonjs eslint-prettier.ts; run: node eslint-prettier.js. For Node.js API examples, install @types/node first. For browser projects, use the browser-specific instructions below.

The example demonstrates the code-level behavior; the related configuration or test commands are shown separately when needed.

The code is already formatted in a readable style. A formatter might change whitespace, while a rule such as no-floating-promises can flag risky statements that ordinary formatting cannot detect.

Predict what changes if you alter one input. Then run the code to compare your reasoning with the real output.

Practical project lab: These are real configuration and source-file examples, not a TypeScript object that merely describes settings. Place the files at the named paths relative to one project directory.

eslint.config.mjs

import js from "@eslint/js";
import tseslint from "typescript-eslint";
export default tseslint.config(js.configs.recommended, tseslint.configs.recommended);

src/main.ts

const score: number = 10;
console.log(score);

Commands

npm install -D eslint @eslint/js typescript typescript-eslint prettier
npx eslint src/main.ts
npx prettier --check src/main.ts

Formatting and linting are separate from running tsc.

This project requires its named external tool or dependency and was supplied as setup guidance; it was not claimed as an executed test here.

Prettier does not validate program behavior, and ESLint without configured type information does not perform a full compiler check.

Identify whether the failure is a type-checking issue, a configuration issue, or a runtime behavior issue before choosing a fix.

Install ESLint with typescript-eslint and Prettier. Configure a no-unused-vars rule and verify that the editor flags an unused variable.

Write down your expected result first. For configuration examples, compare compiler output and diagnostics; for test examples, make the assertion fail deliberately to verify that the tool reports it.

For the exact current options and platform behavior, consult the official documentation. These examples were verified using the tool versions described above.

ESLint finds configurable code-quality problems, while Prettier formats code consistently.

Run the primary example, then complete the practice task or environment-specific lab.