Formatting & Linting

MkSaaS uses Biome for code formatting and linting to ensure consistent code quality across the project.

Biome is configured in the project root with biome.json. This configuration enforces consistent code style and catches common errors.

Key Features

• Zero-config: Works out of the box with sensible defaults
• Fast: Written in Rust for maximum performance
• All-in-one: Combines linting, formatting, and more in a single tool

Running Linting & Formatting

Check Code Quality

To check your code without making changes:

pnpm run lint

This command will report any linting errors or warnings in your codebase.

Fix Code Issues

To automatically fix linting issues:

pnpm run lint:fix

This will attempt to fix any automatically fixable issues in your code.

Format Code

To automatically format your code:

pnpm run format

This will format all supported files according to the project's style rules.

Editor Integration

Biome works best when integrated with your editor:

• VSCode/Cursor: Install the Biome extension for real-time linting and formatting
• Other Editors: Check the Biome documentation for integration options

Customizing Rules

The project's Biome configuration is defined in biome.json. Here's a simplified view of our configuration:

{
  "$schema": "https://biomejs.dev/schemas/1.9.4/schema.json",
  "formatter": {
    "enabled": true,
    "indentStyle": "space",
    "indentWidth": 2,
    "lineWidth": 80
  },
  "organizeImports": {
    "enabled": true
  },
  "linter": {
    "enabled": true,
    "rules": {
      "recommended": true,
      // Various rule customizations...
    }
  },
  "javascript": {
    "formatter": {
      "quoteStyle": "single",
      "trailingCommas": "es5",
      "semicolons": "always"
    }
  }
}

MkSaaS has customized certain rules to better fit our development workflow. The full configuration can be viewed in the biome.json file at the project root.

For more information on how to customize the rules configuration, please refer to the Biome Lint Rules Documentation.

TypeScript Integration

Biome works alongside TypeScript to provide comprehensive code quality checks:

• TypeScript handles type checking
• Biome handles style and common errors
• Together they provide a robust development experience

IDE Integration

MkSaaS comes with pre-configured VSCode/Cursor settings for Biome:

{
  "editor.defaultFormatter": "biomejs.biome",
  "[javascript]": {
    "editor.defaultFormatter": "biomejs.biome"
  },
  "[typescript]": {
    "editor.defaultFormatter": "biomejs.biome"
  },
  "[typescriptreact]": {
    "editor.defaultFormatter": "biomejs.biome"
  },
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "quickfix.biome": "explicit",
    "source.organizeImports.biome": "explicit"
  }
}

These settings ensure that:

• Biome is used as the default formatter for JavaScript and TypeScript files
• Files are automatically formatted when saved
• Import statements are organized on save
• Quick fixes from Biome are applied when explicitly requested

Next Steps

Now that you understand how code quality is maintained in MkSaaS, explore these related topics: