Setting up React Navite: Expo + Typescript + Eslint (Airbnb) + Prettier

expo-typescript-eslint-prettier.md

Steps to get started with Expo, Typescript, ESLint and Prettier

The first step is to use the Expo CLI to initialize the project. If you don't have the latest version of the Expo CLI tool, (or you don't have it installed) run npm install -g expo-cli.

Now run the following commands in the same order:

• expo init my-app -t expo-template-blank-typescript
• npx install-peerdeps --dev eslint-config-airbnb
• npm i --save-dev @typescript-eslint/parser @typescript-eslint/eslint-plugin
• npm i --save-dev prettier eslint-config-prettier eslint-plugin-prettier

Create or edit the file .eslintrc.json with the following content:

{
  "extends": [
    "airbnb",
    "airbnb/hooks",
    "plugin:@typescript-eslint/recommended",
    "prettier",
    "prettier/react",
    "prettier/@typescript-eslint",
    "plugin:prettier/recommended"
  ],
  "plugins": ["@typescript-eslint", "react", "prettier"],
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaFeatures": {
      "jsx": true
    },
    "ecmaVersion": 2018,
    "sourceType": "module",
    "project": "./tsconfig.json"
  },
  "rules": {
    "import/no-unresolved": 0,
    "react/jsx-filename-extension": [1, {
      "extensions": [
        ".ts",
        ".tsx"
      ]
    }],
    "prettier/prettier": [
      "error",
      {
        "singleQuote": true,
        "trailingComma": "all",
        "arrowParens": "avoid",
        "endOfLine": "auto"
      }
    ],
    "no-use-before-define": "off",
    "@typescript-eslint/no-use-before-define": ["error"],
    "import/extensions": ["error", "never"],
    "react/prop-types": 0,
    "no-shadow": "off",
    "@typescript-eslint/no-shadow": ["error"]
  }
}

pre-commit-hook.md

Preventing to commit bad code

The best way to keep your code base in a good format and following the project quality standards, is always good to have a pre-commit hook that run ESLint on each file is being committed. For this we have the tool lint-staged, to install it just run:

npx mrm lint-staged

this will install and configure everything needed including husky.

Since the goal here is that we want to lint only Typescript files (you could add more extensions) you need to add or modify the following properties at the end of your package.json:

{
  "private": true,
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "*.{ts,tsx}": "eslint"
  }
}

There you go! Now each time you need to commit code to your feature branch it will run ESLint against each file that was updated.

z-additional-resources.md

Additional resources:

• Dev post that explains to configure Expo, Typescript, ESLint and Prettier.
• Expo + Typescript starter template

@yovany-lg Is this still configuration valid since this https://www.npmjs.com/package/eslint-config-universe?

@filippolcr

This setting is no longer valid.
“eslint-config-universe” contains the Typescript Parser and related settings.
Therefore, “eslint-config-airbnb-typescript” is also not needed.
We can just use the “eslint-config-airbnb” preset.

https://github.com/expo/expo/tree/main/packages/eslint-config-universe