Linting

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

Biome is configured via biome.json in the root directory. This configuration enforces consistent coding styles and catches common errors.

Running Linting and Formatting

Check Code Quality

To check your code without making any modifications:

bun run lint

This command will report any linting errors or warnings in your codebase and attempt to automatically resolve issues.

Format Code

To automatically format your code:

bun run format

This command will format all supported files according to the project's code formatting rules.

Customizing Rules

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

biome.json

{
  "$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"
    }
  }
}

For more information on how to customize your rule configurations, please refer to the Biome Lint Rules Documentation.

Editor Integration

Biome works best when integrated with your editor:

• VSCode/Cursor: Install the Biome Extension to get real-time linting and formatting.
• Other Editors: Check the Biome Documentation for integration options.

ShipSaaS provides preconfigured VSCode/Cursor settings for Biome to ensure that:

• Biome is used as the default formatter for JavaScript and TypeScript files.
• Files are automatically formatted upon saving.
• Imports are organized upon saving.

.vscode/settings.json

{
  "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"
  }
}

Next Steps

Now that you know how to maintain code quality in ShipSaaS, explore these related topics:

• Project Structure - Understand the template's project structure

• Editor Setup - Configure your development environment

• Changelog - Keep your project's codebase in sync with the template

• Environment Configuration - Configure environment variables

• Project Structure

• Editor Setup