This script is modified version of this Thanks to paulolramos and other contributers

Note: The original script was modified tobe compatible with create-react-app

Installation

1. Navigate to your app directory where you want to include this style configuration.

   cd my-app

2. Run this command inside your app's root directory. Note: this command executes the main.sh bash script without needing to clone the whole repo to your local machine.

   exec 3<&1;bash <&3 <(curl https://raw.githubusercontent.com/lostghost-dev/eslint4create-react-app/master/main.sh 2> /dev/null)

3. Make selections for your preference of package manager (npm or yarn), file format (.js or .json), max-line size, and trailing commas (none, es5, all).

4. Look in your project's root directory and notice the two newly added/updated config files:

   • .eslintrc.js (or .eslintrc.json)
   • .prettierrc.js (or .prettierrc.json)

Packages

Main Packages

1. Prettier

Airbnb Configuration

1. eslint-config-airbnb
   • This package provides Airbnb's .eslintrc as an extensible shared config.
2. eslint-plugin-jsx-a11y (Peer Dependency)
   • Static AST checker for accessibility rules on JSX elements.
3. eslint-plugin-import (Peer Dependency)
   • Support linting of ES2015+ (ES6+) import/export syntax, and prevent issues with misspelling of file paths and import names.
4. eslint-plugin-react-hooks
   • This ESLint plugin enforces the Rules of Hooks.

ESlint, Prettier Integration

1. eslint-plugin-prettier
   • Runs Prettier as an ESLint rule and reports differences as individual ESLint issues.
2. eslint-config-prettier
   • Turns off all rules that are unnecessary or might conflict with Prettier.

Created Configuration Files

Once files are created, you may edit to your liking.

eslintrc(.js/.json)

• more info

"extends": [
    "react-app",
    "airbnb",
    "plugin:prettier/recommended",
    "prettier/react",
    "plugin:react-hooks/recommended"
  ],
  "env": {
    "browser": true,
    "commonjs": true,
    "es6": true,
    "jest": true,
    "node": true
  },
  "rules": {
    "jsx-a11y/href-no-hash": ["off"],
    "react/jsx-filename-extension": ["warn", { "extensions": [".js", ".jsx"] }],
    "max-len": [
      "warn",
      {
        "code": '${max_len_val}',
        "tabWidth": 2,
        "comments": '${max_len_val}',
        "ignoreComments": false,
        "ignoreTrailingComments": true,
        "ignoreUrls": true,
        "ignoreStrings": true,
        "ignoreTemplateLiterals": true,
        "ignoreRegExpLiterals": true
      }
    ]
  }
}

prettierrc(.js/.json)

• more Info

{
"printWidth": (SET BY USER),
  "singleQuote": true,
  "endOfLine":"auto",
  "trailingComma": (SET BY USER)
}

---

This script was inspired by Jeffrey Zhen's tutorial.