Formatting & Linting

TanStarter 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

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

This 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'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"
    }
  }
}

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

TanStarter comes with pre-configured VSCode/Cursor settings for Biome. 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

{
  "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 understand how code quality is maintained in TanStarter, explore these related topics: