Set up a fresh Expo app project

When I started to look into React Native and Expo almost a year, I was pretty intrigued by React Native itself, but Expo didn’t kick me at all. This has changed lately. I had to onboard some senior developer to an app project. So I asked them to take this awesome course – React Native – The Partial Guide 2020. The course is mostly based on Expo and made me retake a look at Expo. It has evolved and is now a great platform to develop mobile applications with React Native. Awesome toolchain.

Okay, it is an almost awesome toolchain. 😀 I miss ESLint, Prettier and lint-staged and decent presets for these tools in a fresh Expo project. But this is easily fixable.

Create a new Expo project

I ❤️ TypeScript, and I prefer to have a project with the absolute minimum preinstalled.

expo init -t expo-template-blank-typescript MyAwesomeNewApp

But of course you can also setup a plain JavaScript project. 😀

expo init -t expo-template-blank MyAwesomeNewApp

Install ESLint and Prettier

The Expo project offers a nice preset for ESLint with TypeScript and Prettier support – eslint-config-universe. Not as opinionated as the airbnb config and just perfect for a React Native project.

npm install --save-dev eslint prettier typescript eslint-config-universe

Install lint-staged

Lint-staged is a must-have form my point of view.

npx mrm lint-staged

Configure Prettier

Create a file named .prettierrc in your project with the following content.

{ "printWidth": 100, "tabWidth": 2, "singleQuote": true, "jsxBracketSameLine": true, "trailingComma": "es5" }

Configure ESLint

Create a file named .eslintrc in your project with the following content. The default for the prettier integration in eslint-config-universe is to treat formatting issues as a warning. I prefer to treat them as errors.

{ "extends": [ "universe/native", "universe/node", "universe/web", "plugin:prettier/recommended" ] }

Configure lint-staged

The command to install lint-staged already preconfigured everything to support JavaScript. We are using TypeScript, so we have to change some things. Look at your package.json file and change the settings for husky and lint-staged to that they resemble the following lines.

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

In case of a plain JavaScript project, this configuration has to be adapted.

{ ... "private": true, "husky": { "hooks": { "pre-commit": "lint-staged" } }, "lint-staged": { "*.{js,jsx}": "eslint --cache --fix" } }