莫名其妙的解析错误：意外的令牌，预期的","

Question

我得到了这个模糊的错误，我怀疑深度之间有一些不兼容

Line 11:85:  Parsing error: Unexpected token, expected ","
> 11 | const tracker = new LoggerTracker({ analyticsId: process.env.REACT_APP_ANALYTICS_ID as string});
|                                                                                     ^

npm列表

├── @commitlint/cli@11.0.0
├── @commitlint/config-conventional@11.0.0
├── @pact-foundation/pact-node@10.2.4
├── @pact-foundation/pact@9.5.1
├── @testing-library/jest-dom@5.16.5
├── @testing-library/react-hooks@2.0.3
├── @testing-library/react@9.5.0
├── @types/classnames@2.3.1
├── @types/jest@24.9.1
├── @types/node@12.20.55
├── @types/react-dom@16.9.17
├── @types/react-redux@7.1.24
├── @types/react-router-dom@5.3.3
├── @types/react@16.14.34
├── @types/webpack-env@1.18.0
├── @typescript-eslint/eslint-plugin@2.34.0
├── @typescript-eslint/parser@2.34.0
├── @zonedigital/browserslist-config@4.3.0
├── abortcontroller-polyfill@1.7.5
├── antd@3.26.20
├── classnames@2.3.2
├── commitizen@4.2.5
├── commitlint@11.0.0
├── cz-conventional-changelog@3.3.0
├── date-fns@2.29.3
├── eslint-config-react@1.1.7
├── eslint-plugin-compat@3.13.0
├── eslint-plugin-import@2.26.0
├── eslint-plugin-react-hooks@2.5.1
├── eslint-plugin-react@7.31.11
├── fetch-mock@8.3.2
├── history@4.10.1
├── husky@3.1.0
├── jest-environment-jsdom-global@1.2.1
├── jest-environment-jsdom@24.9.0
├── jwt-decode@2.2.0
├── less@3.13.1
├── lint-staged@9.5.0
├── lodash@4.17.21
├── msal@1.4.17
├── node-sass@4.14.1
├── normalizr@3.6.2
├── npm-run-all@4.1.5
├── react-app-polyfill@1.0.6
├── react-dom@16.14.0
├── react-redux@7.2.9
├── react-router-dom@5.3.4
├── react-router-test-context@0.1.0
├── react-scripts@3.2.0
├── react-test-renderer@16.14.0
├── react@16.14.0
├── redux-mock-store@1.5.4
├── redux-thunk@2.4.2
├── redux@4.2.0
├── reselect@4.1.7
├── run-all@1.0.1
├── stylelint@10.1.0
└── typescript@3.9.10

eslint配置

module.exports = {
"extends": [
"react",
"plugin:import/typescript"
],
"rules": {
"arrow-body-style": 0,
"react/prop-types": 0,
"@typescript-eslint/no-non-null-assertion": 0,
"@typescript-eslint/no-explicit-any": 0,
"@typescript-eslint/explicit-member-accessibility": 0,
"@typescript-eslint/explicit-function-return-type": 0,
"import/no-extraneous-dependencies": [
"error",
{
"devDependencies": [
"**/*.test.{ts,tsx}",
"./src/setupTests.ts",
"./src/store/__mocks__/*",
"./src/pact/*"
],
"optionalDependencies": false,
"peerDependencies": false
}
],
"camelcase": 0
},
"settings": {
"polyfills": [
"Promise",
"fetch",
"Object",
"Array.from",
"URLSearchParams",
"AbortController",
"Headers"
],
"react": {
"version": "detect"
}
},
"env": {
"browser": true,
"node": true,
}
}

更新:用于记录整个过程。根据@morganney的建议，我添加了

"parser": "@typescript-eslint/parser",

在我的eslint配置。这样我就得到了错误"解析错误:ImportDeclaration应该出现在模式是ES6和模块上下文中"我通过添加parserOptions

来解决这个问题

"parserOptions": {
"ecmaFeatures": {
"jsx": true
},
"sourceType": "module"
},

第二次更新:现在我试着让eslint识别Jest，以摆脱这样的错误:&;describe is not defined&;从eslint。我试过添加env:

"env": {
"browser": true,
"node": true,
"jest": true
}

和

"plugin:jest-react/recommended"

我不确定这是正确的方式根据我的依赖版本

Answer 1

您的ESLint配置缺少parser值。

"parser": "@typescript-eslint/parser"

从docs

这是必需的，否则ESLint会在解析TypeScript代码时抛出错误，就像解析普通的JavaScript一样。

你可能也应该添加一个插件值

plugins: ['@typescript-eslint']