DEV Community

Cover image for Oxlint x Prettier: The Modern Approach To Starting Your JavaScript Project
Damien Chazoule
Damien Chazoule

Posted on

Oxlint x Prettier: The Modern Approach To Starting Your JavaScript Project

#javascript #eslint #prettier

The JavaScript ecosystem evolves rapidly, and with it, development tools. While ESLint has long dominated the linting landscape, a revolutionary new alternative is emerging: The JavaScript Oxidation Compiler, better known by the acronym "OXC" (or "Oxlint").

It's very easy to initialize a new JavaScript project; all you need is a code editor, a runtime environment, a terminal, and you're good to go!

Similarly, it's just as easy to ruin a Web project by making the code unreadable, unmaintainable, and thus generating technical debt...

Indeed, since JavaScript is a weakly typed language* (*types are determined late at runtime), anything goes:

  • Omitting semicolons at the end of lines;
  • Using single and double quotes in the same code block;
  • Declaring variables without using them;
  • Lines of code that are too long...

This flexibility of the language is both a strength and a weakness, which must be addressed by defining best practices before starting development. Thus, properly structured code will promote collaborative work and project scalability.

To achieve this, two essential tools will bring rigor to your Web project: the linter and the formatter.

Definitions:

Linter: Code analysis tool that detects syntax problems.

Formatter: Tool that formats code to make it readable.

NB: I emphasize that these are two distinct tools. While the linter can format certain parts of the code, this is not its role. This task is reserved for the formatter.

The JavaScript Oxidation Compiler ⚓

OXC is part of the VoidZero ecosystem, founded by Evan You (creator of VueJS) in September 2024. The VoidZero team is methodically rebuilding the JavaScript toolchain from the ground up, focusing on performance, compatibility, and developer experience.

OXC is 50 to 100 times faster than ESLint depending on the number of rules and CPU cores used. It finishes in less than a second for most codebases with a few hundred files, and finishes in a few seconds for larger projects.

OXC is a linter powered by Rust for JavaScript and TypeScript designed to be fast and simple to adopt. Since its first announcement in December 2023, the project has undergone significant improvements and now delivers its first stable version.

Starting Your JavaScript Project

To illustrate how each tool works, I propose creating a new JavaScript project (without framework) using ViteJS.

npm create vite@latest my-awesome-project -- --template vanilla-ts
Enter fullscreen mode Exit fullscreen mode

Like a cooking recipe, let's install the initial dependencies provided with ViteJS, then add the new libraries: Oxlint and Oxfmt!

npm install --save-dev oxlint oxfmt
Enter fullscreen mode Exit fullscreen mode

Once the linter and formatter dependencies are properly installed, you still need to create their respective configuration files: .oxlintrc.json and .oxfmtrc.json (.jsonc format is also supported).

Linter Configuration

Let's start by configuring the linter to use it in our new project.

Here's an initial version of the .oxlintrc.json file:

{
  "env": {
    "browser": true,
    "node": true
  },
  "ignorePatterns": ["dist/**", "node_modules/**", "*.config.js"],
  "rules": {
    "no-console": "warn",
    "no-unused-vars": [
      "warn",
      {
        "argsIgnorePattern": "^_",
        "varsIgnorePattern": "^_"
      }
    ]
  }
}
Enter fullscreen mode Exit fullscreen mode

This first configuration is sufficient to run Oxlint (a.k.a "OXC") from a new terminal to check the syntax of JavaScript files: npx oxlint [file|dir]

I recommend adding this execution as a script in your package.json: npm run lint

{
  "name": "my-awesome-project",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview",
    "lint": "oxlint src"
  },
  "devDependencies": {
    "oxfmt": "^0.16.0",
    "oxlint": "^1.31.0",
    "vite": "^7.2.5"
  }
}
Enter fullscreen mode Exit fullscreen mode

By adding a console.log() statement to a .ts file in your project, you should get the following result after invoking the linter.

  ⚠ eslint(no-console): Unexpected console statement.
   ╭─[src/counter.ts:5:5]
 4 │     counter = count;
 5 │     console.log(`count is ${counter}`);
   ·     ───────────
 6 │     element.innerHTML = `count is ${counter}`;
   ╰────
  help: Delete this console statement.

Found 1 warning and 0 errors.
Enter fullscreen mode Exit fullscreen mode

NB: OXC has a default rule configuration. Some come from ESLint, others for managing TypeScript, and still others are exclusive to OXC. To learn more: npx oxlint --rules.

Prettier Configuration

Now, let's configure the formatter by editing the .oxfmtrc.json file:

{
  "arrowParens": "avoid",
  "bracketSameLine": true,
  "printWidth": 120,
  "singleAttributePerLine": true,
  "singleQuote": true,
  "trailingComma": "none"
}
Enter fullscreen mode Exit fullscreen mode

NB: Oxfmt supports Prettier's default configuration, so you can easily switch between them. In the file above, I only redefine the parameters I want for my project.

Just like "Oxlint", you now just need to run "Oxfmt" (npx oxfmt [file|dir]) to format JavaScript/TypeScript files.

It's better to save a new script in your package.json: npm run format

{
  "name": "my-awesome-project",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview",
    "lint": "oxlint src",
    "format": "oxfmt src"
  },
  "devDependencies": {
    "oxfmt": "^0.16.0",
    "oxlint": "^1.31.0",
    "vite": "^7.2.5"
  }
}
Enter fullscreen mode Exit fullscreen mode

Oxlint x Prettier: The Modern Approach

Unlike ESLint which requires complex plugins to integrate Prettier, OXC adopts a simpler and more modern approach. The linter designed to detect erroneous or unnecessary code without requiring default configurations.

The idea is to let OXC focus on what it does best: ultra-fast static code analysis, while Prettier exclusively handles formatting. It can be interesting to run both tools in parallel for complete verification.

Let's add a script that combines both tools:

{
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview",
    "lint": "oxlint src",
    "lint:format": "oxlint src && oxfmt --check src",
    "format": "oxfmt src"
  }
}
Enter fullscreen mode Exit fullscreen mode

No more need to manage conflicts between ESLint and Prettier rules. Each tool has its well-defined responsibility.

NB: If you want to keep Prettier, since version 3.6, it's possible to go further with this new approach by using the official @prettier/plugin-oxc plugin. This plugin allows Prettier to directly use OXC's Rust parser, thus improving its execution speed.

Conclusion

The "Oxlint" + "Oxfmt" combination represents the natural evolution of JavaScript/TypeScript code quality tools. By clearly separating responsibilities and focusing on performance, this approach offers a superior developer experience while maintaining the rigor necessary for a professional project.

To go further, I invite you to install the OXC extension (and enable the experimental features: oxc.fmt.experimental). This way, you'll benefit from additional features such as syntax highlighting when linting rules are not respected, or automatic code formatting when saving the file.

Enjoy 👍

Top comments (0)