ESLint & Prettier Cheat Sheet
Covers ESLint flat config, Prettier formatting options, integrating the two tools without conflicts, and common linting commands.
2 PagesBeginnerMar 8, 2026
ESLint Flat Config
Configuring rules with ESLint 9's flat config format.
javascript
// eslint.config.jsimport js from '@eslint/js';export default [ js.configs.recommended, { rules: { 'no-unused-vars': 'warn', 'eqeqeq': 'error', // require === / !== over == / != 'no-console': 'off', }, languageOptions: { ecmaVersion: 2022, sourceType: 'module', }, },];
Prettier Configuration
Formatting rules and ignored paths.
json
{ "semi": true, "singleQuote": true, "trailingComma": "es5", "printWidth": 80, "tabWidth": 2}
Combining ESLint + Prettier
Preventing the two tools from fighting over formatting.
bash
# npm install -D eslint prettier eslint-config-prettierpackage.json Scripts
Common lint and format script entries.
json
{ "scripts": { "lint": "eslint . --fix", "format": "prettier --write ." }}
Common Rules & CLI
Frequently used flags and packages.
- eslint --fix- auto-fixes any lint violations that have a known fix
- eslint --init- interactive wizard to scaffold a starting configuration
- no-undef- flags use of undeclared variables
- eslint-plugin-react-hooks- enforces the Rules of Hooks in React components
- prettier --check .- verifies formatting without writing changes, ideal for CI
- eslint-config-prettier- disables ESLint stylistic rules that would conflict with Prettier
Pro Tip
Let ESLint own code-quality rules (unused vars, hooks rules) and Prettier own formatting: apply eslint-config-prettier last in your config to disable ESLint's formatting rules instead of trying to make both tools agree on style.
Was this cheat sheet helpful?
Explore Topics
#ESLintPrettier#ESLintPrettierCheatSheet#WebDevelopment#Beginner#ESLintFlatConfig#PrettierConfiguration#CombiningESLintPrettier#PackageJsonScripts#CheatSheet#SkillVeris
