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

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

背景

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

CLIツール（sv）

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

prettierとは

Prettierは独自の考えに基づいたコードフォーマッターです。

使用方法

npx sv add prettier

導入されるもの

• package.json内のスクリプト
• .prettierignoreと.prettierrcファイル
• eslintパッケージを使用している場合は、eslintの設定が更新されます

解説

Prettierは、コードの見た目を一貫性のある美しい形式に整えるためのツールです。「opinionated（独自の考えに基づいた）」とは、Prettierが独自のフォーマットルールを持っており、多くの設定オプションを提供する代わりに、決められた方法でコードを整形することを意味します。

npx sv add prettierコマンドを実行すると、Svelteプロジェクトに以下のものが追加されます：

1. package.jsonにフォーマット関連のスクリプトが追加されます（例：npm run formatなど）
2. プロジェクトルートに.prettierignore（Prettierが無視すべきファイルの指定）と.prettierrc（Prettierの設定ファイル）が作成されます
3. すでにESLintを使用している場合は、ESLintとPrettierが競合しないように設定が自動的に更新されます

これにより、コードの書式を簡単に統一でき、チーム開発での見た目の一貫性を保ちやすくなります。

1. インストール後のコマンド実行

Prettierをプロジェクトに追加した後、以下のコマンドでコードをフォーマットできます：

# package.jsonに追加されたスクリプトを使用する場合
npm run format

# または直接npxで実行する場合
npx prettier --write .

2. 特定のファイルのフォーマット

# 特定のファイルをフォーマット
npx prettier --write src/routes/index.svelte

# 特定のディレクトリ内のすべてのSvelteファイルをフォーマット
npx prettier --write "src/**/*.svelte"

3. フォーマットのチェックのみ（変更なし）

# コードがPrettierのルールに従っているかチェックするだけ（変更はしない）
npx prettier --check .

4. .prettierrcの設定例

.prettierrcファイルでは、以下のようにPrettierの動作をカスタマイズできます：

{
  "semi": false,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "none",
  "printWidth": 100,
  "plugins": ["prettier-plugin-svelte"],
  "pluginSearchDirs": ["."],
  "overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }]
}

この設定では：

• セミコロンを省略
• シングルクォートを使用
• タブ幅を2スペースに設定
• 末尾のカンマを省略
• 1行の最大文字数を100に設定
• Svelte用のプラグインを使用

5. CIでの活用例

継続的インテグレーション（CI）のworkflowファイル例：

jobs:
  format:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          node-version: '18'
      - run: npm ci
      - run: npm run format:check

これにより、プルリクエストごとにコードフォーマットが正しいかチェックできます。

6. エディタとの連携

多くのエディタでは、ファイル保存時に自動的にPrettierを実行するように設定できます。例えばVS Codeでは、settings.jsonに以下を追加：

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode"
}

Prettierを導入することで、チーム内でのコードスタイルの議論を減らし、一貫性のあるコードベースを維持できます。

おわりに 

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