ViteにESLintとTypeScriptの型チェックを導入する

Viteプラグインのvite-plugin-checkerを使用するとbuild前に型チェックやエラーを検出してくれます。

ESLintとvite-plugin-checkerをインストール

npm i -D eslint vite-plugin-checker

vite.config.jsに設定追加

import { defineConfig } from 'vite';
import checker from 'vite-plugin-checker';

export default defineConfig({
	plugins: [
		checker({
			typescript: true,
			eslint: {
				lintCommand: 'eslint "./src/**/*.{ts,tsx}"',
				dev: {
					logLevel: ['error'],
				},
			},
		}),
	],
});

ESLintの設定ファイル（.eslintrc）の作成

npm init @eslint/config

設定はこれで完了。

あとはnpm run devでサーバーを起動します。
エラーがあればブラウザやコンソールに表示してくれます。