Как решить Parsing Error в ESLint?

Question

[dicem]

Имеется следующий фрагмент кода (метод Vue компонента):

56|      openFileSelection (): void {
57|        if (this.disabled) return
58|
59|        (<HTMLElement>this.$refs.fileInput).click()
60|      },

ESLINT выдает мне ошибку:

60:6  error  Parsing error: Unexpected token. Did you mean `{'}'}` or `}`?

Мои конфиги:

package.json

"lint-staged": {
    "*.{js,vue}": "eslint",
    "*.{css,vue}": "stylelint"
  },
  "husky": {
    "hooks": {
      "commit-msg": "commitlint -E HUSKY_GIT_PARAMS",
      "pre-commit": "lint-staged"
    }
  },
  "dependencies": {
    "@nuxtjs/axios": "^5.13.1",
    "@nuxtjs/style-resources": "^1.0.0",
    "@nuxtjs/svg-sprite": "^0.5.2",
    "core-js": "^3.9.1",
    "lodash": "^4.17.21",
    "nuxt": "^2.15.3",
    "postcss-viewport-height-correction": "^1.1.1",
    "v-click-outside": "^3.1.2",
    "v-mask": "^2.2.4",
    "vue-dragscroll": "^3.0.0"
  },
  "devDependencies": {
    "@commitlint/cli": "^12.0.1",
    "@commitlint/config-conventional": "^12.0.1",
    "@nuxt/types": "^2.15.3",
    "@nuxt/typescript-build": "^2.1.0",
    "@nuxtjs/eslint-config-typescript": "^6.0.0",
    "@nuxtjs/eslint-module": "^3.0.2",
    "@nuxtjs/stylelint-module": "^4.0.0",
    "@typescript-eslint/parser": "^4.23.0",
    "@vue/test-utils": "^1.1.3",
    "babel-core": "7.0.0-bridge.0",
    "babel-eslint": "^10.1.0",
    "babel-jest": "^26.6.3",
    "eslint": "^7.22.0",
    "eslint-plugin-nuxt": "^2.0.0",
    "eslint-plugin-vue": "^7.7.0",
    "fibers": "^5.0.0",
    "husky": "^4.3.8",
    "jest": "^26.6.3",
    "lint-staged": "^10.5.4",
    "postcss-csso": "^5.0.1",
    "postcss-flexbugs-fixes": "^5.0.2",
    "postcss-mq-keyframes": "^0.3.0",
    "sass": "^1.32.12",
    "sass-loader": "^10.2.0",
    "stylelint": "^13.12.0",
    "stylelint-config-standard": "^21.0.0",
    "stylelint-order": "^4.1.0",
    "ts-jest": "^26.5.4",
    "typescript": "^4.2.4",
    "vue-jest": "^3.0.4"
  }

tsconfig.json

{
  "compilerOptions": {
    "jsx": "preserve",
    "target": "ES2018",
    "module": "ESNext",
    "moduleResolution": "Node",
    "lib": [
      "ESNext",
      "ESNext.AsyncIterable",
      "DOM"
    ],
    "esModuleInterop": true,
    "allowJs": true,
    "sourceMap": true,
    "strict": true,
    "noEmit": true,
    "experimentalDecorators": true,
    "baseUrl": ".",
    "paths": {
      "~/*": [
        "./*"
      ],
      "@/*": [
        "./*"
      ]
    },
    "types": [
      "@nuxt/types",
      "@nuxtjs/axios",
      "@types/node"
    ]
  },
  "exclude": [
    "node_modules",
    ".nuxt",
    "dist"
  ],
  "extension": [".ts", ".tsx"]
}

.eslintrc.js слишком длинный, поэтому выложу тут https://pastebin.com/rLx9ztzK

Comments

[Василий Банников]

Кажется, запятая в конце лишняя.

[dicem]

Василий Банников, Забыл уточнить, это метод в компоненте Vue, запятая на месте

Answer 1

[twolegs]

Полагаю, что приведение парсится криво (особенно если в этом же файле есть темплейт).

Предлагаю переписать так:
(this.$refs.fileInput as HTMLElement).click()

Comments

[dicem]

Это помогло, но все равно не понятно, почему линтер не воспринимал эту строку

[twolegs]

Вероятно, что он парсил `` как тег, и от этого все ломалось.

Answer 2

[Aetae]

jsx, полагаю, мозги парит. Не юзайте jsx с vue. Хоть это и разрешено, но jsx такое уродливое дерьмо по сравнению с нормальными vue-шаблонами...

Comments

[dicem]

полностью с тобой согласен на счет jsx, но у меня стандартный Vue шаблон с Typescript

[Aetae]

dicem,

"compilerOptions": {
    "jsx": "preserve",

[dicem]

Aetae, ох, забыл убрать это дерьмо