📎

VSCode の ESLint 拡張が Svelte を認識するようにする

2021/09/21に公開2件

検索しても検索しても前例があまりないので、書いておく。

結論から言うと

VSCode の設定検索で eslint.valitate と eslint.probe を検索して、それに svelte を書き足せば終わりだと思う。以下のような。

{
    "eslint.probe": [
        ...,
        "svelte"
    ],
    "eslint.validate": [
        "svelte"
    ]
}

よくわからなかったら、プロジェクトルートに .vscode/ を作って、その下に settings.json(つまり /.vscode/settings.json)にこれを書き足せば多分動く。

ESLint は設定ファイルの種類が馬鹿みたいに多いことで有名な Linter である。以下すべてが認識対象である。

ある意味、バベル以上にバベルの塔めいたものである……。あ、今回は .cjs^[1]だった。

で、最近 Svelte に触れ始めたので Vue でいう Nuxt.js 相当の Svelte Kit(先代・Sapper)の楽ちんプロジェクト生成で色々やっていた。開発を進めれば lint しよう! というのが心情であるので、自然に ESLint の設定を眺めることになる。

問題が見つかった。どうやらコマンドラインでは Svelte を認識するっぽいが、VSCode の拡張が Svelte を認識しない。いちいち yarn lint --fix するわけにもいかないし、色々と面倒くさいので保存した瞬間エディタが lint してほしい。けど認識しないわけだから……

問題探しの旅が始まった。

問題の切り分けである。ESLint がダメなのか拡張がダメなのか。とりあえず yarn lint してみたら、設定を反映したエラーが出たのでおそらく動いてはいる。拡張であるのだが、拡張の何が悪いんだ？というか設定自体もちょっといじるとエラー吐くんだけど……^[2]。

ところで、eslintrc 自体では以下の部分で svelte を認識させているらしい。

overrides: [{ files: ['*.svelte'], processor: 'svelte3/svelte3' }],

CI なりで lint する分にはこれでいいわけなんだけど。

拡張機能の設定を眺めた。eslint.probe と eslint.validate が最終的に候補になった。最初 probe のほうだけしかわかってなかったせいで、相当に時間を吸われた。

多分前者はファイル認識の段階（e.g. .cjs も .js も JS には変わりないので JS として抽出する）で、後者は実際に検証する言語の判定（万が一 .js の癖に Ruby で書いてあったらヤバそうだし）なんだろうけど、結局両者の違いはよくわからない。

冒頭の設定めいたものをそのまま適用させたら、なんと動くではないか。問題を認識してから解決まで丸々一時間取られたのに。この一時間は真っ昼間の労働時間から費やされたのではなく、深夜の暇つぶしタイムから費やされたものであるので、単純に睡眠時間が減る。クソったれ。

だからこんな与太話極まりない話でも、こんな長文を書くわけだ。ストレス発散だ。ともかく、誰かの役に立てば嬉しく思うが……役に立つかな?

脚注

{
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "svelte"
  ]
}

私の求めてたのが全部書いてありますね！ありがとうございます！