Setting Up ESLint and Prettier in 2026
ESLint flat config (eslint.config.js) has fully replaced the legacy .eslintrc format. If you are starting a new project or migrating, here is the modern setup for TypeScript, React, and Tailwind CSS.
ESLint 9+ with Flat Config
Create eslint.config.js (not .eslintrc). Import configs as JavaScript objects and compose them in an array. The flat config is more explicit — you see exactly which rules apply to which files. Install @eslint/js for base rules, typescript-eslint for TypeScript support, and eslint-plugin-react for React rules.
TypeScript Configuration
Use typescript-eslint config factory with type-aware linting enabled. This gives you rules that use TypeScript type information: no-floating-promises catches unhandled async calls, no-misused-promises prevents passing promises where synchronous values are expected, and prefer-nullish-coalescing suggests ?? over ||. Type-aware rules are the most valuable ESLint rules for TypeScript projects.
Prettier Integration
Install eslint-config-prettier to disable ESLint rules that conflict with Prettier. Add it as the last config in your array so it overrides any conflicting rules. Do not use eslint-plugin-prettier (which runs Prettier as an ESLint rule) — it is slow and creates confusing error messages. Instead, run Prettier separately with its own configuration.
Tailwind CSS Plugin
Install eslint-plugin-tailwindcss for class name sorting and validation. It enforces consistent class order (matching Prettier plugin behavior), warns about unknown utility classes, and suggests replacements for deprecated classes. This catches Tailwind typos at lint time instead of wondering why a style is not applying.
Editor Integration
Configure your editor to format on save with Prettier and show ESLint errors inline. In VS Code, set editor.formatOnSave to true and editor.defaultFormatter to esbenp.prettier-vscode. Add eslint.validate for TypeScript and JavaScript files. This gives you instant feedback while coding without running lint commands manually.
Related Posts
Sponsor Our Newsletter
Reach thousands of developers who are actively evaluating AI tools, MCP servers, and dev infrastructure. Our weekly newsletter goes to engaged technical decision-makers.
All sponsored content is clearly labeled per our editorial policy.