Prettier and ESLint Setup
Add Prettier for automatic formatting and ESLint for catching errors, configure both tools, and integrate them into a save-on-format workflow.
Prettier and ESLint Setup is a free Frontend Academy lesson on CoddyKit — lesson 3 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Frontend Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.
Why Automate Code Style?
Manual code formatting debates waste team time. Prettier auto-formats code to a consistent style. ESLint catches bugs and enforces best practices. Together they eliminate whole categories of code review comments.
Installing Prettier
Install Prettier as a dev dependency, create a config file, and add a format script to package.json. Prettier needs no config to work — defaults are sensible — but you can customise them.
npm install --save-dev prettier
# .prettierrc (optional config)
{
"semi": true,
"singleQuote": true,
"tabWidth": 2,
"trailingComma": "es5",
"printWidth": 80
}VSCode Prettier Integration
Install the Prettier - Code Formatter extension. Then set it as the default formatter and enable formatOnSave in settings. Now Prettier runs every time you save a file.
// .vscode/settings.json
{
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true
}Installing ESLint
Install ESLint and initialise it with npm init @eslint/config. This wizard helps you pick your environment (browser/node), module system, and TypeScript support. It generates an eslint.config.js file.
npm install --save-dev eslint
npx eslint --init
# Or for a flat config:
npm install --save-dev @eslint/js
# creates eslint.config.jsESLint Config Example
A simple ESLint flat config for a browser JavaScript project. Rules can be 'error', 'warn', or 'off'. Extend shared configs like @eslint/js recommended for a strong baseline.
// eslint.config.js
import js from '@eslint/js';
export default [
js.configs.recommended,
{
rules: {
'no-console': 'warn',
'no-unused-vars': 'error',
'eqeqeq': 'error'
}
}
];TypeScript ESLint
For TypeScript projects add typescript-eslint to catch TypeScript-specific issues: unsafe any usage, missing return types, and misused Promises.
npm install --save-dev typescript-eslint
// eslint.config.js
import tseslint from 'typescript-eslint';
export default tseslint.config(
...tseslint.configs.recommended
);Prettier and ESLint Together
ESLint has some formatting rules that conflict with Prettier. Use eslint-config-prettier to disable them, letting Prettier handle all formatting and ESLint handle only code quality.
npm install --save-dev eslint-config-prettier
// eslint.config.js — add prettier last:
import prettierConfig from 'eslint-config-prettier';
export default [
js.configs.recommended,
prettierConfig // disables ESLint formatting rules
];.eslintignore and .prettierignore
Tell the tools which files to skip. The .eslintignore file uses gitignore syntax. You usually want to ignore node_modules, dist, and generated files.
# .eslintignore
node_modules
dist
.next
coveragenpm Scripts for Linting
Add lint and format scripts to package.json so CI and teammates can run them consistently.
{
"scripts": {
"lint": "eslint src --ext .js,.ts,.tsx",
"lint:fix": "eslint src --fix",
"format": "prettier --write src",
"format:check": "prettier --check src"
}
}lint-staged and husky for Pre-commit Hooks
Use husky + lint-staged to automatically lint and format only staged files before every git commit. This prevents unformatted or broken code from reaching the repository.
npm install --save-dev husky lint-staged
npx husky init
# package.json:
"lint-staged": {
"*.{js,ts,tsx}": ["eslint --fix", "prettier --write"],
"*.{css,json,md}": "prettier --write"
}EditorConfig for Baseline Consistency
An .editorconfig file enforces basic editor settings (indent style, line endings) across all editors and IDEs regardless of plugins. Add it alongside Prettier.
# .editorconfig
root = true
[*]
charset = utf-8
indent_style = space
indent_size = 2
end_of_line = lf
insert_final_newline = trueQuick Check
Why should eslint-config-prettier be added to an ESLint config that also uses Prettier?
Recap: Prettier and ESLint
Prettier auto-formats code on save via the VSCode extension. ESLint catches bugs and style violations. Use eslint-config-prettier to avoid conflicts. Add lint-staged + husky for pre-commit enforcement. Consistent tooling eliminates formatting debates and catches bugs before they ship.
Frequently asked questions
Is the “Prettier and ESLint Setup” lesson free?
Yes — the full text of “Prettier and ESLint Setup” is free to read here on the web, and the Frontend Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Frontend Academy course, upgrade to CoddyKit PRO.
What will I learn in “Prettier and ESLint Setup”?
Add Prettier for automatic formatting and ESLint for catching errors, configure both tools, and integrate them into a save-on-format workflow. You practise Frontend Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start Frontend Academy?
No prior experience is required. Frontend Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 3 of 4, so you can start here or from the beginning and move at your own pace.
How long does the “Prettier and ESLint Setup” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this Frontend Academy lesson?
Yes. Every Frontend Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.