React typescript eslint 錯誤解析錯誤：意外的令牌？ 如何解決這個問題？

Question

所以這是我的 index.tsx：

import React from 'react';
import { createRoot } from 'react-dom/client';

import App from './App';


const container = document.getElementById('root')!;
const root = createRoot(container);
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

這是我的 eslintrc.js：

module.exports = {
  env: {
    browser: true,
    es2021: true
  },
  extends: ['plugin:react/recommended', 'prettier'],
  overrides: [
    {
      files: ['*.ts', '*.tsx'],
      parserOptions: {
        project: ['./tsconfig.json']
      }
    }
  ],
  parserOptions: {
    parser: 'babel-eslint',
    ecmaFeatures: {
      jsx: true
    },
    ecmaVersion: 'latest',
    sourceType: 'module'
  },
  plugins: ['react', '@typescript-eslint', 'prettier', 'simple-import-sort'],

我試過安裝 babel-eslint，並像解析器一樣添加它？ 但它沒有幫助

所以問題來了，如何解決“error Parsing error: Unexpected token?”的問題？

Answer 1

通過添加"parser": "@typescript-eslint/parser",將typescript-eslint設置為您的解析器。

https://typescript-eslint.io/docs/