Examples

To illustrate Ultracite’s capabilities, here are a few practical examples of issues it catches and fixes. Each example shows code before (with a problem) and after Ultracite is applied. These examples demonstrate how Ultracite improves code automatically.

Automatic Code Formatting

Before (messy formatting)

function greet(name) { return 'Hello, '+ name + "!!" }

In this code, spacing and concatenation style are off. It’s also using string concatenation instead of template literals, and has double quotes mixed with single quotes.

After (formatted)

function greet(name) {
  return `Hello, ${name}!!`;
}

Ultracite’s formatter has:

• Broke the long line into multiple lines for readability.
• Converted the string concatenation into a template literal (this could be an automatic fix from a lint rule suggesting template strings for readability).
• Standardized quotes to backticks for the template (and would use single quotes consistently elsewhere if not a template).
• Added a semicolon at the end of the return statement.
• Ensured proper spacing around braces and parentheses.

The developer didn’t manually reformat the code – they just saved the file, and Ultracite handled the rest. The result is cleaner, more consistent code.

Ultracite will also warn that name is untyped and will suggest adding a type.

Enforcing Strict Equality

Before (potential bug with loose equality)

let isValid = false;
const response = getResponse();
if (response.status == 200) {
  isValid = true;
}

Here, the code is using loose equality (==) to compare response.status to 200. Using loose equality can be error-prone due to type coercion (e.g., response.status could be a string “200” and still pass). Ultracite’s strict rules likely enforce using === for comparisons.

After (Ultracite auto-fix applied)

let isValid = false;
const response = getResponse();
if (response.status === 200) { 
  isValid = true;
}

Ultracite automatically replaced == 200 with === 200. This small change prevents subtle bugs. The fix was applied on save as part of the source.fixAll.biome actions. Such a rule (similar to ESLint’s eqeqeq) ensures developers use strict equality checking.

Additionally, Ultracite will also warn that isValid is never used, and will suggest removing it.

Organizing and Cleaning Imports

Before (unorganized imports)

import Z from './z-module';
import A from './a-module';
import React from 'react';
import { helper } from './util';
 
const MyComponent = () => (
  <>
    <Z />
    <A />
  </>
);

The imports here are out of alphabetical order, and the helper import is never used in the file.

After (after save with Ultracite)

import React from 'react'; 
import A from './a-module'; 
import Z from './z-module'; 
import { helper } from './util'; 
 
const MyComponent = () => (
  <>
    <Z />
    <A />
  </>
);

Ultracite (via Biome’s organize imports feature) sorted the imports alphabetically by module name. It also removed the unused helper import automatically. The before/after difference happens immediately on save, ensuring that your imports section is always tidy:

• No unused imports cluttering the top of your file.
• Deterministic ordering of imports (so merges and diffs don’t get confused by different import orders added by different developers).

This leads to more maintainable code, especially in files with many imports.

Accessibility Fix

Before

<button onClick={submitForm}>
  Open modal
</button>

The default type of a button is submit, which causes the submission of a form when placed inside a form element. This is likely not the behaviour that you want inside a React application. Ultracite will warn you about this and offer a quick fix to change the type to button.

After (manual or quick fix)

<button onClick={submitForm} type="button">
  Open modal
</button>

The type is now button, which prevents a potential parent form from being submitted when the button is clicked.

These examples demonstrate how Ultracite improves code quality:

• Formatting and style consistency with no effort.
• Automatic fixes for many common issues (so you rarely have to fix trivial things by hand).
• Identification of real problems (so you can fix them early in development).

By using Ultracite, your code not only stays clean but also less buggy and more accessible, thanks to the collective knowledge encoded in its rules.