ESLint and Prettier configuration for React-Native and Expo

 Setting up ESLint and Prettier in your React Native or Expo project is essential for maintaining consistent code quality and style. ESLint helps identify and fix problematic code patterns, while Prettier ensures your code is formatted consistently across the entire team. In this guide, we’ll walk through configuring ESLint and Prettier for a React Native/Expo project step-by-step.

Step 1: Create a New React Native or Expo Project

npx react-native init expo-museum 
npx create-expo-app expo-museum

Navigate to your project directory:

cd expo-museum

Step 2: Install ESLint and Prettier
Remove the previous ESLint configuration:

npm uninstall @react-native-community/eslint-config eslint

Add ESLint and Prettier as development dependencies:

npm install eslint prettier --save-dev

Additionally, you’ll need some ESLint plugins for React Native and Prettier integration:

npm install eslint-config-prettier eslint-plugin-prettier eslint-plugin-react eslint-plugin-react-native - save-dev

Step 3: Initialize ESLint
Run the following command to initialize ESLint and generate a configuration file:

npx eslint - init

Follow the prompts as outlined below:

Step 4: Add ESLint configuration
Add the given configuration to the newly created eslint.config.js

import globals from 'globals';
import pluginJs from '@eslint/js';
import tseslint from 'typescript-eslint';
import pluginReact from 'eslint-plugin-react';
import prettierConfig from 'eslint-config-prettier';
import prettierPlugin from 'eslint-plugin-prettier';

export default [
  { files: ['**/*.{js,mjs,cjs,ts,jsx,tsx}'] },
  { languageOptions: { globals: globals.browser } },
  pluginJs.configs.recommended,
  ...tseslint.configs.recommended,
  pluginReact.configs.flat.recommended,
  prettierConfig, // Disables conflicting ESLint rules with Prettier
  {
    ignores: ['node_modules/', 'android/', 'ios/', 'build/'],
    plugins: { prettier: prettierPlugin }, // Register the Prettier plugin
    rules: {
      'react/react-in-jsx-scope': 'off',
      'no-unused-vars': 'warn',
      'react-native/no-inline-styles': 'off',
      'prettier/prettier': 'error', // Enforce Prettier rules
    },
    settings: {
      react: {
        version: 'detect', // Automatically detect React version
      },
    },
  },
];

Step 5: Create Prettier Configuration
Create a .prettierrc file in the root of your project:

{
  "semi": true,
  "singleQuote": true,
  "trailingComma": "es5",
  "printWidth": 80,
  "tabWidth": 2,
  "bracketSpacing": true,
  "jsxBracketSameLine": false,
  "useTabs": false
}

Create a .prettierignore file in the root of your project:

node_modules/
android/
ios/
build/

Step 6: Add Scripts for ESLint and Prettier
Update your package.json with scripts to run ESLint and Prettier:

"lint": "npx eslint .",
"lintFixAll": "npx eslint '**/*.{js,jsx,ts,tsx}' --fix",
"prettierFixAll": "npx prettier --write '**/*.{js,jsx,ts,tsx,json,md}'",
"fix:lintPrettier": "npm run prettierFixAll && npm run lintFixAll"

Step 7: Test your configuration by running the script in your terminal

npm run lint 
npm run lintFixAll
npm run prettierFixAll
npm run fix:lintPrettier

Here is the result you will get and change your configuration according to your needs 🙂 Happy coding.

GitHub Link: https://github.com/piashcse/expo-museum
Medium: https://piashcse.medium.com/eslint-and-prettier-configuration-for-react-native-and-expo-cbe333bd3421