說到前端代碼檢查，ESLint 一直是"標配"。

它生態龐大、規則豐富，但項目一大，npm run lint 動輒十幾秒，終端刷屏式警告看得人頭大。

久而久之，"跑 lint = 咖啡時間"成了常態。

新玩具登場——oxlint-inspector

最近，Vue 團隊成員推出了一款可視化小工具 oxlint-inspector。

把 Rust 編寫的高速 linter oxlint 的冷冰冰 JSON 日志，變成了瀏覽器里"點點就能修"的高顏值面板。

堪稱"給 oxlint 裝了可視化引擎"，也是 Vue 團隊送給前端圈的又一"效率玩具"。

oxlint-inspector 的優勢

• 極速可視化：基于 oxlint 的 Rust 內核 + 增量掃描，大型項目也能"秒出"結果，面板瞬時渲染。
• 與 Vite DevTools 無縫集成：啟動 npm run dev 后，F12 里直接多出一個「Oxlint」標簽，邊看頁面邊修代碼，無需切終端。
• 搜索 + 高亮一步到位：支持 glob 模式搜索文件，點擊問題立即高亮源代碼，還能一鍵打開 VSCode 并定位到行號。
• 對現有工作流零入侵：只生成一個 .oxlint/oxlint.json 日志文件，不影響任何 ESLint/Prettier 配置，想退就退。
• 高顏值 + 可分享：面板采用 Vue3 + CSS 變量主題，截圖、錄屏直接扔 PR，代碼債務一目了然，"甩鍋"也能甩得優雅。

oxlint-inspector 快速上手

• 安裝 oxlint（Rust 二進制，飛快）：

npm i -g oxlint@latest

• 生成日志：

npx oxlint --reporter json --output-path .oxlint/oxlint.json

• 裝插件：

npm i -D vite-plugin-devtools-oxlint

• 配置 vite.config.ts：

import { defineConfig } from 'vite'
 import { DevTools } from '@vitejs/devtools'
 import { DevToolsOxlint } from 'vite-plugin-devtools-oxlint'

 export default defineConfig({
   plugins: [DevTools(), DevToolsOxlint()],
 })

• 跑起來：

npm run dev

打開瀏覽器 → F12 → 點「Oxlint」標簽，即可開始"指哪修哪"。

寫在最后

從響應式語法糖、Vite 的極速構建，再到如今的 oxlint-inspector，Vue 核心成員們仿佛開啟了"無限造輪子"模式：性能要更快、開發體驗要更爽、顏值還要更高。

別人還在糾結 ESLint 規則怎么配，他們已經把 linter 做成了"看得見的藝術品"。

前端圈沒有最卷，只有更卷——但正是這種卷，才讓生態持續繁榮。讓我們拭目以待，下一個驚喜會是什么！

oxlint-inspector：https://github.com/yuyinws/oxlint-inspector