viteでバンドル時にeslintを実行させるための設定

環境

• macOS Monterey 12.0.1
• VSCode
• node.js v18.6.0
• npm 8.13.2
• vue 3.2.25
• vite 3.0.7

設定手順

npm等で既にeslintとviteがインストールされているプロジェクトが存在する前提で進めますのでご注意ください

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

npm install -D vite-plugin-checker

vite.config.jsに設定追加

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import Path from 'path'
import { checker } from 'vite-plugin-checker' // 追加

export default defineConfig({
  plugins: [
    checker({ // 追加
      typescript: true,
      eslint: {
        lintCommand: 'eslint "./src/**/*.{ts, vue}"',
      },
    }),
    vue(),
  ],
  base: './',
  ...
})

あとは、npm run devすると以下のようにバンドル時にeslintが実行される

まとめ

いかがでしたでしょうか。本記事では、viteでバンドル時にeslintを実行させるための設定について紹介しています。ぜひ参考にしてみてください。