I Will Never Use Prettier or ESLint Again

Summary

Kyle from Web Dev Simplified presents Vite+ as a unified toolkit for common web-development tasks. Instead of configuring separate tools for linting, formatting, testing, bundling, package management, Git hooks, and CI, developers can use a single command-line interface and central configuration.

Features Demonstrated

• Project creation: vp create can scaffold applications, libraries, and monorepos. It offers framework templates, including React with TypeScript, and can generate projects inside an existing monorepo.
• Linting and formatting: Vite+ uses Oxlint and Oxfmt, Rust-based tools intended to provide familiar ESLint- and Prettier-like capabilities. Configuration is managed through vite.config, and linting can include TypeScript type checks.
• Checks and Git hooks: vp lint, vp format, and vp check run the relevant checks. A pre-commit hook can block commits when checks fail or automatically fix issues when run with the fix option.
• Editor support: The presenter demonstrates the VoidZero Vite+ VS Code extension pack, which can format code on save using the project’s settings.
• Testing and app development: vp test runs tests and supports watch mode and coverage. vp dev, vp build, and vp preview cover development and build workflows. The presenter says Vite+ uses Vitest for testing and Vite for bundling.
• Libraries and commands: vp pack packages library projects. vp run runs project scripts, while vp install and vp outdated provide a unified interface for package-management tasks using the project’s selected package manager. vpx is presented as an npx-style command for running tools.
• Runtime versions: vp env commands can inspect and pin Node.js and package-manager versions for a project, including selecting the current LTS version.
• CI: The presenter shows a simple CI setup that runs checks, tests, and a build.
• Migration: vp migrate can update an existing Vite project or translate ESLint and Prettier configuration into Vite+ settings. It aims to preserve existing lint rules, though larger or more unusual projects may require manual adjustments.

Migration Caveats and Analysis

Migration mostly worked for a small React project, though it generated a large configuration to preserve the existing lint rules. In a more complex Astro project, migration provided a useful starting point but produced warnings and an error involving an Astro lint plugin or rule. Some plugin support was unavailable or required further investigation.

The presenter also found formatting changes in JSON files and noted that Vite+ defaults may introduce rules a project did not previously use.

The video argues that centralized checks are especially useful for AI-generated code: formatting, linting, tests, and commit checks can help enforce project standards before code is committed or submitted for review. This is the presenter’s assessment, not a guarantee that every migration or configuration will work without changes.

Guides and Tutorials Mentioned

• A Vitest crash course is recommended for learning the testing workflow.
• The presenter recommends linked videos about writing good tests for both manually written and AI-generated code.
• Vite+ documentation is mentioned as a reference for installation and setup.

Main Speaker and Source

• Kyle, host of Web Dev Simplified.