💅 Biome's `noUnusedImports` Bug: Template Usage

Hey there, fellow developers! Have you ever run into a situation where your linter throws a false positive? Specifically, when using Biome.js, the noUnusedImports rule might incorrectly flag an import as unused when it's actually being used within a template. Let's dive into this issue, why it's happening, and what you can do about it.

The Problem: False Positives with noUnusedImports

Biome.js, a fast and modern linter and formatter for the web, is designed to help you write cleaner and more efficient code. One of its key features is the noUnusedImports rule, which is great for catching dead code and unnecessary imports that can bloat your project. But, as with any tool, there can be hiccups. The issue arises when an identifier (like a component or a variable) is used only within a template, particularly in frameworks like Svelte. The linter, in some cases, isn't correctly recognizing the usage within the template and flags the import as unused, even though it's essential for the page to work properly. For us, this is an annoying issue. It isn't a huge problem, but can certainly be a pain when trying to make sure all imports are actually used. Additionally, for variables declared with let, the linter can break the intended functionality, turning them into consts. The linter does its best to make sure there are no unused imports, which is great, but unfortunately, it can sometimes be wrong.

This behavior is more noticeable in languages and frameworks where the template is a separate part of the component. For example, in Svelte, the template is defined within the <script> tag. Biome's linter might not fully analyze the template and understand that an imported component or a destructured prop is being used there. This leads to the false-positive error. This can be super frustrating, especially when you're diligently trying to keep your codebase clean, only to be told that something is unused when it very much is! It's like the linter is saying, “Hey, you’re not using this,” when you're clearly using it within the visual structure of your page.

Impact on Different Frameworks

While this bug is most apparent in Svelte, it might also show up in other frameworks like Vue or Astro, though I haven't personally tested it in those environments. The core issue lies in how the linter interprets the usage of identifiers within template-based UI. So, if you're working with a framework that uses templates to define the structure of your components, be aware of this potential pitfall.

Understanding the Root Cause

To understand why this is happening, let's look at a snippet of Svelte code. The App component is imported but used in the template. The linter sees the import, doesn't immediately see it being used, and flags it as unused. The current version of Biome.js might not be able to precisely map import usages within the component's template section. This disconnect leads to the false-positive warning. As Biome.js continues to evolve, the team will hopefully improve the way it analyzes templates, but for now, we have this issue.

Example Svelte Code

Let's take a look at a simplified example to make things clear:

<script>
  import { App } from "./App.svelte";

  let { children } = $props();

  let count = $state(0)
</script>

<App />
{children}

<button>{count}</button>

In this example, the App component is imported, and it's used within the template, but the linter might still flag it. Similarly, if you are destructuring props or declaring variables with let, those could also be an issue.

Workarounds and Solutions

Okay, so what can you do about it? Here are some strategies for handling this false-positive error until a permanent fix is implemented in Biome.js:

Disable the Rule (Temporarily)

One approach is to disable the noUnusedImports rule in your Biome configuration file (usually biome.json). This will prevent the linter from flagging the imports as unused, but it also means you won't get any warnings about truly unused imports. The main issue with this method is that you could accidentally ignore unused imports, potentially leading to a less efficient and less clean codebase. You can disable the rule on a file level, by adding the following at the beginning of the file:

// biome-ignore lint/correctness/noUnusedImports: This import is used in the template.

Use Comments or Annotations

You can comment out the import, or add annotations to tell the linter that the import is, in fact, used. In other words, you have to find a way to make sure the linter knows that the import is in use. This method is the least practical, but it would work!

Update Biome.js

Make sure you're using the latest version of Biome.js. The development team is actively working on improving the linter's accuracy, and updates might include fixes for this issue. This is likely the only solution. So make sure you are up to date!

Conclusion

Dealing with false positives from a linter can be annoying, but it's important to remember that these tools are constantly evolving. They're designed to make our lives easier by helping us write cleaner and more maintainable code. The issue with Biome.js's noUnusedImports rule is a temporary setback, and the team is working on fixing it. Keep an eye on updates, and in the meantime, use the workarounds to keep your codebase clean and your development workflow smooth.

Final Thoughts

Linting can be a huge time saver, and they are usually a great addition to the developer experience. So, it is important to remember that these tools are constantly being updated to assist developers. While this bug does exist, it is important to update the libraries and use the workarounds to make sure you can stay productive! Happy coding!