ESLint config for React Native projects

• Use an extension of eslint-config-standard, made for TypeScript

Installing

1. In your project folder, run:

npm install -D @magikbee/eslint-config-magikbee-react-native

2. Install peer dependencies:

npm install -D eslint@^8.25.0 eslint-plugin-react@^7.31.9 eslint-plugin-react-native@^4.0.0 @typescript-eslint/eslint-plugin@^5.39.0 @typescript-eslint/parser@^5.39.0 eslint-config-standard-with-typescript@^23.0.0 eslint-plugin-import@^2.26.0 eslint-plugin-n@^15.3.0 eslint-plugin-promise@^6.0.1 typescript@^4.8.4

3. Create (or update) a .eslintrc file in your project folder with the following content:

{
  "extends": [
    "@magikbee/eslint-config-magikbee-react-native"
  ]
}

How To Override Default Config

1. Add your custom ESLint rules directly in .eslintrc file under "rules"

Extend TSConfig (Config required for Standard plugin)

1. Create (or update) a .tsconfig.json file in your project folder and add the following content:

{
  ...
  "extends": "@magikbee/eslint-config-magikbee-react-native/.tsconfig.json", 
  ...
}

Integration with VSCode

1. Install ESLint extension

2. Edit VSCode settings and edit or add the following settings:

//tells the ESLint extension which languages it should check
"eslint.validate": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact"
],
// avoid conflicts with eslint rules
"editor.formatOnSave": false,
// show eslint icon at bottom toolbar
"eslint.alwaysShowStatus": true,
// turns on Auto Fix for ESLint
"editor.codeActionsOnSave": {
  "source.fixAll.eslint": true
}

• User settings: applied to all workspaces.
• Workspace settings: only applied to the current workspace.