Skip to main content

Code Style

Code style enforcement in Invent projects​

Our frontend codebase maintains consistency and quality through automated tooling. Code style rules are enforced using a combination of linters and formatters, with configurations centralized in the wl-linters package — part of the Invent Frontend SDK.

The goal is to reduce unnecessary debates over formatting and minor code style issues, while encouraging developers to focus on architecture, behavior, and maintainability. This automation also makes it easier for external teams and vendors to integrate with our standards seamlessly.

Linting and formatting tools​

JavaScript and TypeScript syntax rules are enforced through eslint using the standard recommended configuration along with framework-specific plugins (e.g., for React). For CSS and preprocessor syntax, we use stylelint, with a similarly strict but extensible ruleset.

Customizations, overrides, and shared configurations are bundled in our internal wl-linters package. This package is versioned and maintained centrally, and included as a dependency in all official Invent frontend projects.

In addition to linting, code is automatically formatted using prettier-eslint, allowing for consistent spacing, quotes, line wrapping, and other formatting decisions.

Local development experience​

Linting and formatting run automatically in your development environment — you don’t need to trigger them manually.

Pre-commit hooks​

Every project includes a pre-commit hook (via Husky) that runs checks before changes can be committed. If violations are detected, the commit is blocked with clear error messages so you can address issues right away.

Checks include:

  • ESLint (JS/TS/React rules)
  • Stylelint (CSS/SASS rules)
  • Prettier formatting via prettier-eslint

Editor integrations​

Most modern editors (e.g., VS Code) will automatically highlight style issues and may even fix them on save if configured correctly. You can install ESLint and Stylelint extensions for a smoother dev experience.

Running linters manually​

In case you need to run linters manually, each project includes scripts like:

npm run lint          # Runs ESLint
npm run lint:styles   # Runs Stylelint
npm run format        # Runs Prettier

Make sure your local project is using the latest wl-linters version to avoid conflicts or outdated rules.