Vue 團隊成員又又又搞了個 "新玩具"!
說到前端代碼檢查,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





























