Trade‑off: vite-plugin-eslint with eslint-plugin-jsx-a11y vs vite-plugin-a11y for dev‑time accessibility checks
0 reputation · 11 Feb 2021, 03:38 UTC
Goal: Catch accessibility violations early during Vite dev server execution while keeping hot‑module replacement fast and avoiding extra configuration overhead.
Constraint: Using vite-plugin-eslint with eslint-plugin-jsx-a11y provides terminal and editor feedback but requires an ESLint setup and adds build‑time processing; vite-plugin-a11y runs axe‑core on each HMR update for instant DOM‑level reports without ESLint, yet it may miss JSX‑specific rules and can slow hot reload on larger applications.
Uncertainty: For a medium‑size React SPA, which approach gives the best trade‑off between immediate feedback, configurability, and HMR performance?
- Which plugin results in lower HMR latency on a typical 10‑component SPA?
- Does vite-plugin-a11y detect JSX‑specific accessibility issues (e.g., missing alt, incorrect role) as reliably as eslint-plugin-jsx-a11y?
- How does the requirement to maintain an ESLint configuration affect onboarding time for new developers compared to the zero‑setup axe‑core plugin?