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

環境
設定手順
1. vite-plugin-checkerをインストール
2. vite.config.jsに設定追加
Vue学習におすすめの書籍

環境

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

設定手順

masayan

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

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

npm install -D vite-plugin-checker

vite-plugin-checker | Vite plugin that provide checks of TypeScript, ESLint, vue-tsc, and more.

Vite plugin that provide checks of TypeScript, ESLint, vue-tsc, and more.

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が実行される