Prettier & Ordenação de Importações

O Prettier remove debates de formatação entre seu aplicativo Expo e quaisquer pacotes compartilhados em um monorepo. A ordenação de importações mantém react-native acima das importações de recursos locais para que as diferenças permaneçam legíveis quando as telas crescem além de uma dúzia de dependências.

Receita

Cartão de receita de referência rápida - pronto para copiar e colar.

npm install --save-dev prettier @ianvs/prettier-plugin-sort-imports eslint-config-prettier
 
# Verificar formatação (CI)
npx prettier --check .
 
# Corrigir formatação localmente
npx prettier --write .

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

Quando usar isso:

• Dois ou mais contribuidores mexendo nas mesmas telas .tsx e pacotes de UI compartilhados.
• Um monorepo Turborepo ou Nx onde apps/mobile e packages/ui devem compartilhar um único estilo.
• PRs que atualmente misturam estilo de aspas, vírgulas finais e reordenação de importações em cada revisão.
• CI que deve falhar quando alguém esquece de executar o format antes de enviar.
• Equipes que desejam grupos de importação (react → expo → @repo/* → relativo) sem limpeza manual.

Exemplo de Trabalho

// .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 - desabilita formatação ESLint; mantém 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 - após Prettier + plugin de importação
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" },
});

// package.json raiz em um monorepo - um comando de formato 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"
  }
}

O que isso demonstra:

• Um único .prettierrc na raiz do repositório formata tanto o aplicativo Expo quanto os pacotes compartilhados.
• @ianvs/prettier-plugin-sort-imports impõe grupos de importação estáveis ajustados para RN (expo, @repo/*, @/*).
• .prettierignore ignora pastas nativas geradas e o cache do Expo para que a CI permaneça rápida.
• eslint-config-prettier desliga regras do ESLint que duplicam o Prettier - execute lint e format:check como scripts separados.
• Scripts de monorepo usam globs explícitos para que o Prettier não percorra node_modules em cada pacote.

Mergulho Profundo

Como Funciona

• O Prettier analisa cada arquivo em um AST e o reimprime com regras fixas - ele não "sugere" estilo, ele o impõe.
• Plugins de ordenação de importações rodam depois da passagem do impressor do Prettier, reordenando as instruções import para corresponder aos grupos de regex importOrder.
• O Metro agrupa qualquer ordem de importação que você envia; a ordenação é uma vitória de manutenibilidade, não uma otimização de tempo de execução.
• eslint-config-prettier é um portão unidirecional: ESLint cuida da correção (react-hooks/exhaustive-deps), Prettier cuida de espaços em branco e aspas.
• Em monorepos, coloque a configuração na raiz e execute o Prettier a partir da raiz para que packages/ui e apps/mobile nunca se desviem.

Configuração em Destaque

Estratégias de Ordenação de Importações

Recomendação: Escolha o plugin Prettier ou ESLint import/order, não ambos com regras de grupo conflitantes.

Notas de Monorepo

# turbo.json - cache de verificação de formato como lint
{
  "tasks": {
    "format:check": {
      "outputs": []
    }
  }
}

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

• Compartilhe um único .prettierrc através da raiz do repositório; evite cópias por pacote que divergem em printWidth.
• Quando packages/ui publica através de mapas exports, importações ordenadas tornam os pontos de entrada públicos óbvios nas revisões.
• Execute prettier --check da CI na raiz com um glob - mais rápido do que iniciar trabalhos por pacote para equipes pequenas.

Notas de TypeScript

// Prettier preserva importações apenas de tipo quando importOrderType é "mixed"
import type { Href } from "expo-router";
import { useRouter } from "expo-router";
 
// importOrderType: "inline" mescla tipo e valor do mesmo módulo
// importOrderType: "mixed" mantém importações de tipo agrupadas com seu módulo

Armadilhas

• Conflito de formatação Prettier vs ESLint - Ambos tentam controlar aspas e ponto e vírgula, produzindo um loop de correção infinito no editor. Correção: Adicione eslint-config-prettier após eslint-config-expo na configuração plana; nunca use eslint-plugin-prettier como um executor de regras.

• Formatação de .expo/types ou ios/ - Tipos de rota gerados e pastas pré-compiladas criam diffs enormes e barulhentos. Correção: Adicione .expo/, ios/ e android/ a .prettierignore, a menos que você formate intencionalmente projetos nativos commitados.

• Dois ordenadores de importação - Plugin Prettier e ESLint import/order com regras de grupo diferentes reorganizam as importações a cada salvamento. Correção: Desabilite import/order no ESLint quando o plugin Prettier for o responsável pela ordenação.

• --write em CI - A CI formata os arquivos no runner, mas não os commita, então o trabalho passa enquanto main permanece sem formatação. Correção: Use prettier --check em CI; reserve --write para execuções locais e hooks lint-staged.

• Arquivos de lock formatados por engano - Sem .prettierignore, o Prettier mexe em package-lock.json e cria conflitos de mesclagem. Correção: Ignore explicitamente os arquivos *lock*.

• Editor usa o formatador errado - O VS Code pode usar o formatador TypeScript integrado por padrão para .tsx. Correção: Defina "editor.defaultFormatter": "esbenp.prettier-vscode" para [typescriptreact] e instale a extensão Prettier.

Alternativas

FAQs

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

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

Relacionados

• Noções Básicas de Linting - Configuração plana eslint-config-expo e regras de primeira passagem
• Modo Estrito do TypeScript - tsc --noEmit combina com verificações de formato em CI
• Portões de Qualidade de CI - integre format:check em GitHub Actions e EAS Workflows
• Monorepo com Turborepo - pacotes compartilhados que precisam de uma única configuração Prettier
• Noções Básicas de Configuração de Projeto - scripts padrão expo lint e typecheck

Versões da Stack: Esta página foi escrita para Expo SDK 57 (expo ~57.0.4), React Native 0.86.0, e React 19.2.3.