ESLint «Неожиданный токен)» также затмевает другие проблемы в файле

Question

Я реализую ESLint вместе с Prettier в проекте React, и приведенный ниже код дает неприятную ошибку синтаксического анализа.

      ReactDOM.render(
  <TierComparisonApp {...tier_comparison_app.dataset} />,
  document.getElementById('tier_comparison_app'),
); <-- Parsing error: Unexpected token )

Как ни странно, когда я удаляю запятую после второго аргумента, переданного в render, эта ошибка синтаксического анализа исчезнет, ​​обнаружив ожидаемую проблему с отсутствием этой запятой, но также и другую проблему с tier_comparision_app быть неопределенным.

      ReactDOM.render(
  <TierComparisonApp {...tier_comparison_app.dataset} />, <-- (correctly  caught as undefined)
  document.getElementById('tier_comparison_app') <-- (correctly saying to insert a comma)
);

Еще более странно то, что внесение вышеупомянутого изменения также выявляет проблемы гораздо раньше в файле, связанные с использованием == вместо ===, что также является ожидаемым поведением. Любые идеи относительно того, что может быть причиной этого? Я создал Pastebin своего .eslintrc.json потому что он немного переполнен правилами.

Answer 1

Итак, сразу после написания этого я понял, что не установил свой parser в моем .eslintrc.json файл, как таковой:

      "parser": "babel-eslint",

Очень простое решение, которое имеет полный смысл в отношении того, почему ESLint может столкнуться с проблемой синтаксического анализа. Очевидно, вам необходимо установить babel-eslintс вашим любимым менеджером пакетов. Я бы порекомендовал это всем, кто сталкивается с проблемами синтаксического анализа, которых они не ожидали, и, надеюсь, я все еще отправляю это с ответом, что может быть полезно для кого-то в будущем.