Every team argues about formatting. This config ends it.
Install everything
npm install -D eslint prettier eslint-config-prettier eslint-plugin-import @typescript-eslint/eslint-plugin @typescript-eslint/parser
ESLint config
Create eslint.config.js (flat config, ESLint 9+):
import eslint from "@eslint/js";
import tseslint from "typescript-eslint";
import prettier from "eslint-config-prettier";
import importPlugin from "eslint-plugin-import";
export default [
eslint.configs.recommended,
...tseslint.configs.recommended,
prettier,
{
plugins: { import: importPlugin },
rules: {
"no-console": "warn",
"no-unused-vars": "off",
"@typescript-eslint/no-unused-vars": ["error", { argsIgnorePattern: "^_" }],
"@typescript-eslint/no-explicit-any": "warn",
"import/order": [
"error",
{
groups: ["builtin", "external", "internal", "parent", "sibling", "index"],
"newlines-between": "always",
alphabetize: { order: "asc" },
},
],
},
},
{
ignores: ["dist/", "node_modules/", ".next/", "coverage/"],
},
];
Prettier config
Create .prettierrc:
{
"semi": true,
"singleQuote": false,
"tabWidth": 2,
"trailingComma": "all",
"printWidth": 100,
"bracketSpacing": true,
"arrowParens": "always",
"endOfLine": "lf"
}
Package.json scripts
{
"scripts": {
"lint": "eslint .",
"lint:fix": "eslint . --fix",
"format": "prettier --write .",
"format:check": "prettier --check ."
}
}
VS Code settings
Create .vscode/settings.json so it auto-formats on save:
{
"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.codeActionsOnSave": {
"source.fixAll.eslint": "explicit"
}
}
What this gives you
- Prettier handles formatting β tabs, quotes, semicolons, line width
- ESLint handles code quality β unused vars, any types, import order
- No conflicts β
eslint-config-prettierdisables all ESLint rules that clash with Prettier - Auto-fix on save β VS Code runs both on every save
- Sorted imports β automatically grouped and alphabetized
Run npm run lint:fix && npm run format once to fix your entire codebase. Done arguing.
Related resources
Related: What is TypeScript