ESLint setup in React Native using VSCode

Photo by Michał Parzuchowski on Unsplash

Step 1 : Install `eslint` & `babel-eslint`

yarn add eslint babel-eslint -D

Step 2 : Start setup

./node_modules/.bin/eslint — init

I’m using Airbnb use whichever you prefer

Step 3 : Add the following to `.eslintrc.json`

{
  "extends": "airbnb",
  "parser": "babel-eslint",
  "env": {
    "browser": true
  },
  "plugins": ["react"],
  "rules": {
    "react/jsx-filename-extension": [
      2,
      {
        "extensions": [".js", ".jsx"]
      }
    ],
    "react/forbid-prop-types": [0],
    "react/require-default-props": [0],
    "global-require": [0],
    "no-underscore-dangle": [0]
  }
}

Step 4 : Add the following to `package.json`

"scripts": {
  "lint": "eslint app/",
  "lint:fix": "eslint app/ --fix"
}

Step 5 : Add this to `.vscode/settings.json`

{
  "prettier.eslintIntegration": true,
  "editor.formatOnSave": true,
  "files.exclude": {
    "**/*.git": true,
    "**/*.expo": true,
    ".*": true,
    "**/*.DS_Store": true,
    "node_modules/": true
  }
}

This is my setup, without any distraction of any dot files. Feel free to change it according to your needs. Now restart VSCode to see Lint errors. Install the popular ESlint package from VSCode.

Pro tip : Use Prettier with ESlint to get more productive 😉

TL;DR

https://gist.github.com/deadcoder0904/c90f2c63c0a7b8bf0215b59ed1bd1352