DEV Community

Uday Rana
Uday Rana

Posted on • Edited on

Using Oxlint for My Node.js Project

Today I added Oxlint to my Node.js project Codeshift.

Oxlint is a linter designed to catch erroneous or useless code without requiring any configurations by default. Although I already had Prettier and ESLint set up, Oxlint is much faster - the docs claim it's 50 - 100 times faster than ESLint - and it scales with the number of CPU cores.

Setting it up was simple.

  1. I installed it:

    npm i -D oxlint 
  2. To configure it to work together with ESLint, I installed eslint-plugin-oxlint.

    npm i -D eslint-plugin-oxlint 
  3. I added the ESLint plugin to eslint.config.mjs:

    // eslint.config.js import oxlint from 'eslint-plugin-oxlint'; export default [ ...// other plugins oxlint.configs['flat/recommended'], // oxlint should be the last one ]; 
  4. I updated my lint script in package.json to run Oxlint before ESLint:

    "scripts": { "lint": "oxlint && eslint" } 
  5. I added it to my pre-commit hook using lint-staged in package.json:

    "lint-staged": { "**/*.": [ "oxlint", "prettier --write --ignore-unknown", "eslint" ] }, 
  6. I added it to my CI workflow:

    jobs: build: steps: - run: npx -y oxlint@0.10.3 --deny-warnings 
  7. I added the Oxc VSCode extension to my project's workspace extension recommendations:

    // .vscode/extensions.json { "recommendations": [ "dbaeumer.vscode-eslint", "streetsidesoftware.code-spell-checker", "esbenp.prettier-vscode", "oxc.oxc-vscode" ] } 

While I was doing this, I also added a script to run Prettier in package.json, which I didn't realize was missing.

```json "scripts": { "format": "prettier --write ." } ``` 
Enter fullscreen mode Exit fullscreen mode

I updated our contributing docs to mention running the lint and format scripts before committing. I also added VSCode workspace editor settings to match Prettier's default settings.

``` // .vscode/settings.json { "editor.codeActionsOnSave": { "source.fixAll": "always", "source.organizeImports": "always" }, "editor.defaultFormatter": "esbenp.prettier-vscode", "editor.detectIndentation": false, "editor.formatOnSave": true, "editor.insertSpaces": true, "editor.tabSize": 2, "files.eol": "\n", "files.insertFinalNewline": true, "cSpell.words": ["codeshift", "openai", "oxlint", "smol"] } ``` 
Enter fullscreen mode Exit fullscreen mode

I tested out my changes and Oxlint ran fine, and found nothing wrong with my code. Although for some reason, when I pushed my code, the CI job failed because Prettier didn't run on commit. I'll have to look into this further.

Failed CI Job

UPDATE: There was a typo in the lint-staged glob pattern.

lint-staged fix diff

It was interesting setting this stuff up. I learned that I've been setting up lint-staged wrong in my projects and was running Prettier and ESLint concurrently, which would lead to race conditions.

Task concurrency section of lint-staged readme

I also deleted my .prettierignore because Prettier follows the rules in .gitignore and I realized it was redundant.

Oxc, Oxlint's parent project, also has a formatter, but I chose not to use it because it's still a prototype and doesn't have docs.

Oxc Formatter description

That's it for this post. Thanks for reading!

Top comments (0)