Noções Básicas de Linting

10 exemplos para você começar com Linting & Formatting - 7 básicos e 3 intermediários.

Pré-requisitos

Comece com um projeto Expo SDK 57. O template default@sdk-57 já inclui TypeScript e os scripts recomendados - você só precisa adicionar o ESLint uma vez.

npx create-expo-app@latest MyApp --template default@sdk-57
cd MyApp
npx expo lint

npx expo lint instala eslint, eslint-config-expo e escreve eslint.config.js na raiz do projeto. Confirme o pin do SDK antes de personalizar as regras:

{
  "dependencies": {
    "expo": "~57.0.4",
    "react": "19.2.3",
    "react-native": "0.86.0"
  },
  "devDependencies": {
    "eslint": "^9.0.0",
    "eslint-config-expo": "~57.0.0"
  }
}

Ferramentas: Estes exemplos têm como alvo Expo SDK 57 (expo ~57.0.4), React Native 0.86.0 e React 19.2.3. Instale a extensão ESLint VS Code para que as violações apareçam enquanto você edita.

Exemplos Básicos

1. Configuração com npx expo lint

A Expo CLI é o caminho suportado para uma configuração plana funcional - ela fixa versões compatíveis de eslint e eslint-config-expo para o seu SDK.

# Primeira execução: instala devDependencies e cria eslint.config.js
npx expo lint
 
# Execuções subsequentes: faz o lint de todo o projeto
npx expo lint
 
# Corrige violações seguras automaticamente
npx expo lint --fix

• npx expo lint lê o script lint de package.json e encaminha flags para o ESLint
• A primeira execução pode levar um momento enquanto os pacotes são instalados - confirme as alterações geradas em eslint.config.js e no lockfile juntas
• Avisos não falham na CI por padrão - trate avisos como erros localmente se sua equipe executa uma política de zero avisos
• Exclua quaisquer arquivos .eslintrc.* restantes antes de adotar a configuração plana - o ESLint 9 prefere a configuração plana, mas volta para o legado quando ambos existem

Relacionado: ../project-setup/project-setup-basics.md - Checklist de verificação do pin do SDK e da primeira execução

2. Configuração Plana Padrão eslint-config-expo

Projetos SDK 53+ usam ESLint flat config. O arquivo gerado estende o preset do Expo - regras de React, hooks, TypeScript e importações já estão configuradas.

// eslint.config.js
const { defineConfig } = require("eslint/config");
const expoConfig = require("eslint-config-expo/flat");
 
module.exports = defineConfig([
  expoConfig,
  {
    ignores: ["dist/*"],
  },
]);

• eslint-config-expo/flat exporta um array defineConfig - espalhe ou referencie-o como o primeiro bloco para que os padrões do Expo carreguem antes das suas substituições
• O preset registra globais do navegador e React Native (__DEV__, fetch, APIs amigáveis ao Hermes) para que os arquivos de tela façam lint sem comentários /* global */
• As regras @typescript-eslint se aplicam a arquivos .ts e .tsx quando o TypeScript está presente no projeto
• Mantenha regras personalizadas em um objeto separado após expoConfig para que você substitua em vez de substituir o preset

Relacionado: Prettier & Ordenação de Importações - Camada Prettier sem conflitar com as regras de formatação do ESLint

3. Script npm run lint

Integre o linting ao package.json para que colegas de equipe, hooks de pré-commit e CI invoquem o mesmo comando.

{
  "scripts": {
    "start": "expo start",
    "lint": "expo lint",
    "lint:fix": "expo lint --fix",
    "typecheck": "tsc --noEmit"
  }
}

npm run lint
npm run lint:fix

• "lint": "expo lint" é o que npx expo lint executa internamente - prefira o script npm na documentação e no YAML da CI para que o ponto de entrada permaneça óbvio
• Adicione lint:fix para limpeza local; evite auto-fix na CI, a menos que seu pipeline seja idempotente e rápido
• Combine typecheck com lint - ESLint captura padrões que o TypeScript ignora (deps de hooks, ordem de importação) e vice-versa
• O EAS Build não executa o lint para você - os scripts devem ser explícitos no GitHub Actions ou nos Fluxos de Trabalho do EAS

Relacionado: Portões de Qualidade da CI - Falha nas builds com lint e typecheck juntos

4. Primeiras Regras Personalizadas

Comece com um pequeno bloco de regras após o preset do Expo. Esses dois ajustes cobrem a maioria das novas equipes Expo sem transformar o lint em um projeto de reescrita.

// eslint.config.js
const { defineConfig } = require("eslint/config");
const expoConfig = require("eslint-config-expo/flat");
 
module.exports = defineConfig([
  expoConfig,
  {
    rules: {
      "@typescript-eslint/no-unused-vars": [
        "error",
        { argsIgnorePattern: "^_", varsIgnorePattern: "^_" },
      ],
      "react/react-in-jsx-scope": "off",
    },
  },
  {
    ignores: ["dist/*", ".expo/*"],
  },
]);

