Setup ESLINT and PRETTIER in React - JavaScript Version

This article is base on
https://dev.to/markliu2013/how-to-create-a-react-application-with-webpack-javascript-version-4032

We want to add eslint and prettier for the project.

Install Eslint and Prettier

npm i -D eslint prettier eslint-config-prettier eslint-plugin-prettier
npm i -D eslint-plugin-react eslint-plugin-react-hooks

Create .eslintrc.js

module.exports = {
  settings: {
    react: {
      version: 'detect'
    }
  },
  env: {
    browser: true,
    es2021: true
  },
  extends: [
    'eslint:recommended',
    'plugin:react/recommended',
    'prettier',
    'plugin:prettier/recommended'
  ],
  parserOptions: {
    ecmaVersion: 12,
    sourceType: 'module',
    ecmaFeatures: {
      jsx: true
    }
  },
  rules: {
    'react/react-in-jsx-scope': 'off'
  }
};

Create .prettierrc.json

{
  "semi": true,
  "tabWidth": 2,
  "printWidth": 100,
  "singleQuote": true,
  "trailingComma": "none",
  "jsxBracketSameLine": true
}

Run Eslint and Prettier

"lint": "eslint ./src --ext .js,.jsx",
"lint:fix": "eslint ./src --ext .js,.jsx --fix",
"format": "prettier 'src/**/*.{js,jsx,css,md,json}' --write"