The easiest way to begin with Expo, Typescript, ESLint and Prettier
Tags: expo, reactnative, typescript
Published: 2020-10-13 11:39:48

# 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:
```shell
npm install -g expo-cli
```

## Create the project using the Typescript template
To create your project use the Expo recommended [template](https://docs.expo.io/guides/typescript/), that makes things a lot easier. To create the project run the following command:
```shell
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:
```shell
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:
```shell
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:
```shell
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:
```json
{
  "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:

```shell
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`:

```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
{% github yovany-lg/expo-typescript-starter no-readme %}

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](https://gist.github.com/yovany-lg/104ed47e74d1ba64f68d79a3e5f76e91).