Zenn
Open5

Vite + Svelte のプロジェクトに ESLint を導入

ESLint
Svelte
Vite
aonoaono

Svelte で SPA を作りたいので、SvelteKit ではなく Vite を使ってプロジェクトを作成

pnpm create vite@latest
.../1941697fda6-f51c                     |   +1 +
.../1941697fda6-f51c                     | Progress: resolved 1, reused 1, downloaded 0, added 1, done
✔ Project name: … vite-project
✔ Select a framework: › Svelte
✔ Select a variant: › TypeScript

Scaffolding project in /Users/tkhs/Desktop/vite-project...

Done. Now run:

  cd vite-project
  pnpm install
  pnpm run dev

参考
https://svelte.dev/docs/svelte/getting-started

aonoaono

Svelte 用の ESLint プラグイン
https://sveltejs.github.io/eslint-plugin-svelte/

こちらの User Guide を参考に ESLint のインストール

pnpm install --save-dev eslint eslint-plugin-svelte svelte
 WARN  GET https://registry.npmjs.org/eslint-plugin-svelte error (EHOSTUNREACH). Will retry in 10 seconds. 2 retries left.
 WARN  GET https://registry.npmjs.org/eslint error (EHOSTUNREACH). Will retry in 10 seconds. 2 retries left.
 WARN  GET https://registry.npmjs.org/svelte error (ENOTFOUND). Will retry in 10 seconds. 2 retries left.
 WARN  GET https://registry.npmjs.org/@sveltejs%2Fvite-plugin-svelte error (ENOTFOUND). Will retry in 10 seconds. 2 retries left.
 WARN  GET https://registry.npmjs.org/@tsconfig%2Fsvelte error (ENOTFOUND). Will retry in 10 seconds. 2 retries left.
 WARN  GET https://registry.npmjs.org/svelte-check error (ENOTFOUND). Will retry in 10 seconds. 2 retries left.
 WARN  GET https://registry.npmjs.org/vite error (ENOTFOUND). Will retry in 10 seconds. 2 retries left.
 WARN  GET https://registry.npmjs.org/typescript error (ENOTFOUND). Will retry in 10 seconds. 2 retries left.
Packages: +140
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
Progress: resolved 182, reused 140, downloaded 0, added 140, done
node_modules/.pnpm/esbuild@0.24.2/node_modules/esbuild: Running postinstall script, done in 343ms

devDependencies:
+ @sveltejs/vite-plugin-svelte 5.0.3
+ @tsconfig/svelte 5.0.4
+ eslint 9.17.0
+ eslint-plugin-svelte 2.46.1
+ svelte 5.16.0
+ svelte-check 4.1.1
+ typescript 5.6.3 (5.7.2 is available)
+ vite 6.0.6

Done in 17s

設定ファイル（eslint.config.js）を作成

import eslintPluginSvelte from 'eslint-plugin-svelte';
export default [
  // add more generic rule sets here, such as:
  // js.configs.recommended,
  ...eslintPluginSvelte.configs.recommended,
  {
    rules: {
      // override/add rules settings here, such as:
      // 'svelte/rule-name': 'error'
    }
  }
];

リントを実行するとエラーに...

pnpx eslint src

Oops! Something went wrong! :(

ESLint: 9.17.0

TypeError: eslintPluginSvelte.configs.recommended is not iterable
    at file:///Users/tkhs/Desktop/vite-project/eslint.config.js?mtime=1735546220903:5:33
    at ModuleJob.run (node:internal/modules/esm/module_job:222:25)
    at async ModuleLoader.import (node:internal/modules/esm/loader:316:24)
    at async loadConfigFile (/Users/tkhs/Library/Caches/pnpm/dlx/jveffphywx35arzlbb5lymtzpa/19412a5df1b-9988/node_modules/.pnpm/eslint@9.17.0/node_modules/eslint/lib/config/config-loader.js:202:21)
    at async ConfigLoader.calculateConfigArray (/Users/tkhs/Library/Caches/pnpm/dlx/jveffphywx35arzlbb5lymtzpa/19412a5df1b-9988/node_modules/.pnpm/eslint@9.17.0/node_modules/eslint/lib/config/config-loader.js:512:32)
    at async #calculateConfigArray (/Users/tkhs/Library/Caches/pnpm/dlx/jveffphywx35arzlbb5lymtzpa/19412a5df1b-9988/node_modules/.pnpm/eslint@9.17.0/node_modules/eslint/lib/config/config-loader.js:646:29)
    at async entryFilter (/Users/tkhs/Library/Caches/pnpm/dlx/jveffphywx35arzlbb5lymtzpa/19412a5df1b-9988/node_modules/.pnpm/eslint@9.17.0/node_modules/eslint/lib/eslint/eslint-helpers.js:281:33)
    at async NodeHfs.<anonymous> (file:///Users/tkhs/Library/Caches/pnpm/dlx/jveffphywx35arzlbb5lymtzpa/19412a5df1b-9988/node_modules/.pnpm/@humanfs+core@0.19.1/node_modules/@humanfs/core/src/hfs.js:574:24)
    at async NodeHfs.walk (file:///Users/tkhs/Library/Caches/pnpm/dlx/jveffphywx35arzlbb5lymtzpa/19412a5df1b-9988/node_modules/.pnpm/@humanfs+core@0.19.1/node_modules/@humanfs/core/src/hfs.js:614:3)
    at async globSearch (/Users/tkhs/Library/Caches/pnpm/dlx/jveffphywx35arzlbb5lymtzpa/19412a5df1b-9988/node_modules/.pnpm/eslint@9.17.0/node_modules/eslint/lib/eslint/eslint-helpers.js:323:26)
aonoaono

動作環境によって設定ファイルの書き方を変える必要がある

import eslintPluginSvelte from 'eslint-plugin-svelte';
export default [
  // add more generic rule sets here, such as:
  // js.configs.recommended,
  ...eslintPluginSvelte.configs['flat/recommended'],
  {
    rules: {
      // override/add rules settings here, such as:
      // 'svelte/rule-name': 'error'
    }
  }
];

詳細は GitHub を参照

再度実行するとエラー解消したが、うまく動いてない模様
2:12 error Parsing error: Unexpected token :

該当ファイル

<script lang="ts">
  let count: number = $state(0)
  const increment = () => {
    count += 1
  }
</script>

<button onclick={increment}>
  count is {count}
</button>
aonoaono

インテグレーションコマンドを使った方が簡単そう
https://svelte.jp/docs/kit/integrations

設定ファイル（eslint.config.js）を削除してコマンド実行

pnpx sv add eslint
┌  Welcome to the Svelte CLI! (v0.6.10)
│
◇  Which package manager do you want to install dependencies with?
│  pnpm
│
◆  Successfully setup add-ons
│
◆  Successfully installed dependencies
│
└  You're all set!

再度実行すると、2:12 error Parsing error: Unexpected token : が表示されなくなった

リントできているか確認のため不要なコードを追加

  let variable = 'test'

再度実行すると、不要な部分を検出できている！

error  'variable' is assigned a value but never used  @typescript-eslint/no-unused-vars
aonoaono

VSCode上でコーディング時に表示させたい場合は、.vscode/settings.json に以下を追加

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

該当箇所に赤波線が！

作成者以外のコメントは許可されていません