Install step

Install package

Install those package in devDendencies

"tailwindcss": "3.4.17",
"eslint": "9.33.0",
"prettier": "3.6.2"

Remove legacy file

• remove .eslintignore
• remove .eslintrc.json

Add to .vscode/settings.json

  "eslint.useFlatConfig": true,
  "eslint.workingDirectories": [],
  "eslint.validate": ["javascript", "javascriptreact", "typescript", "typescriptreact"]

Add eslint.config.mjs

  import reactConfig from "rc-eslint-react/react.js";

  export default [
    {
      ignores: ["node_modules/**", "dist/**", "out/**", "public/**"],
    },
    ...reactConfig.map((config) => {
      // Ensure we use the correct tsconfig.json for this project
      if (config.languageOptions?.parserOptions?.project) {
        return {
          ...config,
          languageOptions: {
            ...config.languageOptions,
            parserOptions: {
              ...config.languageOptions.parserOptions,
              project: "./tsconfig.json",
            },
          },
        };
      }
      return config;
    }),
  ];

Add .perttierrc.mjc

import config from "rc-eslint-react/prettier.js";

export default config;

Note

Run script

# inspect config in localhost:7777
yarn eslint --inspect-config

# lint 1 file to check if lint is worked
yarn eslint ./src/index.tsx