SkillByAIOpen interactive version →

Lesson 24 / 27

Real-world Project Examples

See complete ESLint flat config and Prettier setups for React and Node.js projects.

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.

// eslint.config.js for a React project
import js from '@eslint/js';
import globals from 'globals';
import react from 'eslint-plugin-react';
import reactHooks from 'eslint-plugin-react-hooks';
import prettier from 'eslint-config-prettier';

export default [
  js.configs.recommended,
  react.configs.flat.recommended,
  react.configs.flat['jsx-runtime'],
  {
    files: ['**/*.{js,jsx}'],
    plugins: { 'react-hooks': reactHooks },
    languageOptions: { globals: globals.browser },
    settings: { react: { version: 'detect' } },
    rules: {
      'react-hooks/rules-of-hooks': 'error',
      'no-unused-vars': 'warn',
    },
  },
  prettier,
];

// .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?

  • Yes, always copy them exactly
  • No, adapt them to your project
  • Only on Fridays
  • It never matters
Answer

No, adapt them to your project — Examples are starting points. Your team's standards and project-specific needs should drive configuration choices.