opencode/packages/web/src/content/docs/formatters.mdx

125 lines
7.4 KiB
Plaintext
Raw Normal View History

2025-08-01 07:50:31 +08:00
---
title: Formatters
2025-10-04 01:46:56 +08:00
description: OpenCode uses language specific formatters.
2025-08-01 07:50:31 +08:00
---
2025-10-04 01:46:56 +08:00
OpenCode automatically formats files after they are written or edited using language-specific formatters. This ensures that the code that is generated follows the code styles of your project.
2025-08-01 07:50:31 +08:00
2025-08-05 07:52:03 +08:00
---
## Built-in
2025-08-01 07:50:31 +08:00
2025-10-04 01:46:56 +08:00
OpenCode comes with several built-in formatters for popular languages and frameworks. Below is a list of the formatters, supported file extensions, and commands or config options it needs.
2025-08-01 07:50:31 +08:00
2025-12-27 00:22:05 +08:00
| Formatter | Extensions | Requirements |
| -------------------- | -------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------- |
| gofmt | .go | `gofmt` command available |
| mix | .ex, .exs, .eex, .heex, .leex, .neex, .sface | `mix` command available |
| prettier | .js, .jsx, .ts, .tsx, .html, .css, .md, .json, .yaml, and [more](https://prettier.io/docs/en/index.html) | `prettier` dependency in `package.json` |
| biome | .js, .jsx, .ts, .tsx, .html, .css, .md, .json, .yaml, and [more](https://biomejs.dev/) | `biome.json(c)` config file |
| zig | .zig, .zon | `zig` command available |
| clang-format | .c, .cpp, .h, .hpp, .ino, and [more](https://clang.llvm.org/docs/ClangFormat.html) | `.clang-format` config file |
| ktlint | .kt, .kts | `ktlint` command available |
| ruff | .py, .pyi | `ruff` command available with config |
| uv | .py, .pyi | `uv` command available |
| rubocop | .rb, .rake, .gemspec, .ru | `rubocop` command available |
| standardrb | .rb, .rake, .gemspec, .ru | `standardrb` command available |
| htmlbeautifier | .erb, .html.erb | `htmlbeautifier` command available |
| air | .R | `air` command available |
| dart | .dart | `dart` command available |
| ocamlformat | .ml, .mli | `ocamlformat` command available and `.ocamlformat` config file |
| terraform | .tf, .tfvars | `terraform` command available |
| gleam | .gleam | `gleam` command available |
| oxfmt (Experimental) | .js, .jsx, .ts, .tsx | `oxfmt` dependency in `package.json` and an [experimental env variable flag](/docs/cli/#experimental) |
2025-08-01 07:50:31 +08:00
2025-10-04 01:46:56 +08:00
So if your project has `prettier` in your `package.json`, OpenCode will automatically use it.
2025-08-05 07:52:03 +08:00
---
2025-08-01 07:50:31 +08:00
2025-08-05 07:52:03 +08:00
## How it works
2025-08-01 07:50:31 +08:00
2025-10-04 01:46:56 +08:00
When OpenCode writes or edits a file, it:
2025-08-01 07:50:31 +08:00
2025-08-05 07:52:03 +08:00
1. Checks the file extension against all enabled formatters.
2. Runs the appropriate formatter command on the file.
3. Applies the formatting changes automatically.
2025-08-01 07:50:31 +08:00
2025-08-05 07:52:03 +08:00
This process happens in the background, ensuring your code styles are maintained without any manual steps.
---
## Configure
2025-10-04 01:46:56 +08:00
You can customize formatters through the `formatter` section in your OpenCode config.
2025-08-01 07:50:31 +08:00
```json title="opencode.json"
2025-08-05 07:52:03 +08:00
{
"$schema": "https://opencode.ai/config.json",
2025-09-10 11:43:37 +08:00
"formatter": {}
2025-08-05 07:52:03 +08:00
}
```
Each formatter configuration supports the following:
| Property | Type | Description |
| ------------- | -------- | ------------------------------------------------------- |
2025-09-10 11:43:37 +08:00
| `disabled` | boolean | Set this to `true` to disable the formatter |
2025-08-05 07:52:03 +08:00
| `command` | string[] | The command to run for formatting |
| `environment` | object | Environment variables to set when running the formatter |
| `extensions` | string[] | File extensions this formatter should handle |
Let's look at some examples.
---
### Disabling formatters
To disable **all** formatters globally, set `formatter` to `false`:
```json title="opencode.json" {3}
{
"$schema": "https://opencode.ai/config.json",
"formatter": false
}
```
To disable a **specific** formatter, set `disabled` to `true`:
2025-08-05 07:52:03 +08:00
```json title="opencode.json" {5}
2025-08-01 07:50:31 +08:00
{
"$schema": "https://opencode.ai/config.json",
"formatter": {
"prettier": {
"disabled": true
}
}
}
```
2025-08-05 07:52:03 +08:00
---
2025-08-01 07:50:31 +08:00
2025-08-05 07:52:03 +08:00
### Custom formatters
2025-08-01 07:50:31 +08:00
2025-08-05 07:52:03 +08:00
You can override the built-in formatters or add new ones by specifying the command, environment variables, and file extensions:
```json title="opencode.json" {4-14}
2025-08-01 07:50:31 +08:00
{
"$schema": "https://opencode.ai/config.json",
"formatter": {
"prettier": {
2025-08-01 07:50:31 +08:00
"command": ["npx", "prettier", "--write", "$FILE"],
"environment": {
"NODE_ENV": "development"
},
"extensions": [".js", ".ts", ".jsx", ".tsx"]
},
"custom-markdown-formatter": {
"command": ["deno", "fmt", "$FILE"],
"extensions": [".md"]
2025-08-01 07:50:31 +08:00
}
}
}
```
2025-08-05 07:52:03 +08:00
The **`$FILE` placeholder** in the command will be replaced with the path to the file being formatted.