Very quick Eslint configuration for ReactJS - Airbnb standard

readme.md

Install the packages

yarn add eslint -D

Run yarn eslint --init and set your configuration to use airbnb and create a javascript configuration file.

yarn add prettier eslint-config-prettier eslint-plugin-react-hooks eslint-plugin-prettier babel-eslint eslint-plugin-jsx-a11y -D

To use absolute paths

If you want to use absolute paths just copy the .eslintrc.js below, else, delete the settings object in it.

Create .eslintrc.js

In this file, paste this code

module.exports = {
  env: {
    es6: true,
    jest: true,
    browser: true,
  },
  extends: ['airbnb', 'prettier', 'prettier/react'],
  globals: {
    Atomics: 'readonly',
    SharedArrayBuffer: 'readonly',
    __DEV__: true,
  },
  parser: 'babel-eslint',
  parserOptions: {
    ecmaFeatures: {
      jsx: true,
    },
    ecmaVersion: 2020,
    sourceType: 'module',
  },
  plugins: ['react', 'jsx-a11y', 'import', 'react-hooks', 'prettier'],
  rules: {
    'prettier/prettier': 'error',
    'react/jsx-filename-extension': ['error', { extensions: ['.js', '.jsx'] }],
    'import/prefer-default-export': 'off',
    'no-unused-vars': ['error', { argsIgnorePattern: '^_' }],
    'react/jsx-one-expression-per-line': 'off',
    'global-require': 'off',
    'react-native/no-raw-text': 'off',
    'no-param-reassign': 'off',
    'no-underscore-dangle': 'off',
    camelcase: 'off',
    'no-console': ['error', { allow: ['tron'] }],
    'react-hooks/rules-of-hooks': 'error',
    'react-hooks/exhaustive-deps': 'warn',
  },
  settings: {
    'import/resolver': {
      node: {
        paths: ['src'],
      },
    },
  },
};

Create .prettierrc

{
  "singleQuote": true,
  "trailingComma": "es5",
  "endOfLine": "lf"
}

Create jsconfig.json [Absolute Path]

{
  "compilerOptions": {
    "baseUrl": "src"
  },
  "include": ["src"]
}

Auto fix your code

And run yarn eslint --fix src --ext .js