Skip to main content

Formatting & Linting

Welcome to our project's documentation on code formatting and linting guidelines. This document provides a comprehensive guide to our project's setup and the tools we're using to ensure code consistency and quality.

Concepts​

Basic Concepts

What is Code Formatting?

Code formatting involves styling the code in a consistent manner. It's about the visual aspects like indentation, line spacing, and the placement of braces. Good formatting helps make code more readable and maintainable.

What is Linting?

Linting is the process of analyzing code for potential errors and code-quality issues. It helps identify problems that might lead to bugs, focusing on the functional aspects of the code.

About BiomeJs

BiomeJs is our chosen tool for both formatting and linting. It is designed for speed and efficiency, supporting file types such as JavaScript, TypeScript, JSX, JSON, and Jsonc as of our last review. BiomeJs provides a streamlined and integrated approach for maintaining code quality, reducing the need for extensive configuration and plugin setup. For more details on its capabilities and supported languages, visit BiomeJs Language Support.

Our Setup​

After considering various tools including Prettier and ESLint, we have chosen to use BiomeJs exclusively for both formatting and linting. This decision aligns with our goal of streamlining our development process and maintaining a high standard of code quality with minimal configuration overhead. The rationale behind this decision is documented in our Architecture Decision Record (ADR), available here.

BiomeJs Configuration​

  • Location: The shared configuration for BiomeJs is located in packages/code-config/biomejs.
  • Role: BiomeJs automatically lints and formats supported file types.
  • Autoformat on Save: Enabled in VSCode for these specific file types.
  • Config Management: The entire monorepo can be managed via BiomeJs's configuration in biome.json located in packages/code-config/biomejs.

Using Biome in our packages​

To use Biome in our packages, ensure that @biomejs/biome is added as a dev dependency, and add the following to the package.json file:

{
  "scripts": {
    "format": "biome format .",
    "lint": "biome lint ."
  }
}

Doing this will allow us to use Turborepo's awesome monorepo task running capabilities to run Biome on all our packages at once.

Version Control Integration​

  • Git Integration: Our setup integrates with Git to ensure that code commits adhere to our formatting and linting standards.
  • Pre-commit Hooks: We use tools like Husky to automatically lint and format code before commits, preventing inconsistent code from being committed.

Workflow Integration in VSCode​

  • Required Extension: The development environment includes the BiomeJS extension in VSCode.
  • Dev Container: Our dev container automatically installs the BiomeJS extension.
  • Managing Formatter Changes: Configuration changes for formatters can be managed in .vscode/settings.json.

For any queries or assistance with the setup, please feel free to reach out to the project maintainers. Let's work together to maintain a high standard of code quality in our project!