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 & FormattingCopy Anchor Link

Check Code QualityCopy Anchor Link

To check your code without making changes:

pnpm lint:check

This command reports formatting and lint errors without changing files. To apply automatic fixes, run pnpm lint. Use pnpm check to run the read-only lint check, TypeScript checks, unit tests, and production build. See Automated Testing for browser and payment sandbox suites.

Format CodeCopy Anchor Link

To automatically format your code:

pnpm run format

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

Customizing RulesCopy Anchor Link

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

{
  "$schema": "https://biomejs.dev/schemas/2.5.5/schema.json",
  "formatter": {
    "enabled": true,
    "indentStyle": "space",
    "indentWidth": 2,
    "lineWidth": 80
  },
  "assist": {
    "actions": {
      "source": {
        "organizeImports": "off"
      }
    }
  },
  "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 Linter Documentation.

Editor IntegrationCopy Anchor Link

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 organization follows the project configuration (disabled by default)
• Quick fixes from Biome are applied when explicitly requested

Next StepsCopy Anchor Link

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