Integrating Biome into a Vue Project: A Beginner's Experience

I recently introduced Biome, which has been a hot topic lately, into my Vue project.

It is a tool that replaces ESLint + Prettier, and since it is written in Rust, it is reportedly very fast. I decided to give it a try, thinking it might be easier than the ESLint + Prettier combination, which often leads to complex configurations.

What is Biome?

Biome is a linter and formatter written in Rust.

Previously, I had to install ESLint (to find code issues) and Prettier (to format code) separately, write individual configuration files for each, and so on. With Biome, you can do both with a single tool.

Furthermore, it is incredibly fast. According to the official documentation, it is 25 times faster.

Installing Biome

Installation was simple.

npm install -D @biomejs/biome
npx biome init

When you run biome init, a configuration file named biome.json is automatically created.

{
  "$schema": "https://biomejs.dev/schemas/2.4.7/schema.json",
  "vcs": {
    "enabled": true,
    "clientKind": "git",
    "useIgnoreFile": true
  },
  "organizeImports": {
    "enabled": true
  },
  "linter": {
    "enabled": true,
    "rules": {
      "recommended": true
    }
  },
  "formatter": {
    "enabled": true
  }
}

With just this, the basic setup is complete. It became much easier compared to when I used ESLint, where I had to write .eslintrc.js and .prettierrc, and then add plugins to prevent conflicts.

Adding npm scripts

I will add commands to package.json.

{
  "scripts": {
    "lint": "biome check src/",
    "lint:fix": "biome check --write src/",
    "format": "biome format --write src/"
  }
}

• npm run lint → Checks for issues
• npm run lint:fix → Automatically fixes what can be fixed
• npm run format → Runs formatting only

Running it... 26 warnings!?

I confidently ran lint, only to be surprised by 26 warnings.

✖ Found 26 warnings

I wondered, "Wait, were there that many issues?" When I checked the contents, most followed the same pattern:

src/App.vue:2:8 lint/correctness/noUnusedVariables
This variable is declared but never used

This is a warning saying, "This variable is declared but never used."

A Common Vue Issue

But wait, I am using that variable in the template...?

After looking into it, this is a known issue with Vue + Biome.

In Vue's <script setup> syntax, when you define a variable, it becomes automatically available in the template.

<script setup>
const message = 'Hello' // Defined here
</script>

<template>
  <p>{{ message }}</p> <!-- Used here -->
</template>

However, since Biome only looks at the JavaScript part, it incorrectly judges that "there is a variable named message, but it isn't used in the script."

How to handle this: Turn off the rules

The current best practice seems to be disabling the relevant rules.

{
  "linter": {
    "rules": {
      "recommended": true,
      "correctness": {
        "noUnusedVariables": "off",
        "noUnusedImports": "off"
      }
    }
  }
}

With this, the warnings are gone.

Ideally, I would like Vue-specific rules like eslint-plugin-vue, but Biome's support for framework-specific features seems to be still in development. I look forward to future updates.

Experiencing the Speed

After adjusting the rules and running lint again...

Checked 12 files in 42ms. No fixes applied.

42 milliseconds. It was instantaneous.

I remember it taking hundreds of milliseconds even for small projects with ESLint, so it is clearly faster in actual experience.

For those who have linting set to run every time you save a file, you will definitely feel the benefit of this speed.

How does it compare to ESLint + Prettier?

Pros

• Only one configuration file is needed.
• Only one package to install.
• Fast (at a level you can feel).
• Easy initial setup with biome init.

Cons

• Does not recognize Vue templates.
• Information is still scarce (limited Japanese articles).
• Sometimes requires rule adjustments when migrating.

Migrating from ESLint

Biome has migration commands.

npx biome migrate eslint
npx biome migrate prettier

It seems it reads existing ESLint/Prettier configurations and converts them to Biome settings. I didn't test this since it was a new project, but it looks like migrating existing projects should be easy.

Summary

I am generally satisfied with introducing Biome to my Vue project.

• Setup is easy.
• It is fast.
• Configuration files are simple.

Although there are compatibility issues with Vue, you can use it normally by turning off the problematic rules.

I will continue using it for a while, hoping for improved Vue support in the future. If you are tired of ESLint, I think it is worth a try.