How do I set up ESLint with TypeScript and React?

How do I set up ESLint with TypeScript and React?

To set up ESLint with TypeScript and React, you'll need to install a few packages. Start by running: npm install eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-plugin-react eslint-plugin-react-hooks.

What should I add to my ESLint configuration file?

In your .eslintrc.js file, you can add the following configuration:

module.exports = {
  parser: '@typescript-eslint/parser',
  extends: [
    'plugin:react/recommended',
    'plugin:@typescript-eslint/recommended',
  ],
  plugins: ['react', '@typescript-eslint'],
  rules: {
    // your custom rules
  },
};

Do I need to configure any specific rules for React?

Yes, you might want to enable rules like 'react/prop-types' to warn about missing prop types, or 'react/react-in-jsx-scope' if you're using React 17 or lower.

How can I run ESLint on my project?

You can run ESLint by adding a script in your package.json:

"scripts": {
  "lint": "eslint ."
}

Then, run it using npm run lint.