// app/index.tsx - `_event` não é usado intencionalmente; o lint passa
import { Pressable, Text } from "react-native";
 
export default function Home() {
  return (
    <Pressable onPress={(_event) => console.warn("pressed")}>
      <Text>Tap me</Text>
    </Pressable>
  );
}

• argsIgnorePattern: "^_" é a saída de escape padrão para manipuladores de eventos que você deve aceitar, mas não ler
• react/react-in-jsx-scope: off está correto para o transform JSX do React 17+ - o preset Babel do Expo já o habilita
• Adicione regras uma de cada vez e corrija as violações resultantes antes de adicionar configurações mais rigorosas
• Prefira "warn" temporariamente ao implementar uma regra em uma grande base de código existente

Relacionado: Modo Estrito do TypeScript - Alinhe a rigorosidade do compilador com as regras de lint ao longo do tempo

5. Ignora Globais para Artefatos do Expo

Caminhos gerados e fornecidos nunca devem bloquear um merge. Em configuração plana, coloque ignores em um objeto dedicado com ignores como a única chave.

// eslint.config.js
const { defineConfig, globalIgnores } = require("eslint/config");
const expoConfig = require("eslint-config-expo/flat");
 
module.exports = defineConfig([
  globalIgnores([
    "node_modules/**",
    ".expo/**",
    "dist/**",
    "web-build/**",
    "ios/**",
    "android/**",
  ]),
  expoConfig,
  {
    rules: {
      "@typescript-eslint/no-unused-vars": [
        "error",
        { argsIgnorePattern: "^_", varsIgnorePattern: "^_" },
      ],
    },
  },
]);

• globalIgnores (ou um objeto { ignores: [...] } independente) pula arquivos inteiramente - execuções mais rápidas e menos falsos positivos
• Ignore .expo/ - estado do servidor de desenvolvimento local, não código fonte
• Ignore ios/ e android/ no fluxo gerenciado até que você confirme intencionalmente projetos nativos (CNG / bare)
• Misturar ignores com rules no mesmo objeto cria um filtro com escopo de arquivo, não um skip global - mantenha os ignores isolados

Relacionado: Código Morto e Análise de Dependências - Encontre arquivos não utilizados que o lint nunca toca

6. Lint de um Caminho com --fix

Mire em uma pasta de recursos enquanto itera para que o feedback seja rápido em aplicativos grandes.

# Faz o lint apenas da árvore do roteador do app
npx expo lint app
 
# Faz o lint de um pacote compartilhado em um monorepo
npx expo lint packages/ui/src
 
# Corrige problemas corrigíveis automaticamente em uma tela
npx expo lint app/(tabs)/index.tsx --fix

// app/(tabs)/index.tsx - dependência de hook ausente sinalizada antes de você abrir um PR
import { useEffect, useState } from "react";
import { Text, View } from "react-native";
 
export default function TabHome() {
  const [count, setCount] = useState(0);
 
  useEffect(() => {
    const id = setInterval(() => setCount((c) => c + 1), 1000);
    return () => clearInterval(id);
  }, []); // eslint pode avisar: react-hooks/exhaustive-deps
 
  return (
    <View>
      <Text>Count: {count}</Text>
    </View>
  );
}

• Escopo para app/ corresponde a como as equipes do Expo Router organizam recursos - faça o lint da pasta que você está alterando ativamente
• --fix reescreve a ordem de importação e problemas de estilo simples; ele não criará arrays de dependência de hook para você
• Avisos react-hooks/exhaustive-deps frequentemente expõem closures obsoletas em timers e assinaturas - leia a mensagem antes de silenciá-la
• npm run lint de projeto completo continua sendo o portão de merge, mesmo quando você faz lint localmente por caminho

Relacionado: Regras de Lint de React Hooks - Padrões exhaustive-deps em código móvel assíncrono

7. Globais do Node para Arquivos de Configuração

As telas do aplicativo rodam no Hermes ou no navegador; metro.config.js e app.config.ts rodam no Node. O preset do Expo já relaxa os globais do Node para nomes de arquivos de configuração comuns - estenda a lista quando adicionar arquivos de ferramentas personalizadas.

// eslint.config.js
const { defineConfig } = require("eslint/config");
const expoConfig = require("eslint-config-expo/flat");
const globals = require("globals");
 
module.exports = defineConfig([
  expoConfig,
  {
    files: ["metro.config.js", "app.config.ts", "babel.config.js"],
    languageOptions: {
      globals: globals.node,
    },
  },
  {
    ignores: ["dist/*"],
  },
]);

// metro.config.js - __dirname é válido sob globais do Node
const { getDefaultConfig } = require("expo/metro-config");
 
/** @type {import('expo/metro-config').MetroConfig} */
const config = getDefaultConfig(__dirname);
 
module.exports = config;

