Getting started with oxlint

Steps

Quick Setup

First, let's add Oxlint to your project and set up basic configuration:

Copy

1# Install Oxlint
2npm install -D oxlint
3
4# Or try it without installing
5npx oxlint@latest

Copy

1# .oxlintrc.json - Basic configuration
2{
3	"deny": ["correctness", "suspicious", "perf"],
4	"exclude": ["node_modules", "dist", "build"]
5}

Copy

1# package.json
2{
3	"scripts": {
4		"lint": "oxlint",
5		"lint:fix": "oxlint --fix"
6	}
7}

Advanced Configuration

Let's explore Oxlint's powerful features and rule categories that make it stand out:

Copy

1// .oxlintrc.json - Advanced configuration
2{
3	"deny": [
4		"correctness",  // Catches logical errors
5		"suspicious",   // Flags potentially problematic patterns
6		"perf"         // Identifies performance issues
7	],
8	"rules": {
9		"no-unused-vars": "error",
10		"no-debugger": "warn",
11		"react-hooks/exhaustive-deps": "error",
12		"@typescript-eslint/no-explicit-any": "error"
13	}
14}

Real-World Examples: Common Issues Oxlint Catches

Here are three critical issues that Oxlint helps prevent in real-world applications:

Copy

1// 1. Memory Leaks in React Components
2function WebSocketComponent() {
3	const [data, setData] = useState(null);
4
5	// ❌ Bad: Memory leak - no cleanup
6	useEffect(() => {
7		const ws = new WebSocket('ws://api.example.com');
8		ws.onmessage = (event) => setData(JSON.parse(event.data));
9	}, []);
10
11	// ✅ Good: Proper cleanup
12	useEffect(() => {
13		const ws = new WebSocket('ws://api.example.com');
14		ws.onmessage = (event) => setData(JSON.parse(event.data));
15		return () => ws.close();
16	}, []);
17
18	return <div>{JSON.stringify(data)}</div>;
19}
20
21// 2. Unhandled Promise Rejections
22// ❌ Bad: Silent failure
23async function fetchUser(id) {
24	try {
25		const response = await fetch(`/api/users/${id}`);
26		return response.json();
27	} catch {
28		// Empty catch block - Oxlint catches this!
29	}
30}
31
32// ✅ Good: Proper error handling
33async function fetchUser(id) {
34	try {
35		const response = await fetch(`/api/users/${id}`);
36		if (!response.ok) {
37			throw new Error(`HTTP error! status: ${response.status}`);
38		}
39		return response.json();
40	} catch (error) {
41		console.error('Failed to fetch user:', error);
42		throw error;
43	}
44}
45
46// 3. Performance Anti-patterns
47// ❌ Bad: New object on every render
48function UserProfile({ user }) {
49	const styles = { margin: '1rem' }; // Oxlint warns about this
50	return <div style={styles}>{user.name}</div>;
51}
52
53// ✅ Good: Memoized object
54const profileStyles = { margin: '1rem' };
55function UserProfile({ user }) {
56	return <div style={profileStyles}>{user.name}</div>;
57}

Integrating with CI/CD and ESLint

Here's how to set up Oxlint in your CI pipeline and use it alongside ESLint:

Copy

1# GitHub Actions workflow
2name: Code Quality
3on: [push, pull_request]
4
5jobs:
6	lint:
7		runs-on: ubuntu-latest
8		steps:
9			- uses: actions/checkout@v4
10			- run: npx --yes oxlint@latest --deny-warnings

Copy

1# Install ESLint plugin for Oxlint
2npm install -D eslint-plugin-oxlint

Copy

1// ESLint config with Oxlint integration
2{
3	"plugins": ["oxlint"],
4	"extends": ["plugin:oxlint/recommended"],
5	"rules": {
6		// ESLint-specific rules here
7	}
8}
9
10// package.json - Run both linters
11{
12	"scripts": {
13		"lint": "oxlint && eslint .",
14		"lint:fix": "oxlint --fix && eslint . --fix"
15	}
16}