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

# はじめに

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

https://github.com/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プロジェクトを作成します。

```bash
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つのパッケージをインストールする必要があります。

```json: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で設定されています。

```js: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`は次のように設定されています。

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

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

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

```bash
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`は不要になるので削除します。

```bash
┌  @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
```

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

```diff_json: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つになりました。🎉

```json: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

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

```js:eslint.config.js
import antfu from '@antfu/eslint-config';

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

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

https://eslint-config.antfu.me/configs

### Prettier

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

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

https://antfu.me/posts/why-not-prettier

# さいごに

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

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

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

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

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