How to configure ESLint and Prettier in an Expo project

Published on Jul 25, 2023

3 min read

EXPO

Make sure to see the official Expo documentation 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:

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.

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:

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

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.


More Posts

Browse all posts

Aman Mittal author

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 the documentation lead at 𝝠 Expo. Read more about me on the About page.


Copyright ©  2019-2024 Aman Mittal · All Rights Reserved.