Get Started with Oxlint in 5 Minutes: A Code Linting Tool 50x Faster Than ESLint (Practical Tutorial)

Have you ever experienced this: running eslint ./src and watching the file list scroll in the terminal for tens of seconds or even longer? The larger the project, the longer the wait, seriously slowing down development pace.

Today, I’ll introduce a tool that can completely change this experience — Oxlint. It’s not only more than 50x faster than ESLint, but also works out of the box with almost zero learning curve.

What is Code Linting?

Before diving into Oxlint, let’s understand what “Linting” is.

Why Do You Need a Linter?

Code linting tools help you find problems in your code:

// You might not spot these issues at a glance
const name = 'test';
function getName() {
  return nam; // Typo! Should be 'name'
}

if (x = 10) { // Should be === not =
  console.log('x is 10');
}

var unused = 'I am never used'; // Defined but never used

Code linting tools can:

• Find Errors: Typos, syntax issues, logic traps
• Unify Style: Keep team code style consistent
• Improve Quality: Avoid common code problems

What is ESLint?

ESLint is the most popular code linting tool in the JavaScript ecosystem, used by almost every frontend project. But its performance issues have long been criticized:

• Long linting times for large projects
• Plugin loading consumes significant time
• High memory usage

What is Oxlint?

Oxlint is part of the OXC project, written in Rust, specifically designed to replace ESLint. Its features include:

• Extreme Speed: 50-100x faster than ESLint
• Good Compatibility: Supports ESLint rules and configuration format
• Out of the Box: No complex configuration needed, recommended rules enabled by default
• Continuous Updates: Rapidly catching up to the ESLint ecosystem

Installing Oxlint

Installing Oxlint is very simple, with multiple options available.

Option 1: Global Installation

# Using npm
npm install -g oxlint

# Using yarn
yarn global add oxlint

# Using pnpm
pnpm add -g oxlint

After installation, you can use the oxlint command in any directory.

Option 2: Project Installation

# Install as a development dependency
npm install oxlint --save-dev

Then add a script in package.json:

{
  "scripts": {
    "lint": "oxlint ./src"
  }
}

Option 3: Use Directly Without Installation

# Run temporarily with npx
npx oxlint ./src

This option is suitable for quick trials or when you don’t want a global installation.

First Time Use

After installation, let’s try it out.

Linting a Single File

Suppose there’s a file src/main.js:

// src/main.js
const unusedVar = 'I am not used';

function greeting(name) {
  console.log('Hello, ' + nam); // Typo
  return 'Hello, ' + name;
}

greeting('World');

Run the check:

oxlint src/main.js

Output:

  ⚠ eslint(no-unused-vars): 'unusedVar' is defined but never used.
    ╭─[src/main.js:2:7]
  2 │   const unusedVar = 'I am not used';
    ·         ─────┬────
    ·              ╰── 'unusedVar' is defined here.
    ╰────────────────────────────────────

  ⚠ eslint(no-undef): 'nam' is not defined.
    ╭─[src/main.js:5:28]
  5 │     console.log('Hello, ' + nam);
    ·                            ─┬─
    ·                             ╰── 'nam' is not defined.
    ╰────────────────────────────────

  Finished in 3ms on 1 file with 0 errors and 2 warnings.

As you can see, Oxlint found two issues:

1. unusedVar is defined but never used
2. nam variable is not defined (should be name)

Linting the Entire Project

# Check all files in src directory
oxlint ./src

# Check multiple file types
oxlint "./src/**/*.{js,jsx,ts,tsx,vue}"

Output format:

  Finished in 12ms on 234 files with 0 errors and 5 warnings.

Did you notice? 12 milliseconds to check 234 files!

Auto-Fix Issues

Oxlint supports automatically fixing some issues:

# Auto-fix fixable issues
oxlint ./src --fix

Auto-fixable content includes:

• Removing unused variables
• Fixing simple code style issues
• Adjusting code formatting

Practical: Adding Oxlint to an Existing Project

Let’s walk through adding Oxlint to a project step by step.

Step 1: Create a Test Project

# Create project directory
mkdir my-project
cd my-project

# Initialize npm
npm init -y

# Create source directory
mkdir src

Create test file src/index.js:

// src/index.js
import React from 'react';

// Unused variables
const API_URL = 'https://api.example.com';
const unusedConfig = { debug: true };

// Function definition
function fetchData(url) {
  // Missing error handling
  return fetch(url).then(res => res.json());
}

// Using var instead of const/let
var data = null;

// Main function
async function main() {
  data = await fetchData(API_URL);
  console.log('Data loaded:', data);
}

main();

Step 2: Install Oxlint

npm install oxlint --save-dev

Step 3: Add Scripts to package.json

{
  "name": "my-project",
  "scripts": {
    "lint": "oxlint ./src",
    "lint:fix": "oxlint ./src --fix"
  },
  "devDependencies": {
    "oxlint": "^0.15.0"
  }
}

Step 4: Run First Check

npm run lint

Example output:

  ⚠ eslint(no-unused-vars): 'unusedConfig' is defined but never used.
    ╭─[src/index.js:8:7]
  8 │   const unusedConfig = { debug: true };
    ·         ───────┬──────
    ·                ╰── 'unusedConfig' is defined here.
    ╰───────────────────────────────────────

  ⚠ eslint(no-var): Unexpected var, use let or const instead.
    ╭─[src/index.js:17:3]
 17 │   var data = null;
    ·   ─────┬────
    ·        ╰── Use `let` or `const` instead of `var`.
    ╰───────────────────────────────────────

  Finished in 4ms on 1 file with 0 errors and 2 warnings.

