reboottime / React-Develpment

Some notes, thought, articles or source code readings aggregated here about React Web development.
0 stars 0 forks source link

[Frontend Engineering] Configure Eslint for CRA created React app #92

Open reboottime opened 1 year ago

reboottime commented 1 year ago

Install corresponding packages and setup your basic configuration

{
  "devDependencies": {
    "@typescript-eslint/eslint-plugin": "^5.43.0",
    "eslint": "^8.37.0",
    "eslint-config-react-app": "^7.0.1",
    "eslint-config-standard-with-typescript": "^34.0.1",
    "eslint-plugin-import": "^2.25.2",
    "eslint-plugin-jsx-a11y": "^6.7.1",
    "eslint-plugin-n": "^15.0.0",
    "eslint-plugin-promise": "^6.0.0",
    "eslint-plugin-react": "^7.32.2",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-typescript-sort-keys": "^2.3.0",
    "husky": "^8.0.3",
    "lint-staged": "^13.2.0"
  }

Run the following command and choose the options that align with your needs

npm init @eslint/config
reboottime commented 1 year ago

Frequently meet problems and my React eslint template.

module.exports = {
  // ...
  settings: {
    'import/resolver': {
      alias: { 
       // here you map your folder structure 
        map: [['@', './src']],
        extensions: ['.ts', '.js', '.jsx', '.json'],
      },
    },
  },
};

https://gist.github.com/reboottime/4e87c596460f12014328de48fe4b02b7

reboottime commented 1 year ago

References

  1. Eslint configuration template for vite based react project
  2. Code Style, add eslint configration for your JavaScript project
  3. Credit to ChatGPT about answering my question can you give me a basic guideline about configuring eslint for my react project created by create-react-app
  4. My helpful eslint rules