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

I found your post on dev.to and tried to add eslint and prettier to my project. Unfortunately i get the following error
ESLint couldn't find the config "prettier/react" to extend from. Please check that the name of the config is correct. ESLint couldn't find the config "prettier/@typescript-eslint" to extend from.
How can i solve this?

I found your post on dev.to and tried to add eslint and prettier to my project. Unfortunately i get the following error
ESLint couldn't find the config "prettier/react" to extend from. Please check that the name of the config is correct. ESLint couldn't find the config "prettier/@typescript-eslint" to extend from.
How can i solve this?

prettier/@typescript-eslint has been merged in prettier so no need to have this two lines

"extends": [
    "airbnb",
    "airbnb/hooks",
    "plugin:@typescript-eslint/recommended",
    "prettier",
    "prettier/react",  <--- this one
    "prettier/@typescript-eslint",  <--- and this one
    "plugin:prettier/recommended"
  ],

To install lint-staged now -

npx mrm@2 lint-staged

Add "plugin:react/jsx-runtime" to extends in the .eslintrc.json file to reflect that react no longer needs to be imported in every component where JSX is being used:

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