How to configure ESLint and Prettier in an Expo project

When writing JavaScript, I spend a good amount of time fixing basic mistakes. Different project files sometimes end up following different syntax and formatting conventions.

Using ESLint rescues me from those mistakes. It is a linter for the JavaScript programming language that helps keep the code syntax consistent and match conventions and warns against the possible source of problems. It is written in Node.js.

Also, I like to use some specific set of Prettier rules in my projects. ESLint configures well with it.

To create a new React Native project, I use create-expo-app:

Copy
npx create-expo-app projectName

# Navigate inside the project folder
cd projectName

After creating a new project, the next step is to install ESLint and Prettier as dev dependencies.

The Expo team has been awesome to provide a package called eslint-config-universe that comes with basic and shared ESLint configuration for Node.js, React Native and web projects. This is useful because I don't have to set up and define the ESLint configuration from scratch.

Run the following command in the terminal:

Copy
yarn add --dev eslint-config-universe eslint prettier

These packages are installed as devDependencies since they are only required during the development of the project.

Start by creating a new file called .eslintrc.js at the root of the project. This file is responsible to contain all the configuration and linting rules.

Here is the minimal configuration I use:

Copy
1module.exports = {
2  extends: ['universe', 'universe/native'],
3  rules: {
4    'import/order': 0,
5    'react-native/no-inline-styles': 0,
6    'import/namespace': 0,
7    'no-duplicate-imports': 'error'
8  }
9};

Sometimes I extend this configuration or tweak with rules but for most of the projects I start with this configuration.

In the above snippet, the extends is used to apply the pre-defined set of rules from universe and universe/native.

The universe contains basic config JavaScript projects. The universe/native contains the config for React Native and Expo projects, with support for React and JSX.

Prettier is a code formatter that ensures that all the code files follow a consistent styling. If you are into Web development, chances are you are already using it.

Create a new file called .prettierrc and inside it add the following (minimal) configuration:

Copy
1{
2  "printWidth": 100,
3  "tabWidth": 2,
4  "singleQuote": true,
5  "bracketSameLine": true,
6  "trailingComma": "es5",
7  "arrowParens": "avoid"
8}

I also created two new files to ignore trivial or other configurable files and folders from both linting and formatting. Both .eslintignore and .prettierignore have the following snippet:

Copy
node_modules/**
package.json
yarn.lock
ios/**
android/**
assets/**
.vscode
.expo-shared
.prettirrc
.eslintrc.js

There are about a dozen ways one can configure ESLint rules. However, in this post, I wanted to share this minimal configuration for my future self.