Prettier y Ordenamiento de Importaciones

Prettier elimina debates de formato en tu aplicación Expo y cualquier paquete compartido en un monorepo. El ordenamiento de importaciones mantiene react-native por encima de importaciones de características locales para que los diffs permanezcan legibles cuando las pantallas crecen más allá de una docena de dependencias.

Receta

Tarjeta de referencia rápida - lista para copiar y pegar.

npm install --save-dev prettier @ianvs/prettier-plugin-sort-imports eslint-config-prettier
 
# Verificar formato (CI)
npx prettier --check .
 
# Corregir formato localmente
npx prettier --write .

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

Cuándo usarlo:

• Dos o más contribuyentes tocando las mismas pantallas .tsx y paquetes de UI compartidos.
• Un monorepo de Turborepo o Nx donde apps/mobile y packages/ui deben compartir un estilo.
• PRs que actualmente mezclan estilo de comillas, comas finales y reordenamiento de importaciones en cada revisión.
• CI que debe fallar cuando alguien olvida ejecutar format antes de hacer push.
• Equipos que quieren grupos de importaciones (react → expo → @repo/* → relativas) sin limpieza manual.

Ejemplo Práctico

// .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 - desactiva formato de ESLint; mantén import/order opcional
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 - después de Prettier + plugin de importación
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 en un monorepo - un comando format para cada 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"
  }
}

Lo que demuestra esto:

• Un único .prettierrc en la raíz del repo formatea tanto la aplicación Expo como paquetes compartidos.
• @ianvs/prettier-plugin-sort-imports aplica grupos de importación estable afinados para RN (expo, @repo/*, @/*).
• .prettierignore salta las carpetas nativas generadas y el cache de Expo para que CI sea rápido.
• eslint-config-prettier apaga las reglas de ESLint que duplican Prettier - ejecuta lint y format:check como scripts separados.
• Los scripts de monorepo usan globos explícitos para que Prettier no atraviese node_modules en cada paquete.

Profundización

Cómo Funciona

• Prettier analiza cada archivo en un AST y lo reimprime con reglas fijas - no "sugiere" estilo, lo aplica.
• Los plugins de ordenamiento de importaciones se ejecutan después del pase de impresora de Prettier, reordenando declaraciones import para que coincidan con grupos de regex importOrder.
• Metro agrupa cualquier orden de importación que envíes; ordenamiento es una victoria de mantenibilidad, no una optimización de tiempo de ejecución.
• eslint-config-prettier es una puerta unidireccional: ESLint maneja corrección (react-hooks/exhaustive-deps), Prettier maneja espacios en blanco y comillas.
• En monorepos, coloca config en la raíz y ejecuta Prettier desde la raíz para que packages/ui y apps/mobile nunca se desvíen.

Configuración de un Vistazo

Estrategias de Ordenamiento de Importaciones

Recomendación: Elige plugin de Prettier o ESLint import/order, no ambos con reglas de grupo conflictivas.

Notas de Monorepo

# turbo.json - cachea formato check como lint
{
  "tasks": {
    "format:check": {
      "outputs": []
    }
  }
}

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

• Comparte un .prettierrc vía la raíz del repo; evita copias por paquete que diverjan en printWidth.
• Cuando packages/ui publica a través de mapas exports, las importaciones ordenadas hacen que los puntos de entrada públicos sean obvios en revisiones.
• Ejecuta prettier --check desde CI en la raíz con un globo - más rápido que spawning trabajos por paquete para equipos pequeños.

Notas de TypeScript

// Prettier preserva importaciones de solo tipo cuando importOrderType es "mixed"
import type { Href } from "expo-router";
import { useRouter } from "expo-router";
 
// importOrderType: "inline" fusiona type y value del mismo módulo
// importOrderType: "mixed" mantiene importaciones de tipo agrupadas con su módulo

Errores Comunes

• Prettier vs pelea de formateo de ESLint - Ambos intentan controlar comillas y puntos y comas, produciendo un ciclo de fix infinito en el editor. Solución: Añade eslint-config-prettier después de eslint-config-expo en flat config; nunca uses eslint-plugin-prettier como corredor de reglas.

• Formateo de .expo/types o ios/ - Los tipos de rutas generados y las carpetas prebuild crean diffs ruidosos enormes. Solución: Añade .expo/, ios/, y android/ a .prettierignore a menos que intencionalmente formatees proyectos nativos confirmados.

• Dos ordenadores de importación - Plugin de Prettier y ESLint import/order con diferentes reglas de grupo reshuffle importaciones en cada guardado. Solución: Desactiva import/order en ESLint cuando el plugin de Prettier es el dueño del ordenamiento.

• --write en CI - CI formatea archivos en el runner pero no los confirma, así que el trabajo pasa mientras main permanece sin formato. Solución: Usa prettier --check en CI; reserva --write para ejecuciones locales y lint-staged hooks.

• Archivos de bloqueo formateados por error - Sin .prettierignore, Prettier toca package-lock.json y crea conflictos de merge. Solución: Ignora explícitamente archivos *lock*.

• Editor usa formateador incorrecto - VS Code puede usar por defecto el formateador de TypeScript integrado para .tsx. Solución: Configura "editor.defaultFormatter": "esbenp.prettier-vscode" para [typescriptreact] e instala la extensión de Prettier.

Alternativas

FAQs

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

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

Relacionado

• Linting Basics - flat config eslint-config-expo y reglas de primer pase
• TypeScript Strict Mode - tsc --noEmit se empareja con format checks en CI
• CI Quality Gates - conecta format:check en GitHub Actions y EAS Workflows
• Monorepo con Turborepo - paquetes compartidos que necesitan una config de Prettier
• Project Setup Basics - scripts predeterminados expo lint y typecheck

Versiones de Stack: Esta página fue escrita para Expo SDK 57 (expo ~57.0.4), React Native 0.86.0, y React 19.2.3.