VSCode показывает ошибку при утверждении типа с использованием ключевого слова AS в файле .tsx

VSCode показывает ошибку при утверждении типа с использованием ключевого слова AS в файле .tsx. Принимая во внимание, что нет проблем, когда я выполняю код и запускаю приложение в веб-браузере.

Ошибка синтаксического анализа: ожидается неожиданный токен;

введите здесь описание изображения

введите здесь описание изображения

Мой eslint.rc

{
  "parser": "babel-eslint",
  "env": {
    "es6": true,
    "browser": true
  },
  "extends": [
    "airbnb-typescript",
    "airbnb/hooks",
    "plugin:@typescript-eslint/eslint-recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:mdx/recommended"
  ],
  "settings": {
    "import/resolver": {
      "node": {
        "paths": [
          "src"
        ],
        "extensions": [
          ".js",
          ".jsx",
          ".ts",
          ".tsx",
          ".mdx"
        ]
      }
    }
  },
  "rules": {
    "comma-dangle": "off",
    "import/no-unresolved": "off",
    "jsx-a11y/anchor-is-valid": "off",
    "jsx-a11y/click-events-have-key-events": "off",
    "jsx-a11y/control-has-associated-label": "off",
    "jsx-a11y/no-static-element-interactions": "off",
    "no-console": "off",
    "no-plusplus": "off",
    "react-hooks/exhaustive-deps": "off",
    "react/forbid-prop-types": "off",
    "react/jsx-filename-extension": "off",
    "react/jsx-props-no-spreading": "off",
    "react/require-default-props": "off"
  }
}

Мой tsconfig.json

{
  "compilerOptions": {
    "baseUrl": ".",
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": false,
    "strictNullChecks": false,
    "forceConsistentCasingInFileNames": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react",
    "sourceMap": true, // Generate corresponding .map file
    "declaration": true, // Generate corresponding .d.ts file
  },
  "include": [
    "src/**/*" // *** The files TypeScript should type check ***
  ],
  "exclude": ["node_modules", "build"] // *** The files to not type check ***
}

Мои зависимости Dev:

"devDependencies": {
    "@typescript-eslint/eslint-plugin": "^2.34.0",
    "@typescript-eslint/parser": "^2.34.0",
    "eslint": "^6.8.0",
    "eslint-config-airbnb": "^18.2.0",
    "eslint-config-airbnb-typescript": "^7.2.1",
    "eslint-config-prettier": "^6.11.0",
    "eslint-plugin-import": "^2.22.0",
    "eslint-plugin-jsx-a11y": "^6.3.1",
    "eslint-plugin-mdx": "^1.7.1",
    "eslint-plugin-prettier": "^3.1.4",
    "eslint-plugin-react": "^7.20.3",
    "eslint-plugin-react-hooks": "^2.5.1",
    "mdx-loader": "^3.0.2",
    "numeral": "^2.0.6",
    "prettier": "^1.19.1",
    "typescript": "^3.9.7"
  }

person Jaskaran Singh    schedule 09.02.2021    source источник
comment
Возможно, это проблема, аналогичная этой?   -  person carljdp    schedule 09.02.2021
comment
@carljdp Я так не думаю, ОП спрашивает об ошибке, отображаемой линтером в коде VS.   -  person Alwaysalearner    schedule 09.02.2021


Ответы (1)


Я решил проблему после некоторых исследований и разработок. Проблема заключалась в том, что синтаксический анализатор, используемый в .eslintrc, был parser: babel-eslint, тогда как мы должны использовать этот синтаксический анализатор при работе с typescript в реакции parser: @typescript-eslint/parser.

Для этого вам необходимо установить пакет @typescript-eslint/parser в качестве devDependencies.

vscode теперь не показывает ошибку:

введите здесь описание изображения

person Jaskaran Singh    schedule 09.02.2021