React Native ESlint & Prettier for Expo and CLI with trivago prettier for import sorting. Update: TypeScript Support

ESlint

1. Install the latest version:

npm install eslint --save-dev

yarn add eslint --dev

2. Setup a config file for eslint.

npm init @eslint/config

yarn dlx @eslint/create-config

After running this command some questions will be asked. This is how I answer them:

?'s are questions and >'s are the answers.

? How would you like to use ESLint? ...
  To check syntax only
  To check syntax and find problems
> To check syntax, find problems, and enforce code style

? What type of modules does your project use? ... 
> JavaScript modules (import/export)
  CommonJS (require/exports)
  None of these

? Which framework does your project use? ...       
> React
  Vue.js
  None of these

? Does your project use TypeScript? » > No / Yes

? Where does your code run? ...  (Press <space> to select, <a> to toggle all, <i> to invert selection)
 Browser
> Node

? How would you like to define a style for your project? ... 
> Use a popular style guide
  Answer questions about your style

> Airbnb: https://github.com/airbnb/javascript
  Standard: https://github.com/standard/standard
  Google: https://github.com/google/eslint-config-google
  XO: https://github.com/xojs/eslint-config-xo

? What format do you want your config file to be in? ... 
  JavaScript
  YAML
> JSON

Here it'll check for dependencies of your choices and ask:

? Would you like to install them now? » No / > Yes

? Which package manager do you want to use? ...
> npm
  yarn
  pnpm

After this is done, you'll have an .eslintrc.json file.

Also, to add React Native specific rules to ESlint.

npm install --save-dev eslint-plugin-react-native

yarn add eslint-plugin-react-native --dev

Prettier

1. Install

npm install --save-dev --save-exact prettier

yarn add prettier --dev --exact

2. Integrate Prettier to ESlint:

npm install --save-dev eslint-config-prettier

yarn add eslint-config-prettier --dev

2.5 If you want to add @trivago/prettier-plugin-sort-imports:

npm install --save-dev @trivago/prettier-plugin-sort-imports

yarn add @trivago/prettier-plugin-sort-imports --dev

3. Create .prettierrc.json file and add the following code:

{
  "arrowParens": "always",
  "bracketSpacing": true,
  "jsxBracketSameLine": false,
  "jsxSingleQuote": false,
  "quoteProps": "as-needed",
  "singleQuote": true,
  "semi": true,
  "printWidth": 100,
  "useTabs": false,
  "tabWidth": 2,
  "trailingComma": "es5",
  // below is for @trivago/prettier-plugin-sort-imports, you can edit        importOrder however you want.
  "importOrder": [
    "^(react|react-native|react-native-paper)$",
    "^@react-navigation/(.*)$",
    "<THIRD_PARTY_MODULES>",
    "^[./]"
  ],
  "importOrderSeparation": true,
  "importOrderSortSpecifiers": true
}

Now, in your .eslintrc.json file add these codes to each specific part:

"env": {
    "browser": true,
    "es2021": true,
    "react-native/react-native": true
  },
.
.

.
.
"extends": ["plugin:react/recommended", "airbnb", "airbnb/hooks", "prettier"],
.
.

.
.
"plugins": ["react", "react-native"],
.
.

.
.
"rules": {
    // allow .js files to contain JSX, *you can also add typescript extensions too*
    "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }],

    //  to allow for usage of styles variable  before it was defined
    "no-use-before-define": ["error", { "variables": false }],

    // ignore errors for prop validation
    "react/prop-types": [0],

    // allow default imports. e.g. in index.js files.
    "no-restricted-exports": [0, { "restrictedNamedExports": ["default"] }],

    // ignore errors for import directives, *you can also add typescript extensions too*
    "import/extensions": [
      "error",
      "ignorePackages",
      {
        "js": "never",
        "jsx": "never",
      }
    ]
  }

Lastly, if you are using VSC and you want to format everytime you save a file:

Hit CTRL + SHIFT + P and type "Open User Settings (JSON)":

{
    "eslint.options": {},
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    },
    "eslint.run": "onSave",
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true,
    "editor.formatOnPaste": true, // if you also want to format when you paste a code
}

I also had to add the below code on Expo in order to be able to use the extensions on .js files, because I was getting: “No local configuration (i.e. .prettierrc or .editorconfig) detected, falling back to VS Code configuration”

  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true
  },

Note: for jsx you write "[javascriptreact]" instead of "[javascript]"

That is all, thank you for reading and I welcome all types of feedback!

---

Edit:

TypeScript support for ESLint

npm install eslint-config-airbnb-typescript @typescript-eslint/eslint-plugin@^5.54.0 @typescript-eslint/parser@^5.54.0 --save-dev

yarn add eslint-config-airbnb-typescript @typescript-eslint/eslint-plugin@^5.54.0 @typescript-eslint/parser@^5.54.0 --dev

Add "airbnb-typescript" and "project": "./tsconfig.json" to your eslintrc.json file

"extends": ["plugin:react/recommended", "airbnb", "airbnb-typescript", "airbnb/hooks", "prettier"],
parserOptions: {
   "project": './tsconfig.json'
}

For more information: https://www.npmjs.com/package/eslint-config-airbnb-typescript

My latest '.eslint.json':

{
  "env": {
    "browser": true,
    "es2021": true,
    "react-native/react-native": true
  },
  "extends": [
    "plugin:react/recommended",
    "airbnb",
    "airbnb/hooks",
    "prettier",
    "airbnb-typescript"
  ],
  "overrides": [],
  "parserOptions": {
    "ecmaVersion": "latest",
    "sourceType": "module",
    "project": "./tsconfig.json"
  },
  "plugins": ["react", "react-native"],
  "rules": {
    // allow .js files to contain JSX, *you can also add typescript extensions too*
    "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx", "ts", "tsx"] }],

    //  to allow for usage of styles variable  before it was defined
    "no-use-before-define": ["error", { "variables": false }],

    // ignore errors for prop validation
    "react/prop-types": [0],

    // allow default imports. e.g. in index.js files.
    "no-restricted-exports": [0, { "restrictedNamedExports": ["default"] }],

    // ignore errors for import directives, *you can also add typescript extensions too*
    "import/extensions": [
      "error",
      "ignorePackages",
      {
        "js": "never",
        "jsx": "never",
        "ts": "never",
        "tsx": "never"
      }
    ]
  }
}