A guide on configuring ESLint 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.
1
Install ESLint in your project.
- npm install eslint eslint-config-universe --save-dev- yarn add -D eslint eslint-config-universe2
Create an ESLint config file called .eslintrc.js in the project root.
module.exports = {
root: true,
extends: [
'universe/native',
],
};
3
Add a script to your package.json to run ESLint.
{
"scripts": {
"lint": "eslint ."
}
}
You can replace the . with specific directories or files to lint. For example, if you use Expo Router, you can use the eslint app command to lint only your routes inside the app directory.
You can lint your code manually from the command-line with the script:
- npm run lint- yarn lintRecommended: If you're using VS Code, install the ESLint extension to lint your code as you type.
ESLint is generally configured for a single environment. However, the source code is written in JavaScript in an Expo app 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;
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 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