Prettier & Import Sorting

Prettier removes formatting debates across your Expo app and any shared packages in a monorepo. Import sorting keeps react-native above local feature imports so diffs stay readable when screens grow past a dozen dependencies.

Recipe

Quick-reference recipe card - copy-paste ready.

npm install --save-dev prettier @ianvs/prettier-plugin-sort-imports eslint-config-prettier
 
# Check formatting (CI)
npx prettier --check .
 
# Fix formatting locally
npx prettier --write .

// package.json scripts
{
  "scripts": {
    "format": "prettier --write .",
    "format:check": "prettier --check ."
  }
}

When to reach for this:

• Two or more contributors touching the same .tsx screens and shared UI packages.
• A Turborepo or Nx monorepo where apps/mobile and packages/ui must share one style.
• PRs that currently mix quote style, trailing commas, and import reordering in every review.
• CI that should fail when someone forgets to run format before pushing.
• Teams that want import groups (react → expo → @repo/* → relative) without manual cleanup.

Working Example

// .prettierrc
{
  "semi": true,
  "singleQuote": false,
  "tabWidth": 2,
  "trailingComma": "all",
  "printWidth": 80,
  "endOfLine": "lf",
  "plugins": ["@ianvs/prettier-plugin-sort-imports"],
  "importOrder": [
    "<BUILTIN_MODULES>",
    "",
    "^react$",
    "^react-native$",
    "^expo",
    "^@react-navigation",
    "<THIRD_PARTY_MODULES>",
    "",
    "^@repo/(.*)$",
    "",
    "^@/(.*)$",
    "",
    "^[./]"
  ],
  "importOrderType": "mixed"
}

# .prettierignore
node_modules/
.expo/
dist/
coverage/
ios/
android/
*.lock
package-lock.json
pnpm-lock.yaml

// eslint.config.js - disable ESLint formatting; keep import/order optional
const { defineConfig } = require("eslint/config");
const expoConfig = require("eslint-config-expo/flat");
const eslintConfigPrettier = require("eslint-config-prettier");
 
module.exports = defineConfig([
  expoConfig,
  eslintConfigPrettier,
  {
    ignores: [".expo/**", "ios/**", "android/**"],
  },
]);

// apps/mobile/app/(tabs)/index.tsx - after Prettier + import plugin
import { useCallback } from "react";
import { Pressable, StyleSheet, Text, View } from "react-native";
 
import { useRouter } from "expo-router";
 
import { Button } from "@repo/ui/button";
 
import { useSession } from "@/hooks/useSession";
 
import { HomeHero } from "../../components/HomeHero";
 
export default function HomeScreen() {
  const router = useRouter();
  const { user } = useSession();
 
  const onContinue = useCallback(() => {
    router.push("/settings");
  }, [router]);
 
  return (
    <View style={styles.container}>
      <HomeHero name={user?.displayName ?? "Guest"} />
      <Button variant="primary" onPress={onContinue}>
        Continue
      </Button>
      <Pressable onPress={() => router.push("/help")}>
        <Text style={styles.link}>Help</Text>
      </Pressable>
    </View>
  );
}
 
const styles = StyleSheet.create({
  container: { flex: 1, padding: 16, gap: 12 },
  link: { color: "#2563eb", textAlign: "center" },
});

// Root package.json in a monorepo - one format command for every workspace
{
  "scripts": {
    "format": "prettier --write \"**/*.{ts,tsx,js,jsx,json,md}\"",
    "format:check": "prettier --check \"**/*.{ts,tsx,js,jsx,json,md}\""
  },
  "devDependencies": {
    "@ianvs/prettier-plugin-sort-imports": "^4.4.0",
    "eslint-config-prettier": "^10.0.0",
    "prettier": "^3.5.0"
  }
}

What this demonstrates:

• A single .prettierrc at the repo root formats both the Expo app and shared packages.
• @ianvs/prettier-plugin-sort-imports enforces stable import groups tuned for RN (expo, @repo/*, @/*).
• .prettierignore skips generated native folders and Expo cache so CI stays fast.
• eslint-config-prettier turns off ESLint rules that duplicate Prettier - run lint and format:check as separate scripts.
• Monorepo scripts use explicit globs so Prettier does not walk node_modules in every package.

Deep Dive

How It Works

• Prettier parses each file into an AST and reprints it with fixed rules - it does not "suggest" style, it enforces it.
• Import-sort plugins run after Prettier's printer pass, reordering import statements to match importOrder regex groups.
• Metro bundles whatever import order you ship; sorting is a maintainability win, not a runtime optimization.
• eslint-config-prettier is a one-way gate: ESLint handles correctness (react-hooks/exhaustive-deps), Prettier handles whitespace and quotes.
• In monorepos, put config at the root and run Prettier from the root so packages/ui and apps/mobile never drift.

Config at a Glance

Import Sorting Strategies

Recommendation: Pick Prettier plugin or ESLint import/order, not both with conflicting group rules.

Monorepo Notes

# turbo.json - cache format check like lint
{
  "tasks": {
    "format:check": {
      "outputs": []
    }
  }
}

// apps/mobile/package.json
{
  "scripts": {
    "format:check": "prettier --check ."
  }
}

• Share one .prettierrc via the repo root; avoid per-package copies that diverge on printWidth.
• When packages/ui publishes through exports maps, sorted imports make public entry points obvious in reviews.
• Run prettier --check from CI at the root with a glob - faster than spawning per-package jobs for small teams.

TypeScript Notes

// Prettier preserves type-only imports when importOrderType is "mixed"
import type { Href } from "expo-router";
import { useRouter } from "expo-router";
 
// importOrderType: "inline" merges type and value from the same module
// importOrderType: "mixed" keeps type imports grouped with their module

Gotchas

• Prettier vs ESLint formatting fight - Both try to control quotes and semicolons, producing an infinite fix loop in the editor. Fix: Add eslint-config-prettier after eslint-config-expo in flat config; never use eslint-plugin-prettier as a rule runner.

• Formatting .expo/types or ios/ - Generated route types and prebuild folders create huge noisy diffs. Fix: Add .expo/, ios/, and android/ to .prettierignore unless you intentionally format committed native projects.

• Two import sorters - Prettier plugin and ESLint import/order with different group rules reshuffle imports on every save. Fix: Disable import/order in ESLint when the Prettier plugin owns sorting.

• --write in CI - CI formats files on the runner but does not commit them, so the job passes while main stays unformatted. Fix: Use prettier --check in CI; reserve --write for local runs and lint-staged hooks.

• Lock files formatted by mistake - Without .prettierignore, Prettier touches package-lock.json and creates merge conflicts. Fix: Ignore *lock* files explicitly.

• Editor uses wrong formatter - VS Code may default to the built-in TypeScript formatter for .tsx. Fix: Set "editor.defaultFormatter": "esbenp.prettier-vscode" for [typescriptreact] and install the Prettier extension.

Alternatives

FAQs

"importOrder": ["^react$", "", "^expo", "", "^@repo/(.*)$", "", "^[./]"]

// turbo.json
{
  "tasks": {
    "format:check": {
      "cache": true,
      "outputs": []
    }
  }
}

Related

• Linting Basics - eslint-config-expo flat config and first-pass rules
• TypeScript Strict Mode - tsc --noEmit pairs with format checks in CI
• CI Quality Gates - wire format:check into GitHub Actions and EAS Workflows
• Monorepo with Turborepo - shared packages that need one Prettier config
• Project Setup Basics - default expo lint and typecheck scripts

Stack versions: This page was written for Expo SDK 57 (expo ~57.0.4), React Native 0.86.0, and React 19.2.3.