91842


### 事象概要

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

[code]

    {
      "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"]
      }
    }
    
[/code]

## package.json

[code]

    {
      "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"
      }
    }
    
[/code]

↓

## 修正後の.eslintrc.json

[code]

    {
      "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"]
      }
    }
    
[/code]

## `npx eslint --ext=.vue,.ts .` の実行結果

[code]

    /hogehoge/src/App.vue
      3:3  warning  Require self-closing on Vue.js custom components (<router-view>)  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.
    
[/code]

## Sentenct.vue

[code]

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

## Test.vue

[code]

    <template>
      <div>Test</div>
    </template>
    <script setup lang="ts"></script>
    <style scoped></style>
    
[/code]


CC BY-SA 4.0
2022-10-25T15:44:18.477
91820
2023-09-03T12:33:40.240
2023-09-03T12:33:40.240
3060
43642
question
javascript vue.js eslint
ESLintでVueファイルのエラーを解消できない

[code]

    "parser": "@typescript-eslint/parser",
    
    
[/code]

を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`を包括しているのでこれらの指定は不要です。

つまり、

[code]

    ...
        "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"
        },
    
    ...
    
[/code]

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

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

[code]

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

ですね。

（なお、[当該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