CodeValidator

CLI para validar arquivos React e React Native. Detecta violações de Rules of Hooks, dependências incorretas em efeitos, padrões problemáticos de renderização, props não definidas, erros de JSX e muito mais — com dicas explicativas em português.

Instalação

Requisitos: Node.js 16+

git clone <repo>
cd CodeValidator
npm install
npm link

Após isso o comando codevalidator estará disponível em qualquer lugar do sistema.

Comandos

validate — analisar arquivos ou diretórios

codevalidator validate <paths...> [opções]
# ou simplesmente (validate é o padrão):
codevalidator <paths...> [opções]

# Arquivo único
codevalidator src/components/Button.tsx

# Diretório inteiro
codevalidator src/

# Múltiplos caminhos
codevalidator src/components/ src/screens/ src/hooks/

# Modo React Native
codevalidator src/ --react-native

# Saída compacta (uma linha por problema)
codevalidator src/ --format compact

# Saída JSON (CI/CD ou integração com outras ferramentas)
codevalidator src/ --format json

# Falhar se houver mais de N warnings
codevalidator src/ --max-warnings 10

# Ignorar pastas ou padrões
codevalidator src/ --ignore-pattern "**/__tests__/**" --ignore-pattern "**/*.stories.*"

staged — verificar o que vai ser commitado

Valida apenas os arquivos React/RN que estão staged (git add) no repositório do diretório atual. Não instala, não cria e não modifica nada no projeto validado.

codevalidator staged [opções]

# Verificar staged antes de commitar
codevalidator staged

# Com regras React Native
codevalidator staged --react-native

# Bloquear se houver qualquer warning
codevalidator staged --max-warnings 0

Como funciona:

1. Detecta a raiz do repositório via git rev-parse --show-toplevel
2. Lista os arquivos staged com git diff --cached --name-only
3. Filtra apenas .js, .jsx, .ts, .tsx
4. Roda a validação e exibe os resultados
5. Retorna exit code 1 se houver erros — impedindo o commit se usado como hook

Opções (disponíveis em ambos os comandos)

| Opção | Descrição | Padrão | |---|---|---| | --react-native | Ativa regras específicas para React Native | false | | --format <type> | Formato de saída: table, compact, json | table | | --no-color | Desativa cores no output | — | | --max-warnings <n> | Retorna exit code 1 se warnings excederem N | — | | --ignore-pattern <glob> | Ignora arquivos que correspondam ao padrão (repetível) | [] |

Regras verificadas

Rules of Hooks

| Regra | Nível | O que detecta | |---|---|---| | react-hooks/rules-of-hooks | Erro | Hook chamado dentro de condicional, loop ou função aninhada | | react-hooks/exhaustive-deps | Aviso | Dependências faltando em useEffect, useCallback, useMemo |

Renderização e listas

| Regra | Nível | O que detecta | |---|---|---| | react/jsx-key | Erro | Elemento em map() sem prop key | | react/no-array-index-key | Aviso | Índice do array usado como key | | react/jsx-no-useless-fragment | Aviso | Fragment vazio ou com filho único desnecessário |

Estado e ciclo de vida

| Regra | Nível | O que detecta | |---|---|---| | react/no-direct-mutation-state | Erro | Mutação direta de this.state fora do setState | | react/no-unused-state | Aviso | Campo de state declarado mas nunca lido | | react/no-deprecated | Aviso | Uso de APIs depreciadas do React | | react/no-will-update-set-state | Erro | setState dentro de componentWillUpdate |

JSX e propriedades

| Regra | Nível | O que detecta | |---|---|---| | react/no-unknown-property | Erro | Propriedade HTML/SVG inválida (ex: class em vez de className) | | react/jsx-no-duplicate-props | Erro | Mesma prop passada mais de uma vez | | react/jsx-no-undef | Erro | Componente ou variável não importado/definido | | react/jsx-pascal-case | Erro | Componente com nome em minúscula (tratado como tag HTML) | | react/no-unescaped-entities | Aviso | Caracteres especiais não escapados no JSX | | react/jsx-curly-brace-presence | Aviso | Chaves desnecessárias em props ou children literais |

Segurança

| Regra | Nível | O que detecta | |---|---|---| | react/no-danger | Aviso | Uso de dangerouslySetInnerHTML (risco de XSS) | | react/no-string-refs | Erro | String refs depreciadas (ref="myRef") | | react/no-find-dom-node | Erro | Uso de ReactDOM.findDOMNode() depreciado |

Qualidade de código

| Regra | Nível | O que detecta | |---|---|---| | react/prop-types | Aviso | Componente sem PropTypes definidos | | react/no-unused-prop-types | Aviso | Prop declarada mas nunca utilizada | | react/display-name | Aviso | Componente dinâmico (HOC, memo, forwardRef) sem displayName | | react/self-closing-comp | Aviso | Componente sem filhos que poderia ser self-closing | | react/no-render-return-value | Erro | Uso do valor de retorno de ReactDOM.render() |

React Native (com --react-native)

| Regra | Nível | O que detecta | |---|---|---| | react-native/no-raw-text | Erro | Texto puro fora de um componente <Text> | | react-native/no-inline-styles | Aviso | Estilos inline em vez de StyleSheet.create | | react-native/no-unused-styles | Aviso | Estilos declarados no StyleSheet mas não referenciados | | react-native/no-color-literals | Aviso | Cores hardcoded fora de arquivo de constantes | | react-native/split-platform-components | Aviso | Código específico de plataforma sem separação adequada |

Códigos de saída

| Código | Significado | |---|---| | 0 | Nenhum erro encontrado (warnings não bloqueiam por padrão) | | 1 | Um ou mais erros encontrados, ou --max-warnings excedido | | 2 | Falha interna na análise (arquivo inválido, erro inesperado) |

Integração com CI/CD

GitHub Actions

- name: Validar componentes React
  run: |
    npm install -g react-code-validator
    codevalidator src/ --max-warnings 0 --format compact

Script npm no projeto

{
  "scripts": {
    "validate": "codevalidator src/",
    "validate:staged": "codevalidator staged --max-warnings 0"
  }
}

Saída JSON para scripts

codevalidator src/ --format json | jq '.files[] | select(.errorCount > 0) | .file'

Arquivos de exemplo

O diretório examples/ contém casos de teste:

• bad-hooks.jsx — Violações de Rules of Hooks e dependências faltando
• bad-patterns.jsx — key ausente, mutação de state, className errado, etc.
• good-component.tsx — Componente correto que passa sem nenhum problema

codevalidator examples/

Arquitetura

bin/
  codevalidator.js   — entrypoint CLI (Commander.js); comandos validate e staged
src/
  analyzer.js        — resolve arquivos, configura e executa ESLint programaticamente
  reporter.js        — formata e exibe os resultados (table / compact / json)
  messages.js        — dicas explicativas em português por regra
examples/
  bad-hooks.jsx
  bad-patterns.jsx
  good-component.tsx

Licença

MIT