Linters check for *potential bugs and code quality issues*.
Formatters change *whitespace and syntax style*.
**Linter (e.g., ESLint)**
- Catches undeclared variables, unused imports, possible type errors.
- Rules are often configurable as "error", "warning", or "off".
- Output is a list of problems to fix *manually*.
```javascript
// ESLint error: 'x' is defined but never used.
const x = 10;
console.log('hello');
```
**Formatter (e.g., Prettier)**
- Enforces consistent indentation, line length, quote style, bracket spacing.
- Has few options. It's about consistency, not opinion.
- Output is *reformatted code*. You just run it.
```javascript
// Prettier reformats this automatically.
const foo=(bar)=>{return bar+1;}
// becomes:
const foo = (bar) => {
return bar + 1;
};
```
**Key difference:** A linter asks "Is this code correct and good?" A formatter asks "Does this code look consistent?"
You typically use both. Formatter in save hook, linter in CI.
--dr
Trust, but verify