Svelte入門：リファレンス CLI -eslint-

今日は、SvelteKitのリファレンスについて解説して います。

背景

SvelteKitのリファレンスについて調査する機会がありましたので、その時の内容を備忘として記事に残しました。

CLIツール（sv）

コマンドラインインターフェース（CLI）であるsvは、Svelteアプリケーションの作成と保守のためのツールキットです。

ESLintとは

ESLintはコード内の問題を見つけて修正するツールです。

使用方法

npx sv add eslint

導入するもの

• eslint-plugin-svelteを含む関連パッケージのインストール
• eslint.config.jsファイルの作成
• .vscode/settings.jsonの更新
• TypeScriptやprettierを使用している場合は、それらと連携するよう設定

解説

ESLintをSvelteプロジェクトに追加すると、コードの品質管理が容易になります。このアドオンを使用することで、Svelteコンポーネント内のコードスタイルやエラーチェックが自動的に行われます。

主な利点：

1. コード内の潜在的なバグや問題を早期に発見
2. コードスタイルの一貫性を維持
3. ベストプラクティスの遵守を促進
4. VSCode等のエディターと連携し、リアルタイムで問題を表示

導入後はプロジェクトのルートディレクトリにeslint.config.jsが生成され、ここでESLintのルールやプラグインをカスタマイズできます。

TypeScriptやPrettierを使用している場合は、それらと連携するための設定も自動的に行われるため、追加の設定作業は最小限で済みます。

基本的な使用例

1. ESLintの追加

cd my-svelte-project
npx sv add eslint

実行結果:

SvelteKitプロジェクトにESLintを追加します...
以下のパッケージをインストールしています:
- eslint
- eslint-plugin-svelte
- @typescript-eslint/eslint-plugin（TypeScriptプロジェクトの場合）
- @typescript-eslint/parser（TypeScriptプロジェクトの場合）
...
eslint.config.jsを作成しました
.vscode/settings.jsonを更新しました
セットアップが完了しました！

2. コードの検証実行

ESLintをインストールした後は、以下のコマンドでコード検証が実行できます:

npx eslint .

または、package.jsonにスクリプトを追加して使用:

{
  "scripts": {
    "lint": "eslint .",
    "lint:fix": "eslint . --fix"
  }
}

そして:

npm run lint      # 問題を報告
npm run lint:fix  # 自動修正可能な問題を修正

3. eslint.config.jsのカスタマイズ例

// @ts-check
import js from '@eslint/js';
import globals from 'globals';
import eslintPluginSvelte from 'eslint-plugin-svelte';
import tseslint from 'typescript-eslint';

/** @type {import('eslint').Linter.FlatConfig[]} */
export default [
  js.configs.recommended,
  ...tseslint.configs.recommended,
  {
    files: ['**/*.js', '**/*.ts', '**/*.svelte'],
    languageOptions: {
      globals: {
        ...globals.browser,
        ...globals.node
      }
    },
    rules: {
      // カスタムルール
      'no-unused-vars': 'warn',
      'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'warn'
    }
  },
  {
    files: ['**/*.svelte'],
    plugins: {
      svelte: eslintPluginSvelte
    },
    processor: 'svelte/svelte',
    rules: {
      // Svelteコンポーネント特有のルール
      'svelte/valid-compile': 'error',
      'svelte/no-at-html-tags': 'warn'
    }
  }
];

4. VSCodeでの使用例

.vscode/settings.jsonが自動的に更新されるため、VSCodeでは以下の機能が使えるようになります:

• ファイル保存時に自動的に問題を修正
• エディタ内でリアルタイムに問題を表示

設定例:

{
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "eslint.validate": [
    "javascript",
    "typescript",
    "svelte"
  ]
}

5. 実際のエラー例と修正方法

エラー例:

<script>
  let count = 0;
  let unusedVariable = 'hello';  // 使用されていない変数
  
  function increment() {
    count = count + 1
    console.log(count)  // 本番環境では不要なコンソール出力
  }
</script>

<button on:click={increment}>
  Count: {count}
</button>

ESLint実行結果:

app.svelte:3:7 - 'unusedVariable' is defined but never used. (no-unused-vars)
app.svelte:7:5 - Missing semicolon. (semi)
app.svelte:8:5 - Unexpected console statement. (no-console)

この例では、未使用変数、セミコロンの欠落、不要なconsole.logなどがESLintによって検出されます。

ESLintアドオンは簡単なコマンド一つでSvelteプロジェクトに組み込むことができ、コード品質の向上に役立ちます。特にチーム開発では、コーディング規約の統一や早期のバグ検出に非常に有効です。

カスタマイズや拡張も容易で、プロジェクトの要件に合わせてルールを調整できるため、Svelteプロジェクトの開発ワークフローの重要な部分となります。

おわりに 

今日は、 SvelteKitのリファレンスについて解説しました。