この記事は ここのえ 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を走らせます。
"parserOptions": {
...
project: ['./tsconfig.json']
},
Error: Error while loading rule '@typescript-eslint/dot- ...
何の成果も得られませんでした。どうも原因は他の所にありそうです。
調査
試しにこんなスクリプトを作って、ESLintを走らせてみます。
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
を追加すると解決します。
...
"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
の方がいいと思います。横着はしないほうがいいですね。