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.

Running Linting & Formatting

Check Code Quality

To check your code without making changes:

pnpm run lint

npm run lint

yarn lint

bun run lint

This command will report any linting errors or warnings in your codebase and try to fix them automatically.

Format Code

To automatically format your code:

pnpm run format

npm run format

yarn format

bun run format

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

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.

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

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: