ESLint fails to resolve Vue file errors

Vue3

After deploying ESLint, there was an incomprehensible error in the Vue file and it has not been resolved.
There is an error in the comments and there is no particular problem, so I feel that the actual situation does not match the error content of ESLint.

{
  "env": {
    "browser": true,
    "es2021"—true
  },
  "extends": [
    "eslint: recommended",
    "plugin:vue/vue3-essential",
    "plugin:vue/vue3-strongly-recommended",
    "plugin:vue/vue3-recommended",
    "plugin:@typescript-eslint/recommended"
  ],
  "overrides": [ ],
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaVersion": "latest",
    "sourceType": "module"
  },
  "plugins": ["vue", "@typescript-eslint",
  "rules": {
    "semi": [2, "always"]
  }
}

{
  "name": "spanish-app-frontend-vue-vite",
  "private"—true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vue-tsc --noEmit&vite build",
    "preview": "vite preview",
    "lint": "eslint src"
  },
  "dependencies": {
    "vue": "^3.2.37",
    "vue-router": "^4.1.5"
  },
  "devDependencies": {
    "@typescript-eslint/eslint-plugin": "^5.41.0",
    "@typescript-eslint/parser": "^5.41.0",
    "@vitejs/plugin-vue": "^3.1.0",
    "@vue/cli-plugin-router": "~5.0.0",
    "@vue/eslint-config-typescript": "^11.0.2",
    "autoprefixer": "^10.4.12",
    "eslint": "^8.26.0",
    "eslint-plugin-vue": "^9.6.0",
    "postcss": "^8.4.18",
    "tailwindcss": "^3.2.1",
    "typescript": "^4.6.4",
    "vite": "^3.1.0",
    "vue-tsc": "^0.40.4"
  }
}

↓

{
  "env": {
    "browser": true,
    "es2021"—true
  },
  "extends": [
    "eslint: recommended",
    "plugin:vue/vue3-recommended",
    "@vue/eslint-config-typescript/recommended"
  ],
  "overrides": [ ],
  // "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaVersion": "latest",
    "sourceType": "module",
    "parser": "@typescript-eslint/parser"
  },
  "plugins": ["vue", "@typescript-eslint",
  "rules": {
    "semi": [2, "always"]
  }
}

vuejs

2022-10-27 00:00

1 Answers

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

The parser appears to be TypeScript in all files because is set to eslintrc.

As you can see in the comments, eslint-plugin-vue has the parser for Vue, so if you try to read eslint-plugin-vue after plugin:@typescript-eslint in extend, the parser for Vue should be used properly first.
However, at this point, of course, ts is parsed as non-ts, so you need to specify a parser.

If you want to specify it as a custom parser, specify ParserOptions.parser instead of top level.
Also, plugin:vue/vue3-recommended contains essential and strongly-recommended, so these are not required.

In other words,

...
    "extends": [
      "eslint: recommended",
      "plugin:@typescript-eslint/recommended",
      "plugin:vue/vue3-recommended"
    ],
    "overrides": [ ],
    // "parser": "@typescript-eslint/parser",
    "parserOptions": {
      "ecmaVersion": "latest",
      "sourceType": "module",
      "parser": "@typescript-eslint/parser"
    },

...

You should be able to operate at a minimum (no perspective errors) by doing so.

It is also recommended to use @vue/eslint-config-typescript when using ts in Vue.This will properly configure the parser above and load the @typescript-eslint rule.When reflected,

extends:[
    "eslint: recommended",
    "plugin:vue/vue3-recommended",
    "@vue/eslint-config-typescript/recommended"
  ]

That's right.

2022-10-27 00:00

If you have any answers or tips

Popular Tags

python x 4647

android x 1593

java x 1494

javascript x 1427

c x 927

c++ x 878

ruby-on-rails x 696

php x 692

python3 x 685

html x 656