91842
# ESLintでVueファイルのエラーを解消できない

## 環境

  * Vue3

## 事象概要

ESLintを導入した後に、Vueファイルにおいて理解できないエラーが発生しており解消できてないです。  
コメント箇所でエラーが出ていたり、特段問題なさそうな箇所でエラーが出ているので、ESLintが出しているエラー内容と実態が合致しないように感じます。

[![画像の説明をここに入力](https://i.stack.imgur.com/AWWs7.png)](https://i.stack.imgur.com/AWWs7.png)

[![画像の説明をここに入力](https://i.stack.imgur.com/l6rIE.png)](https://i.stack.imgur.com/l6rIE.png)

## .eslintrc.json

```

    {
      "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"]
      }
    }
    
```

## package.json

```

    {
      "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"
      }
    }
    
```

↓

## 修正後の.eslintrc.json

```

    {
      "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"]
      }
    }
    
```

## npx eslint --ext=.vue,.ts . 出力結果

/hogehoge/src/App.vue  
3:3 warning Require self-closing on Vue.js custom components () vue/html-self-
closing

/hogehoge/src/components/Footer.vue  
1:1 error Component name "Footer" should always be multi-word vue/multi-word-
component-names

/hogehoge/src/components/Header.vue  
1:1 error Component name "Header" should always be multi-word vue/multi-word-
component-names

/hogehoge/src/pages/Grammar.vue  
1:1 error Component name "Grammar" should always be multi-word vue/multi-word-
component-names

/hogehoge/src/pages/Home.vue  
1:1 error Component name "Home" should always be multi-word vue/multi-word-
component-names

/hogehoge/src/pages/Sentence.vue  
1:1 error Component name "Sentence" should always be multi-word vue/multi-
word-component-names

/hogehoge/src/pages/Test.vue  
1:1 error Component name "Test" should always be multi-word vue/multi-word-
component-names

/hogehoge/src/pages/Word.vue  
1:1 error Component name "Word" should always be multi-word vue/multi-word-
component-names  
4:7 error Elements in iteration expect to have 'v-bind:key' directives
vue/require-v-for-key  
4:36 warning Expected 1 line break after opening tag (`<li>`), but no line
breaks found vue/singleline-html-element-content-newline  
4:71 warning Expected 1 line break before closing tag (`</li>`), but no line
breaks found vue/singleline-html-element-content-newline  
9:15 warning 'reactive' is defined but never used @typescript-eslint/no-
unused-vars  
12:11 error Don't use `String` as a type. Use string instead @typescript-
eslint/ban-types  
13:11 error Don't use `String` as a type. Use string instead @typescript-
eslint/ban-types

✖ 14 problems (10 errors, 4 warnings)  
2 errors and 3 warnings potentially fixable with the `--fix` option.

## Sentenct.vue

```

    <template>
      <div>
        <ul>
          <li>a</li>
        </ul>
      </div>
    </template>
    <script setup lang="ts"></script>
    <style scoped></style>
    
```

## Test.vue

```

    <template>
      <div>Test</div>
    </template>
    <script setup lang="ts"></script>
    <style scoped></style>
    
    
```
CC BY-SA 4.0
2022-10-25T15:44:18.477
91820
2022-10-26T15:09:03.527
2022-10-26T15:09:03.527
43642
43642
question
vue.js
ESLintでVueファイルのエラーを解消できない
```

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

をeslintrcに設定されているため、パーサーがすべてのファイルにおいてTypeScriptになってしまっているようです。

Vueのパーサーはコメントでも示したようにeslint-plugin-vueが持っていますので、extendでplugin:@typescript-
eslintよりあとにeslint-plugin-vueを読み込むようにすればまず適切にVue側のパーサーが使用されるはずです。  
ただし、この時点では当然tsが非tsとしてパースされいてるのでパーサーの指定は必要です。

カスタムパーサーとして指定する場合、[トップレベルではなくparserOptions.parserに指定](https://eslint.vuejs.org/user-
guide/#how-to-use-a-custom-parser)します。  
また、`plugin:vue/vue3-recommended`は`essential`や`strongly-
recommended`を包括しているのでこれらの指定は不要です。

つまり、

```

    ...
        "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"
        },
    
    ...
    
```

のようにすることで最低限動作するようになる（パースエラーにならなくなる）はずです。

また、Vueでtsを使用する場合、 @vue/eslint-config-typescript
の利用が推奨されます。これは、適切に上記パーサーの設定と、`@typescript-eslint`ルールの読み込みを行ってくれます。反映させると

```

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

ですね。

（なお、[当該configでは@rushstack/eslint-patch/modern-module-
resolutionをrequireすることが推奨されています](https://github.com/vuejs/eslint-config-
typescript#vueeslint-config-typescript-1)。）
CC BY-SA 4.0
2022-10-26T14:28:23.207
91842
2022-10-26T14:28:23.207
2376
91820
answer