Use ESLint and Prettier

A guide on configuring ESLint and Prettier to format Expo apps.

ESLint is a JavaScript linter that helps you find and fix errors in your code. It's a great tool to help you write better code and catch mistakes before they make it to production. In conjunction, you can use Prettier, a code formatter that ensures all the code files follow a consistent styling.

This guide provides steps to set up and configure ESLint and Prettier.

ESLint

Setup

To set up ESLint in your Expo project, you can use the Expo CLI to install the necessary dependencies. Running this command also creates a .eslintrc.js file at the root of your project which extends configuration from eslint-config-expo.

module.exports = {
  extends: 'expo',
};

{
  "scripts": {
    "lint": "eslint ."
  }
}

Usage

Recommended: If you're using VS Code, install the ESLint extension to lint your code as you type.

You can lint your code manually from the command line with the expo lint script:

# Example output for npx expo lint command
> npm run eslint .
$ /app/node_modules/.bin/eslint .

/app/components/HelloWave.tsx
  22:6 warning React Hook useEffect has a missing dependency: 'rotateAnimation'. Either include it or remove the dependency array react-hooks/exhaustive-deps

✖ 1 problem (0 errors, 1 warning)

Environment configuration

ESLint is generally configured for a single environment. However, the source code is written in JavaScript in an Expo app that runs in multiple different environments. For example, the app.config.js, metro.config.js, babel.config.js, and app/+html.tsx files are run in a Node.js environment. It means they have access to the global __dirname variable and can use Node.js modules such as path. Standard Expo project files like app/index.js can be run in Hermes, Node.js, or the web browser.

You can add the eslint-env comment directive to the top of a file to tell ESLint which environment the file is running in. For example, to tell ESLint that a file is run in Node.js, add the following comment to the top of the file:

/* eslint-env node */
const { getDefaultConfig } = require('expo/metro-config');

/** @type {import('expo/metro-config').MetroConfig} */
const config = getDefaultConfig(
  __dirname
);

module.exports = config;

Prettier

Installation

To install Prettier in your project:

Setup

To integrate Prettier with ESlint, update your .eslintrc.js:

module.exports = {
  extends: ["expo", "prettier"],
  plugins: ["prettier"],
  rules: {
    "prettier/prettier": "error",
  },
};

Now, when you run npx expo lint, anything that is not aligned with Prettier formatting will be caught as an error.

Note: In the above configuration, you can use "prettier/prettier": "warn" if you prefer these formatting issues as warnings instead of errors.

To customize Prettier settings, create a .prettierrc file at the root of your project and add your configuration.

Troubleshooting

ESLint is not updating in VS Code

If you're using VS Code, install the ESLint extension to lint your code as you type. You can try restarting the ESLint server by running the command ESLint: Restart ESLint Server from the command palette.

ESLint is slow

ESLint can be slow to run on large projects. The easiest way to speed up the process is to lint fewer files. Add a .eslintignore file to your project root to ignore certain files and directories such as:

/.expo
node_modules

Migration to eslint-config-expo

If you're migrating from an older version of Expo SDK that has eslint-config-universe installed, install eslint-config-expo library and update your ESLint configuration to extend it from the new library.

module.exports = {
  extends: 'expo',
  %%placeholder-start%%...%%placeholder-end%%
};

{
  "scripts": {
    "lint": "expo lint"
  }
}