Step 5: Understanding the Output

Oxlint’s output contains several key pieces of information:

1. Rule Name: Such as no-unused-vars, no-var
2. Problem Location: Filename, line number, column number
3. Problem Description: Clearly explains the issue
4. Statistics: Check duration, file count, error and warning counts

Step 6: Auto-Fix Issues

npm run lint:fix

After fixing, changes to src/index.js:

// src/index.js
import React from 'react';

// Unused variable removed
const API_URL = 'https://api.example.com';

// Function definition
function fetchData(url) {
  // Missing error handling
  return fetch(url).then(res => res.json());
}

// var changed to let
let data = null;

// Main function
async function main() {
  data = await fetchData(API_URL);
  console.log('Data loaded:', data);
}

main();

Configuration File Basics

Oxlint supports customizing rules through configuration files.

Creating a Configuration File

Create oxlint.json in the project root:

{
  "rules": {
    "no-unused-vars": "error",
    "no-console": "warn",
    "no-var": "error",
    "prefer-const": "warn"
  }
}

Rule Levels

Each rule can be set to three levels:

Level	Description
"off" or 0	Turn off rule
"warn" or 1	Warning, but won’t block CI
"error" or 2	Error, will return non-zero exit code

Common Rule Configuration

{
  "rules": {
    // Variable related
    "no-unused-vars": "error",
    "no-undef": "error",
    "prefer-const": "warn",

    // Code style
    "no-var": "error",
    "eqeqeq": ["error", "always"],
    "curly": ["warn", "multi-line"],

    // Best practices
    "no-console": "warn",
    "no-debugger": "error",
    "no-alert": "warn"
  }
}

Ignore Files

Create a .oxlintignore file to exclude directories that don’t need checking:

# .oxlintignore
node_modules/
dist/
build/
*.min.js
*.d.ts

VS Code Integration

Seeing code issues in real-time in the editor greatly improves development efficiency.

Installing the Extension

1. Open VS Code
2. Search for “oxlint” extension
3. Install the Oxlint extension

Configuring the Extension

Add configuration in .vscode/settings.json:

{
  "oxlint.enable": true,
  "oxlint.run": "onSave",
  "oxlint.configPath": "./oxlint.json"
}

Effects

After installing the extension, files are automatically checked on save:

// Squiggly lines shown directly in editor
const unused = 'I am never used';  // ~~~~~~ 'unused' is defined but never used

var oldStyle = 'use let/const';    // ~~~ Use `let` or `const` instead of `var`.

Hover over the squiggly lines to see detailed problem descriptions and fix suggestions.

FAQ

Can Oxlint Completely Replace ESLint?

Not yet completely, but it’s sufficient for most scenarios.

Oxlint’s advantages:

• Extremely fast, suitable for daily development
• Supports most common rules
• Simple configuration, works out of the box

Current limitations:

• Some advanced rules not yet implemented
• Plugin ecosystem not as rich as ESLint
• Limited support for framework-specific rules (like vue-eslint-plugin)

How to Migrate from ESLint?

Progressive migration strategy:

1. Run in Parallel: Keep both ESLint and Oxlint

   {
     "scripts": {
       "lint": "oxlint ./src && eslint ./src"
     }
   }

2. Gradual Switch: Use Oxlint for daily development first, keep ESLint in CI

3. Complete Migration: Remove ESLint when Oxlint meets all needs

Oxlint and ESLint Results Differ?

This is normal, reasons include:

• Rule implementation details may vary
• Different default rule sets enabled
• Some rules not yet implemented

Solution: Unify rules through configuration files.

What File Types Are Supported?

Oxlint supports:

• JavaScript (.js, .mjs, .cjs)
• TypeScript (.ts, .tsx, .mts, .cts)
• JSX (.jsx)
• Vue (.vue)
• Astro (.astro)
• Svelte (.svelte)

Performance Benchmark

Let’s look at real data.

Test Environment

• Project: A medium-sized frontend project
• File count: About 500 .ts/.tsx files
• Machine: MacBook Pro M1, 16GB RAM

Test Results

Tool	First Run Time	Incremental Run Time
ESLint	42 seconds	38 seconds
Oxlint	0.6 seconds	0.4 seconds

Oxlint is about 70x faster than ESLint!

This means:

• Git pre-commit hooks go from minutes to seconds
• CI pipelines significantly shortened
• Development feedback cycle notably reduced

Summary

This article covered Oxlint’s core usage:

Content	Description
Installation	npm install -g oxlint or npx oxlint
Lint Files	oxlint ./src
Auto-Fix	oxlint ./src --fix
Configuration File	oxlint.json defines rules
Editor Integration	Install VS Code Oxlint extension

Oxlint’s core value: Turning code linting from “waiting” to “instant”.

Next Steps

Want to learn more about Oxlint’s advanced configuration and complete rule list? Visit OXC Documentation - Oxlint Section

In the next article, we’ll learn about Oxfmt — making code formatting faster too!

---

💡 Related Reading:

• Previous: Frontend Tools Too Slow? Try OXC Written in Rust
• OXC Documentation