React 如何配置 ESlint 规则 ？

1. npx create-react-app react-eslint --template typescript
2. cd react-eslint
3. npm start
4. npm i eslint -D
5. npx eslint --init
6. How would you like to use ESLint? ...

7. What type of modules does your project use? ...

8. Which framework does your project use? ...

9.Does your project use TypeScript? » No / Yes

10. Where does your code run? ...

11. How would you like to define a style for your project? ...

12. Which style guide do you want to follow? ...

13. What format do you want your config file to be in? ...

14. The style guide "standard" requires eslint@^7.12.1. You are currently using eslint@8.12.0. Do you want to downgrade?

15. Would you like to install them now with npm?

16. Would you like to install them now with npm ?

17. npm start
18. settings.json

{
    "eslint.enable": true,
    "eslint.run": "onType",
    "eslint.options": {
        "extensions": [
            ".js",
            ".vue",
            ".jsx",
            ".tsx"
        ]
    },
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    }
}

19. Open your project，you'll find some errors. You can use "Ctrl + S" to achieve autosave.But,there is a problem such as ......
20. You can add rules in the file of .eslintrc.js

  rules: {
    'react/react-in-jsx-scope': 'off',
    // 'react/react-in-jsx-scope': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
    'no-use-before-define': 'off'
  }

21. Or choose what you want.

22. Last,choose "Always show the Eslint status bar item"