Como resolver o erro ESLint Parsing error: Unexpected token

Neste artigo você aprenderá a como solucionar o erro ESLint Parsing error: Unexpected token, um problema bem comum de React JS

Fala programador(a), beleza? Bora aprender mais sobre os erros do React JS!

Desenvolvedores que utilizam o ESLint para melhorar a qualidade do código frequentemente se deparam com erros de parsing, como o famoso “ESLint Parsing error: Unexpected token”.

Este erro pode ser particularmente frustrante, pois muitas vezes a causa não é clara à primeira vista.

Neste artigo, vamos explorar algumas das causas comuns desse erro e como resolvê-las, especialmente no contexto de projetos React JS.

O que é ESLint e por que esse erro ocorre?

O que é ESLint?

O ESLint é uma ferramenta de linting para JavaScript, muito utilizada para identificar e corrigir problemas no código.

Ele se integra bem com diversos editores de código e pode ser personalizado para seguir as regras de estilo de código de sua equipe.

Por que o Erro de Parsing Acontece?

O erro “Parsing error: Unexpected token” geralmente ocorre quando o ESLint não consegue entender uma parte específica do seu código.

Isso pode ser devido a várias razões, incluindo mas não limitado a:

• Sintaxe inválida ou desconhecida
• Configurações erradas no arquivo .eslintrc
• Incompatibilidade com a versão do ECMAScript (JavaScript) utilizada

Solucionando o Erro em Projetos React JS

Vamos focar em como resolver esse erro em projetos React JS. É comum esse problema surgir quando estamos usando recursos mais modernos do JavaScript ou sintaxe JSX.

Atualize sua Configuração ESLint

Uma das primeiras coisas a verificar é se seu arquivo de configuração ESLint (geralmente .eslintrc ou .eslintrc.js) está configurado corretamente.

Para projetos React, certifique-se de que você está estendendo a configuração do React:

{
  "extends": ["react-app", "plugin:react/recommended"],
  "parser": "babel-eslint",
  "parserOptions": {
    "ecmaVersion": 2021,
    "sourceType": "module",
    "ecmaFeatures": {
      "jsx": true
    }
  }
}

Instale ou Atualize Dependências

Às vezes, o erro pode ser resolvido simplesmente atualizando as dependências do ESLint e dos plugins relacionados.

npm update eslint babel-eslint eslint-plugin-react

Verifique seu Código

Examine o código onde o erro está sendo apontado. Vamos usar um componente funcional React como exemplo:

function MeuComponente() {
  const [estado, setEstado] = useState(null);

  return (
    <div>
      {estado?.nome ?? "Nome não disponível"}
    </div>
  )
}

Neste exemplo, estamos usando o operador de encadeamento opcional (?.) e o operador de coalescência nula (??), ambos recursos mais novos do JavaScript.

Se o ESLint estiver configurado para uma versão mais antiga do ECMAScript, isso poderia causar o erro “Parsing error: Unexpected token”.

Para resolver isso, certifique-se de que a propriedade ecmaVersion em seu arquivo .eslintrc esteja atualizada.

"parserOptions": {
  "ecmaVersion": 2021
}

Quer aprender mais sobre programação? Conheça nosso canal no YouTube:

Conclusão

Chegamos ao fim do artigo sobre como resolver o erro ESLint Parsing error: Unexpected token!

O erro “ESLint Parsing error: Unexpected token” pode ser um obstáculo no desenvolvimento, mas geralmente é um problema fácil de resolver.

O importante é identificar se o erro vem de uma sintaxe desconhecida, uma configuração ESLint incorreta ou uma dependência desatualizada.

Ao seguir as melhores práticas e manter suas configurações e dependências atualizadas, você pode minimizar a ocorrência desse erro e manter seu fluxo de desenvolvimento tranquilo e eficiente.

Está buscando em evoluir como Programador? Confira o nossos cursos de programação.