• Sem globais do Node, o ESLint sinaliza __dirname, require e module como indefinidos em arquivos de configuração
• eslint-config-expo já trata vários caminhos de configuração como casos especiais - adicione blocos files explícitos apenas para nomes personalizados (tailwind.config.js, scripts/**)
• Use /* eslint-env node */ como último recurso em um único arquivo legado - prefira languageOptions centralizado em configuração plana
• Mantenha os arquivos de configuração simplesmente .js ou .ts na raiz do repositório para que o glob files permaneça simples

Relacionado: ../project-setup/project-setup-basics.md - Layout de metro.config.js e app.config.ts

Exemplos Intermediários

8. Camada de Regras Específicas do RN

Após a passagem da linha de base, adicione regras focadas em mobile: proíba texto bruto fora de <Text>, desaconselhe console.log em código de produção e exija testID em pressables cobertos em E2E.

// eslint.config.js
const { defineConfig } = require("eslint/config");
const expoConfig = require("eslint-config-expo/flat");
 
module.exports = defineConfig([
  expoConfig,
  {
    rules: {
      "no-console": ["warn", { allow: ["warn", "error"] }],
      "react-native/no-raw-text": [
        "error",
        { skip: ["Trans", "Animated.Text"] },
      ],
    },
  },
  {
    ignores: ["dist/*", ".expo/*"],
  },
]);

// Violação: string bruta como filho de View - envolva com Text
import { View, Text, Pressable } from "react-native";
 
export function SettingsRow({ label }: { label: string }) {
  return (
    <Pressable accessibilityRole="button" testID="settings-row">
      <View>
        <Text>{label}</Text>
      </View>
    </Pressable>
  );
}

• react-native/no-raw-text captura uma classe comum de falhas no Android - strings devem viver dentro de <Text>
• no-console como warn mantém logs de depuração visíveis na revisão sem bloquear merges no primeiro dia
• Instale eslint-plugin-react-native quando habilitar regras específicas do RN: npx expo install eslint-plugin-react-native --dev
• Regras personalizadas da equipe (limites de importação, cores apenas do sistema de design) pertencem a um pacote de configuração compartilhado - veja a página de checklist dedicada

Relacionado: Regras ESLint Personalizadas para RN - Proíba console.log, props de a11y e limites de importação

9. Escopo de Lint de Monorepo

Em um layout Turborepo ou npm-workspaces, aponte o ESLint para as raízes de origem de cada aplicativo e compartilhe uma configuração base de packages/eslint-config.

{
  "name": "mobile",
  "private": true,
  "scripts": {
    "lint": "expo lint app src",
    "lint:all": "turbo run lint"
  }
}

// apps/mobile/eslint.config.js
const { defineConfig } = require("eslint/config");
const expoConfig = require("eslint-config-expo/flat");
const baseRules = require("@myorg/eslint-config/expo");
 
module.exports = defineConfig([
  expoConfig,
  baseRules,
  {
    ignores: ["dist/*", ".expo/*", "ios/**", "android/**"],
  },
]);

• Passe diretórios explícitos para expo lint quando o código do aplicativo estiver fora de app/ (por exemplo, src/features/)
• Extraia substituições compartilhadas para packages/eslint-config para que aplicativos mobile e web herdem as mesmas regras de variáveis não utilizadas e importações
• Execute lint:all da raiz do repositório na CI para que uma alteração de hook compartilhada em packages/ui falhe antes de publicar
• Cada aplicativo ainda possui seu próprio bloco ignores - pastas nativas e saída de build diferem por alvo

Relacionado: ../project-setup/monorepo-with-turborepo.md - Layout de workspace e grafo de tarefas | Portões de Qualidade da CI - Builds de matriz por aplicativo

10. Portão de Pré-Build de Lint + Typecheck

Trate lint e TypeScript como portões complementares antes do eas build ou de uma submissão para a loja - eles capturam classes de defeitos diferentes.

{
  "scripts": {
    "lint": "expo lint",
    "typecheck": "tsc --noEmit",
    "validate": "npm run typecheck && npm run lint"
  }
}

npm run validate

// TypeScript passa; ESLint sinaliza o hook - validate pega ambos
import { useCallback, useState } from "react";
import { Button, View } from "react-native";
 
export function Counter() {
  const [n, setN] = useState(0);
  const increment = useCallback(() => setN(n + 1), []); // risco de closure obsoleto
 
  return (
    <View>
      <Button title={`${n}`} onPress={increment} />
    </View>
  );
}

• tsc --noEmit valida tipos sem emitir JS - rápido o suficiente para cada PR
• expo lint executa o plugin de hooks - closures obsoletos como useCallback(..., []) lendo n são descobertas de lint, não erros de tipo
• Nomeie o script combinado validate ou check e chame-o da CI, hooks de pré-push e rituais locais de pré-lançamento
• O Metro ainda pode empacotar código que falha em validate - nunca pule o portão porque o simulador iniciou

Relacionado: Modo Estrito do TypeScript - Aperte strict incrementalmente | Melhores Práticas de Linting - Política de zero avisos sem diminuir a velocidade

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