How to set up React Native, TypeScript and ESLint + prettier
Tags: typescript, reactnative, vscode, webdev
Published: 2020-03-23 17:10:30

React Native has made mobile app development very close to a React application. Many tools we use on a React project are available to Native as well. In this article, I want to illustrate how easy and fast it is to add TypeScript, ESLint and prettier for a React Native project.

## TypeScript with Expo

[Expo.io](https://expo.io/) makes emulating a React Native project on any device a walk in the park. It's my tool of choice when starting a new project.

```bash
$ npx expo init todo-app
```

It is all you need. Make sure to follow the instruction and pick a template with TypeScript.

Download the [expo app](https://play.google.com/store/apps/details?id=host.exp.exponent&hl=en) on your phone and you can tunnel localhost on your phone as well, A+ dev experience.

#### Bonus: Enable React Native tools on vscode

Install [React Native Tools](https://marketplace.visualstudio.com/items?itemName=msjsdiag.vscode-react-native) on vscode for a better experience in your code editor.

## Prettier + React Native

Setting up prettier tends to be straight-forward in most codebases. Install the package and set up a `.prettierrc` file if you want to override the default rules.

```bash
$ npm i -D prettier
```

```json
// .prettierrc
{
  "endOfLine": "lf",
  "semi": true,
  "singleQuote": false,
  "tabWidth": 2,
  "trailingComma": "es5"
}
```

#### Bonus: Set up prettier for vscode

[Install the prettier plugin on vscode](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) and enable it on your personal `settings.json` file. View -> command palette -> search for "> preferences: open settings (JSON)".

```json
// settings.json rules for prettier
{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": false
  },
  "[javascriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": false
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": false
  },
  "[typescriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": false
  }
}
```

## Add ESLint

ESLint requires a bit more tailoring for expo. We need to install all the ESLint dependencies plus the [expo config for eslint](https://github.com/expo/expo/tree/master/packages/eslint-config-universe). The package is made to be compatible with expo and React Native environments. It also supports TypeScript.

`$ npm i -D eslint @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint-config-universe`

After, either `package.json` or `.eslintrc.js` have to be configured to use our config.

```json
// package.json
{
  "eslintConfig": {
    // for expo projects using react native
    "extends": "universe/native"
  }
}
```

```js
// .eslintrc.js
module.exports = {
  extends: "universe/native",
};
```

And you are set.

#### Bonus: Set up ESLint for vscode

[Install the ESLint package for vscode](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) if you don't have it already. A few lines on the user's `settings.json` file will make it work (like we did for prettier).

```json
// settings.json rules for ESLint
{
  "eslint.autoFixOnSave": true,
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    {
      "language": "typescript",
      "autoFix": true
    },
    {
      "language": "typescriptreact",
      "autoFix": true
    }
  ]
}
```

## Closing thoughts

Setting up a good environment for developers should not take time away from coding. Modern tools can make this process really fast. My aim for this article is to help you get started in 5 minutes or less.

[The complete code can be found here](https://github.com/Kornil/react-native-ts-starter)

---

originally posted on [decodenatura](https://decodenatura.com/set-up-react-native-typescript-eslint-prettier/)