Val

Overview

Formatting using Prettier

Setting up Prettier

Val allows you to configure code formatting. This formatter will apply every time content is published. We recommend setting this up.

Installation

Install prettier as a regular dependency:

Bash

npm install prettier
# or
pnpm add prettier

Important: Install Prettier as a Regular Dependency

Prettier must be installed as a regular dependency (not a devDependency) for formatting to work in production environments.

Configuration

Configure formatting in your val/val.server.ts file by providing a formatter function to initValServer:

import prettier from "prettier";
import prettierOptions from "../.prettierrc.json";

const { valNextAppRouter } = initValServer(
  valModules,
  { ...config },
  {
    draftMode,
    // Add formatter option here
    formatter: (code: string, filePath: string) => {
      return prettier.format(code, {
        filepath: filePath,
        ...prettierOptions,
      } as prettier.Options);
    },
  },
);

Prettier Configuration File

Create a .prettierrc.json file in your project root with your preferred formatting options:

Json

{
  "semi": true,
  "trailingComma": "all",
  "singleQuote": false,
  "printWidth": 80,
  "tabWidth": 2
}

Using Other Formatters

While this example uses Prettier, you can use any formatter by implementing the formatter function. The function receives the code as a string and the file path, and should return the formatted code.

Basic workflow

Monorepo