Val

Formatting Setup

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:

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:

{
  "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.