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でサーバーを起動します。
エラーがあればブラウザやコンソールに表示してくれます。

vite-plugin-checkerでエラーがブラウザに表示されている状態