@antfu/eslint-configを使ってSvelteのフォーマッター＆リンターを簡単に設定する方法

はじめに

SvelteやSvelteKitで開発を行う際に、ESLintやPrettierを使ってフォーマッターやリンターの環境を設定することが多いです。公式のプロジェクト作成コマンドでも自動的に設定されるため、これだけでも十分ですが、もっとシンプルな設定や、依存関係を減らしたい場合には、@antfu/eslint-configというパッケージが便利ですので、共有します。

動作確認環境

• SvelteKit: 2.5.17
• Svelte: 4.2.18
• @antfu/eslint-config: 2.21.1
• create-svelte: 6.3.2

SvelteKitのプロジェクトを作成する

まずは、通常通りにESLintとPrettierを選択してSvelteKitプロジェクトを作成します。

npm create svelte@latest my-app

create-svelte version 6.3.2

┌  Welcome to SvelteKit!
│
◇  Which Svelte app template?
│  Skeleton project
│
◇  Add type checking with TypeScript?
│  Yes, using TypeScript syntax
│
◇  Select additional options (use arrow keys/space bar)
│  Add ESLint for code linting, Add Prettier for code formatting
│
└  Your project is ready!

Install more integrations with:
  npx svelte-add

Next steps:
  1: cd my-app
  2: npm install
  3: git init && git add -A && git commit -m "Initial commit" (optional)
  4: npm run dev -- --open

To close the dev server, hit Ctrl-C

Stuck? Visit us at https://svelte.dev/chat

各種設定

パッケージ

作成時に追加されるパッケージは以下の通りです。8つのパッケージをインストールする必要があります。

package.json

"devDependencies": {
    "@types/eslint": "^8.56.7",
    "eslint": "^9.0.0",
    "eslint-config-prettier": "^9.1.0",
    "eslint-plugin-svelte": "^2.36.0",
    "globals": "^15.0.0",
    "prettier": "^3.1.1",
    "prettier-plugin-svelte": "^3.1.2",
    "typescript-eslint": "^8.0.0-alpha.20",
}

ESLint

ESLintはFlat Configで設定されています。

eslint.config.js

import js from '@eslint/js';
import ts from 'typescript-eslint';
import svelte from 'eslint-plugin-svelte';
import prettier from 'eslint-config-prettier';
import globals from 'globals';

/** @type {import('eslint').Linter.FlatConfig[]} */
export default [
	js.configs.recommended,
	...ts.configs.recommended,
	...svelte.configs['flat/recommended'],
	prettier,
	...svelte.configs['flat/prettier'],
	{
		languageOptions: {
			globals: {
				...globals.browser,
				...globals.node
			}
		}
	},
	{
		files: ['**/*.svelte'],
		languageOptions: {
			parserOptions: {
				parser: ts.parser
			}
		}
	},
	{
		ignores: ['build/', '.svelte-kit/', 'dist/']
	}
];

Prettier

.prettierrcは次のように設定されています。

.prettierrc

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

@antfu/eslint-configを使って設定する

警告:
eslint.config.jsが存在しているとコンフィグの移行ができないので、コマンドを実行する前に削除してください。

npx @antfu/eslint-config@latest

1. Select a frameworkでSvelteを選択します。
2. VS Codeを使っている場合は、Update .vscode/settings.json for better VS Code experience?をYesと答えておくと保存時に自動でフォーマットが走る設定ができます。
3. .prettierignoreと.prettierrcは不要になるので削除します。

┌  @antfu/eslint-config v2.21.1
│
◇  Select a framework:
│  Svelte
│
◇  Select a extra utils:
│  none
│
◇  Update .vscode/settings.json for better VS Code experience?
│  Yes
│
◇  Bumping @antfu/eslint-config to v2.21.1
│
◇  Added packages ─────────────────────────────╮
│                                              │
│  eslint-plugin-svelte, svelte-eslint-parser  │
│                                              │
├──────────────────────────────────────────────╯
│
◆  Changes wrote to package.json
│
◆  Created eslint.config.js
│
◇  You can now remove those files manually ─╮
│                                           │
│  .prettierignore, .prettierrc             │
│                                           │
├───────────────────────────────────────────╯
│
◆  Created .vscode/settings.json
│
◆  Setup completed
│
└  Now you can update the dependencies and run eslint . --fix

コマンドの更新も忘れないようにしてください。

package.json

"scripts": {
  "dev": "vite dev",
  "build": "vite build",
  "preview": "vite preview",
  "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
  "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+ "lint": "eslint .",
+ "format": "eslint . --fix"
},

パッケージ

必要なパッケージが8つから4つになりました。🎉

package.json

"devDependencies": {
  "@antfu/eslint-config": "^2.21.1",
  "eslint": "9.4.0",
  "eslint-plugin-svelte": "^2.39.3",
  "svelte-eslint-parser": "^0.37.0",
}

ESLint

非常にシンプルになりました。もちろん、必要に応じて設定をオーバーライドすることもできます。

eslint.config.js

import antfu from '@antfu/eslint-config';

export default antfu({
  svelte: true,
});

デフォルト設定は以下のリンクで確認できます。

Prettier

Prettierを使わずにESLintでフォーマットするので、Prettierは不要になりました。

なぜPrettierを使わないのかについては、作者のAnthony Fuさんのブログを読んでみてください。

さいごに

@antfu/eslint-configを利用してSvelteKitプロジェクトのフォーマッター＆リンター環境をよりシンプルに設定する方法について説明しました。

• 依存関係の削減
  従来の設定では8つのパッケージが必要でしたが、@antfu/eslint-configを使用することで4つに減りました。これにより、プロジェクトの軽量化とメンテナンスが簡単になります。

• シンプルな設定
  ESLintの設定が非常にシンプルになり、必要に応じて簡単にカスタマイズが可能です。

• VS Codeとの統合
  VS Codeの設定をすることで、保存時に自動でフォーマットが実行されます。

ぜひ、参考にしてみてください！