0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

ここのえAdvent Calendar 2023

Day 12

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

Last updated at Posted at 2023-12-11

この記事は ここのえ 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 --initVue を選択した時の特有の問題 だと思われます。つい数日前Nodeのバックエンド向けに eslint --init した時はこの問題に引っ掛かりませんでした。

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

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

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?