Skip to main content

Core Configuration

Prettier Config

Formbricks uses a standardized Prettier configuration defined in @formbricks/config-prettier:
Key configurations:
  • 110 characters line width
  • Double quotes for strings
  • ES5 trailing commas
  • Always use parentheses for arrow functions
  • Strict import ordering

Import Order

All imports follow a strict ordering:
  1. Mocks (for testing)
  2. Server-only imports
  3. Third-party modules
  4. Internal @formbricks/* modules
  5. Local aliases (`~/*)
  6. Relative imports

TypeScript Config

  • Strict TypeScript checking enabled
  • Consistent use of tsconfig.json extending from @formbricks/config-typescript
  • Example configuration:

JSDoc Comments

Required for public APIs and complex functions:

Error Handling

Standardized error handling using the ErrorHandler class:

Enforcement Tools

Pre-commit Hooks

Using Husky and lint-staged for automated checks:
The hook formats staged files only — ESLint is not part of it. Lint violations are caught by pnpm lint and the “Run Linters” CI job.

ESLint Configuration

ESLint runs on the flat config format. Every package and app has its own eslint.config.mjs that imports one of the composable tiers exported by @formbricks/eslint-config: Every tier builds on @formbricks/eslint-config/base, which holds the shared turbo, prettier, vitest and unused-vars conventions. It exports named building blocks rather than a ready-made config, so packages import one of the tiers above instead of base directly. Each tier is an array of flat config objects, so a package either re-exports it directly or spreads it and appends its own overrides:
Use the extensionless subpaths above — they are the only ones the package exports.

Continuous Integration

  • Automated formatting checks in CI/CD pipeline
  • SonarCloud integration for code quality analysis
  • Coverage requirements for tests

VS Code Integration

Required Extensions

  • esbenp.prettier-vscode - Prettier formatting
  • dbaeumer.vscode-eslint - ESLint integration
  • bradlc.vscode-tailwindcss - Tailwind CSS support

Best Practices

  1. Consistent Formatting
    • Always run pnpm format before committing
    • Use VS Code’s format on save feature
    • Follow the established import order
  2. Type Safety
    • Enable strict TypeScript checks
    • Use explicit type annotations when necessary
    • Avoid using any type
  3. Code Organization
    • Keep files focused and modular
    • Group related functionality
    • Use clear, descriptive names
  4. Documentation
    • Document complex logic
    • Use JSDoc for public APIs
    • Keep comments current with code changes
These standards ensure consistency across the Formbricks codebase while maintaining high code quality and developer productivity.