Vue + Typescript環境でeslint --initで生成されたコンフィグが動かない時

この記事は ここのえ Advent Calendar 2023 Day 12 の記事です。

要約

• eslint --init に設定を全部任せるのはやめておいたほうが良い
• ネットの知見を参考にして自分で書いた方がいい

eslint --initで生成されたコンフィグが動かない

まさにこのAdvent Calendarを書いていた時の事だったのですが、どうも eslint --init した時にVue向けに設定を選択していくと、エラーになってしまいました。

原因の究明と、解決策について示します。

再現までの手順

Vue + Vite + Typescript + ESLint の環境を整えます。
yarnを使います。

ESLintのバージョンは v8.53.0 です。

# Vite + Vue + Typescript
$ yarn create vite
✔ Project name: … eslint-test
✔ Select a framework: › Vue
✔ Select a variant: › TypeScript

$ cd eslint-test
$ yarn
$ yarn dev     # Viteの起動確認

# ESLint
$ yarn add -D eslint
$ yarn eslint --init

? How would you like to use ESLint? …
▸ To check syntax, find problems, and enforce code style

? What type of modules does your project use? …
▸ JavaScript modules (import/export)

? Which framework does your project use? …
▸ Vue.js

? Does your project use TypeScript? 
‣ Yes

? Where does your code run? …  (Press <space> to select, <a> to toggle all, <i> to invert selection)
✔ Browser

? How would you like to define a style for your project? …
▸ Use a popular style guide

? Which style guide do you want to follow? …
▸ Standard: https://github.com/standard/eslint-config-standard-with-typescript

? What format do you want your config file to be in? …
▸ JavaScript

? Would you like to install them now? 
‣ Yes

? Which package manager do you want to use? …
▸ yarn

eslintを走らせると、こんなエラーが出ます。

Error: Error while loading rule '@typescript-eslint/dot-notation': You have used a rule which requires parserServices to be generated. You must therefore provide a value for the "parserOptions.project" property for @typescript-eslint/parser.

言われた通り、parserOptions.project を追加して再度ESLintを走らせます。

.eslintrc.cjs

"parserOptions": {
  ...
  project: ['./tsconfig.json']
},

Error: Error while loading rule '@typescript-eslint/dot- ...

何の成果も得られませんでした。どうも原因は他の所にありそうです。

調査

試しにこんなスクリプトを作って、ESLintを走らせてみます。

src/test.ts

const str: string = "test string"
console.log(str)

/home/username/eslint-test/src/test.ts
  1:10  error  Parsing error: Unexpected token :

✖ 1 problem (1 error, 0 warnings)

もうめちゃくちゃです。Typescriptの構文すら理解できていません。
どうやらParserがまともに動いてなさそうです。

解決法

実はよく見てみると、parserがそもそも指定されていません……
@typescript-eslint/parserを追加すると解決します。

.eslintrc.cjs

...

"parserOptions": {
  "ecmaVersion": "latest",
  "sourceType": "module",
  parser: "@typescript-eslint/parser"
},

...

まとめ

この問題について、確実に言い切れはしませんが eslint --init で Vue を選択した時の特有の問題 だと思われます。つい数日前Nodeのバックエンド向けに eslint --init した時はこの問題に引っ掛かりませんでした。

普段はちゃんとESLintの設定をしたいので eslint --init は使っておらず、気が付きませんでした。記事書く用のテスト環境だし適当でいいや、と思ったら見事にやられてしまいましたね…

落ちてくるのも plugin:vue/vue3-essential なので、ちゃんと環境を整えるのなら plugin:vue/vue3-recommended の方がいいと思います。横着はしないほうがいいですね。