Lesson 22 / 25
Real-world Project Examples
See ESLint and Prettier in actual project setups.
Reference implementations
React projects, Node.js backends, TypeScript monorepos—each has unique linting needs. Review examples to adapt for your context.
React project setup
A complete ESLint and Prettier setup for a modern React project.
// .eslintrc.json for React project
{
"env": { "browser": true, "es2021": true },
"extends": ["eslint:recommended", "plugin:react/recommended", "prettier"],
"plugins": ["react", "react-hooks"],
"rules": {
"react/react-in-jsx-scope": "off",
"react-hooks/rules-of-hooks": "error",
"no-unused-vars": "warn"
}
}
// .prettierrc
{
"singleQuote": true,
"trailingComma": "es5",
"semi": true
}
Output:
React project ready for linting and formatting
Adapt, don't copy
Use examples as starting points, but customize them for your project's specific needs. Your team's standards matter more than following templates.
Quick check
Quick check: Should you use example configs as-is?
- No, customize them for your project's needs.
- Yes, always copy examples exactly.
- It doesn't matter.
Answer
No, customize them for your project's needs. — Examples are starting points. Your team's standards and project-specific needs should drive configuration choices.