Skip to content

How to configure ESLint and Prettier in an Expo project

Published:

3 min read

Make sure to see the official Expo documentation for latest details on using ESLint in your React Native 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.

Create a new project

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

npx create-expo-app projectName

# Navigate inside the project folder
cd projectName

Install ESLint and Prettier dev dependencies

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:

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.

Configure ESLint

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:

module.exports = {
  extends: ["universe", "universe/native"],
  rules: {
    "import/order": 0,
    "react-native/no-inline-styles": 0,
    "import/namespace": 0,
    "no-duplicate-imports": "error",
  },
};

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.

Configure Prettier

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:

{
  "printWidth": 100,
  "tabWidth": 2,
  "singleQuote": true,
  "bracketSameLine": true,
  "trailingComma": "es5",
  "arrowParens": "avoid"
}

Ignore files

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:

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

Conclusion

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.

I'm a software developer and a technical writer. On this blog, I write about my learnings in software development and technical writing.

Currently, working as a documentation lead at Expo.