How to install / setup eslint, prettier into a react.js app?

@adan 

To install and set up eslint and prettier in a React.js app, you can follow these steps:

1. Install eslint and prettier packages as dev dependencies in your project:

1

npm install --save-dev eslint prettier

1. Install eslint plugins for React and JSX:

1

npm install --save-dev eslint-plugin-react eslint-plugin-jsx-a11y eslint-plugin-import

1. Create an .eslintrc file in the root directory of your project and configure eslint rules:

1
2
3
4

{
  "extends": "react-app",
  "plugins": ["react"]
}

1. Create a .prettierrc file in the root directory of your project and configure prettier settings:

1
2
3
4

{
  "singleQuote": true,
  "semi": false
}

1. Optionally, you can add a lint script to your package.json file to run eslint and prettier checks:

1
2
3
4
5

{
  "scripts": {
    "lint": "eslint src --ext .js,.jsx && prettier --check 'src/**/*.js'"
  }
}

1. You can also configure your code editor to format your code with eslint and prettier on save by installing the necessary plugins or extensions. For example, the vscode-eslint and vscode-prettier extensions can be used for Visual Studio Code.

With these steps, you should now have eslint and prettier set up in your React.js app to ensure code quality and consistency.