CreateReactApp-Airbnb-ESLint-Prettier-Config

CreateReactApp-Airbnb-ESLint-Prettier-Config.md

How to config a CRA project (without ejecting it) to use Airbnb Linting rules along side ESLint and Prettier:

Date of this working config: April 2019

1. npx create-react-app foobar
2. Create a .eslintignore and add:

src/serviceWorker.js

3. Create a .prettierrc and add:

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

4. Install the following DEV dependencies in your package.json:

  "devDependencies": {
    "babel-eslint": "^10.0.1",
    "eslint": "^5.16.0",
    "eslint-config-airbnb": "^17.1.0",
    "eslint-plugin-import": "^2.16.0",
    "eslint-plugin-jsx-a11y": "^6.2.1",
    "eslint-plugin-react": "^7.12.4",
    "eslint-plugin-react-app": "^4.0.1"
  }

5. create a .eslintrc and add:

{
  "env": {
    "browser": true,
    "commonjs": true,
    "es6": true,
    "node": true,
    "jest": true
  },
  "parser": "babel-eslint",
  "extends": ["airbnb", "plugin:prettier/recommended"],

  "globals": {
    "Atomics": "readonly",
    "SharedArrayBuffer": "readonly"
  },
  "parserOptions": {
    "ecmaFeatures": {
      "jsx": true
    },
    "ecmaVersion": 2018,
    "sourceType": "module"
  },
  "plugins": ["react-app", "jsx-a11y", "prettier"],
  "rules": {
    "react/jsx-filename-extension": [
      1,
      {
        "extensions": [".js", ".jsx"]
      }
    ],
    "constructor-super": "warn",
    "import/imports-first": ["error", "absolute-first"],
    "import/newline-after-import": "error",
    "no-const-assign": "warn",
    "no-extra-semi": "error",
    "no-this-before-super": "warn",
    "no-undef": "warn",
    "no-underscore-dangle": 0,
    "no-unreachable": "warn",
    "no-unused-vars": "warn",
    "prettier/prettier": "error",
    "quotes": ["error", "single"],
    "react/prop-types": 1,
    "valid-typeof": "warn"
  }
}

Reload your code editor

Linting should be up and running! 🎉

Additionally and Optionally: 👀

• Add a lint script to your package.json:

 "scripts": {
    "lint": "eslint ."
  },

$ npm run lint

VSCode User Settings:

  "editor.formatOnSave": true,
  "files.autoSave": "afterDelay",

  // Prettier
  "prettier.singleQuote": true,
  "prettier.semi": false,
  "prettier.printWidth": 80,
  "prettier.eslintIntegration": true,
  
  // Emmet
  "emmet.syntaxProfiles": {
    "javascript": ["jsx", "html"]
  },
  "emmet.includeLanguages": {
    "javascript": "javascriptreact"
  },
  "emmet.triggerExpansionOnTab": true,

Just FYI, I had to install

"eslint-config-prettier": "^6.0.0",
"eslint-plugin-prettier": "^3.1.0",
"prettier": "^1.18.2",