【React + Vite】開発時のターミナル表示を消す方法

コードを一行追加するだけです

React + Vite開発時、コード変更の保存をするたびにターミナルに表示が出ます。

コードの変更箇所や時刻等の表示です。

これらは重要な情報ですが、もし表示させたくない場合は次のコードをvite.config.jsに追加しましょう。

logLevel: "silent"

vite.config.jsファイル全体としては次のようになります。

// vite.config.js

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vite.dev/config/
export default defineConfig({
    plugins: [react()],
    logLevel: "silent",          // 追加
})

なぜ消す必要があるのか？

ターミナルの表示をわざわざオフにする場面があるのかと思う人がいると思います。

実は私は、教材の動画撮影をしているときにこのコードを使っています。

動画撮影が複数日にまたがったり、休憩を取ったりしたとき、撮影した動画上でターミナルの時刻が大きく飛んでしまうからです。

マイナーな使い道ですが、ターミナルの表示は他にも様々なカスタマイズ可能なので、興味のある人は調べてみましょう。

https://monotein.com/present-for-readers