YouTip

OpenCode will **automatically** use the corresponding language formatter after each file write or edit, ensuring that the generated code always conforms to your project's code style. The entire process is completed silently in the background without any manual operation. * * * ## How It Works When OpenCode writes or edits a file, it automatically executes formatting according to the following steps: 1. Detect the file extension of the written or edited file (e.g., `.ts`, `.py`, `.go`, etc.) 2. Match the extension against all enabled formatters 3. Run the matched formatting command on the file 4. Automatically write the formatted result back to the file For example, if your project's `package.json` includes the `prettier` dependency, OpenCode will automatically detect it and call prettier for formatting after each edit of `.js`, `.ts`, `.css`, and other files, without any additional configuration. * * * ## Built-in Formatters OpenCode has built-in formatter support covering mainstream languages and frameworks, divided into two categories: * **Enabled when command is available**: Just install the corresponding command in your system, and OpenCode will automatically detect and use it * **Requires project configuration file or dependency**: Needs to include a specific configuration file or dependency package in the project | Formatter | Supported File Extensions | Enablement Requirements | | --- | --- | --- | | `air` | `.R` | `air` command available | | `biome` | `.js``.jsx``.ts``.tsx``.html``.css``.md``.json``.yaml` and more | `biome.json` or `biome.jsonc` configuration file exists in the project | | `cargofmt` | `.rs` | `cargo fmt` command available | | `clang-format` | `.c``.cpp``.h``.hpp``.ino` and more | `.clang-format` configuration file exists in the project | | `cljfmt` | `.clj``.cljs``.cljc``.edn` | `cljfmt` command available | | `dart` | `.dart` | `dart` command available | | `dfmt` | `.d` | `dfmt` command available | | `gleam` | `.gleam` | `gleam` command available | | `gofmt` | `.go` | `gofmt` command available | | `htmlbeautifier` | `.erb``.html.erb` | `htmlbeautifier` command available | | `ktlint` | `.kt``.kts` | `ktlint` command available | | `mix` | `.ex``.exs``.eex``.heex``.leex``.neex``.sface` | `mix` command available | | `nixfmt` | `.nix` | `nixfmt` command available | | `ocamlformat` | `.ml``.mli` | `ocamlformat` command available, and `.ocamlformat` configuration file exists in the project | | `ormolu` | `.hs` | `ormolu` command available | | `oxfmt` (Experimental) | `.js``.jsx``.ts``.tsx` | `oxfmt` dependency in `package.json`, and the corresponding experimental environment variable flag is set | | `pint` | `.php` | `laravel/pint` dependency in `composer.json` | | `prettier` | `.js``.jsx``.ts``.tsx``.html``.css``.md``.json``.yaml` and more | `prettier` dependency in `package.json` | | `rubocop` | `.rb``.rake``.gemspec``.ru` | `rubocop` command available | | `ruff` | `.py``.pyi` | `ruff` command available and corresponding configuration exists | | `rustfmt` | `.rs` | `rustfmt` command available | | `shfmt` | `.sh``.bash` | `shfmt` command available | | `standardrb` | `.rb``.rake``.gemspec``.ru` | `standardrb` command available | | `terraform` | `.tf``.tfvars` | `terraform` command available | | `uv` | `.py``.pyi` | `uv` command available | | `zig` | `.zig``.zon` | `zig` command available | > When multiple formatters support the same extension (e.g., `.rs` is supported by both `cargofmt` and `rustfmt`, `.rb` is supported by both `rubocop` and `standardrb`), OpenCode will automatically choose based on the tools installed in the project. To specify explicitly, you can disable unwanted formatters through the configuration below. * * * ## Configuration File Structure Custom configurations for formatters are written under the `formatter` field in `opencode.json`, with the key being the formatter name (consistent with the names in the built-in table) and the value being the configuration object for that tool: ## Example { "$schema":"https://opencode.ai/config.json", "formatter":{ // Formatter name: Configuration object "prettier":{ // Fill in prettier configuration options here } } } Each formatter supports the following configuration options: | Configuration Option | Type | Description | | --- | --- | --- | | `disabled` | `boolean` | Set to `true` to disable this formatter; other configuration options will be ignored | | `command` | `string[]` | Array of commands to execute formatting. The `$FILE` placeholder can be used in the command, which will be replaced at runtime with the full path of the file to be formatted | | `environment` | `object` | Environment variables injected when running the formatter, in key-value pairs | | `extensions` | `string[]` | List of file extensions processed by this formatter (including `.`, e.g., `".ts"`) | * * * ## Disabling Formatters ### 1. Disable All Formatters If you do not want OpenCode to automatically format any files, you can set `formatter` directly to `false`: ## Example { "$schema": "https://opencode.ai/config.json", "formatter": false // Globally disable all formatters, no formatting will occur after file writes } ### 2. Disable Specific Formatter If you only need to disable a specific formatter, set `disabled` to `true` in that tool's configuration object; other formatters will not be affected: ## Example { "$schema": "https://opencode.ai/config.json", "formatter": { "prettier": { "disabled": true // Only disable prettier, other formatters (e.g., ruff, gofmt) still work normally } } } * * * ## Custom Formatters Through the `command`, `environment`, and `extensions` configuration options, you can override the default behavior of built-in formatters, or add formatters not yet built into OpenCode. ### 1. Override Built-in Formatter Command For example, to specify particular arguments for prettier and restrict it to only process specific extensions: ## Example { "$schema":"https://opencode.ai/config.json", "formatter":{ "prettier":{ "command":["npx","prettier","--write","$FILE"], // $FILE in the command array is a placeholder, which will be replaced at runtime with the full path of the file to be formatted // For example, actually executing: npx prettier --write /your/project/src/index.ts "environment":{ "NODE_ENV":"development"// Environment variable injected when running prettier }, "extensions":[".js",".ts",".jsx",".tsx"] // Override default extensions: only run prettier on these four file types, do not process .html, .css, etc. } } } ### 2. Add Custom Formatter If the formatter you are using is not in the built-in list, you can add it by specifying an arbitrary name. Just provide the startup command and the file extensions to be processed: ## Example { "$schema":"https://opencode.ai/config.json", "formatter":{ "custom-markdown-formatter":{// Custom name (any name, as long as it doesn't conflict with built-in tools) "command":["deno","fmt","$FILE"], // Use deno fmt to format files, $FILE will be replaced with the actual file path "extensions":[".md"]// Only run this formatter on .md files } } } ### 3. Configure Multiple Formatters Simultaneously ## Example { "$schema":"https://opencode.ai/config.json", "formatter":{ "prettier":{ "command":["npx","prettier","--write","$FILE"], "environment":{ "NODE_ENV":"development" }, "extensions":[".js",".ts",".jsx",".tsx"] }, "ruff":{ "disabled":true// Not using ruff in the project, disable it }, "custom-markdown-formatter":{ "command":["deno","fmt","$FILE"], "extensions":[".md"] } } }