Setting up a React Native project (TypeScript + Airbnb linter)

#reactnative #typescript #eslint

Reading other sources, I didn't succeed in setting up my React Native project with the TypeScript template and the airbnb linter. And it's okay as everything changes so quickly. I understand that my tutorial will also become obsolete in a few months, but I'll try to keep it up to date.
I will be using yarn v1 as yarn v2 doesn't support React Native yet. As my linter, I chose the Airbnb linter.

Creating a React Native project with the TypeScript template

npx react-native init MyApp --template react-native-template-typescript

cd MyApp

Adding ESLint

yarn add --dev eslint @typescript-eslint/eslint-plugin eslint-config-airbnb eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react eslint-plugin-react-hooks

Rename .eslintrc.js to .eslintrc.json. If you don't have a file named .eslintrc.js, just create .eslintrc.json. In this flile we need to add this code.

{
  "extends": ["airbnb"],
  "plugins": ["@typescript-eslint", "react"],
  "parser": "@typescript-eslint/parser",
  "rules": {
    "import/no-unresolved": 0,
    "react/jsx-filename-extension": [1, {
      "extensions": [
        ".jsx",
        ".tsx"
      ]
    }]
  }
}