Skip to content

Frontend Code Style

This document outlines rules and recommendations for creating clear, maintainable, and consistent JavaScript, TypeScript, and CSS/SCSS code.

Code style tools

Frontend code style is defined by using these tools:

ESLint Configuration

  • eslint-default.config.js:
    Used by the CI/CD pipeline. It contains essential rules ensuring code quality and consistency throughout the project.

  • eslint.config.js:
    Extends eslint-default.config.js with additional or stricter rules. This file is intended for IDE use during feature development to enforce higher coding standards.

Run ESLint with:

yarn lint

Prettier Configuration

  • .prettierrc.js:
    Specifies formatting rules, ensuring uniform code style across the entire project.

Stylelint Configuration

  • .stylelintrc.js:
    Defines linting rules for stylesheets to uphold the project's coding standards.

  • .stylelintignore:
    Defines files excluded from Stylelint checks. Only temporary files in app/frontend/src/design_system/**/stylesheets/temp/ are ignored.

Run Stylelint with:

yarn stylelint

vue-tsc Configuration

  • tsconfig.json:
    Contains global TypeScript settings.

  • tsconfig.pipeline.json: Defines the TypeScript check scope used by the project command.

  • tsc.ignored_files.json:
    Lists historical diagnostics tolerated by the TypeScript check.

The project has one supported TypeScript check:

  • yarn tsc runs tsc.script.js.
  • tsc.script.js runs vue-tsc against tsconfig.pipeline.json.
  • Historical diagnostics may only be tolerated when their primary file path is listed in tsc.ignored_files.json.
  • Do not add new entries to tsc.ignored_files.json.
  • yarn tsc:pipeline remains available as a backward-compatible alias.

Run the TypeScript check with:

yarn tsc

Do not add new entries to tsc.ignored_files.json.
Stylelint checks are limited to app/frontend/src/design_system/**/*.{css,scss} and only ignore temporary temp directories in design system stylesheets.