The easiest way to begin with Expo, Typescript, ESLint and Prettier

Yovany Luis — Tue, 13 Oct 2020 11:39:48 +0000

Create the initial project

Install the Expo CLI tool

To get started you need to have the expo-cli tool, if you already have it installed it might be a good idea to update to the latest version. To install or update run:

npm install -g expo-cli

Create the project using the Typescript template

To create your project use the Expo recommended template, that makes things a lot easier. To create the project run the following command:

expo init my-app -t expo-template-blank-typescript

This will create the Expo project with the Typescript setup.

Install the Airbnb's ESLint packages

In order to have the Airbnb ESLint setup there are multiple packages needed, fortunately eslint-config-airbnb exists and makes things easy. You only need to run:

npx install-peerdeps --dev eslint-config-airbnb

The previous command will install all the required dependencies and the correct version of them. This is the list of dependencies you should have under devDependencies:

eslint
eslint-plugin-import
eslint-plugin-react
eslint-plugin-react-hooks
eslint-plugin-jsx-a11y
and obviously eslint-config-airbnb

Now that we have the basic dependencies of ESLint, it is time to install the libraries that will enable to lint Typescript code:

npm i --save-dev @typescript-eslint/parser @typescript-eslint/eslint-plugin

That's basically all the dependencies we need for ESLint.

Prettier

To install Prettier to our project it is quite easy, simply run:

npm i --save-dev prettier eslint-config-prettier eslint-plugin-prettier

Configuration

You need to create or update the file .eslintrc.json with the following configuration:

{
  "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"]
  }
}

Preventing to commit bad code

In order 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.

Conclusion

Quite easy, isn't it? Now you are ready to get started to code in Typescript and React Native with Expo.

I hope this guide helps you as it helped me multiple times. I encourage you to take a look at the Expo Starter Template I have created for you

yovany-lg / expo-typescript-starter

Expo + Typescript starter template

If you want to have a short version of this post, I have created a Gist that will come in handy Expo + Typescript + ESLint + Prettier.

DEV Community: Yovany Luis