formatters.mdx 8.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129
  1. ---
  2. title: Formatters
  3. description: OpenCode uses language specific formatters.
  4. ---
  5. 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.
  6. ---
  7. ## Built-in
  8. 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.
  9. | Formatter | Extensions | Requirements |
  10. | -------------------- | -------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------- |
  11. | gofmt | .go | `gofmt` command available |
  12. | mix | .ex, .exs, .eex, .heex, .leex, .neex, .sface | `mix` command available |
  13. | prettier | .js, .jsx, .ts, .tsx, .html, .css, .md, .json, .yaml, and [more](https://prettier.io/docs/en/index.html) | `prettier` dependency in `package.json` |
  14. | biome | .js, .jsx, .ts, .tsx, .html, .css, .md, .json, .yaml, and [more](https://biomejs.dev/) | `biome.json(c)` config file |
  15. | zig | .zig, .zon | `zig` command available |
  16. | clang-format | .c, .cpp, .h, .hpp, .ino, and [more](https://clang.llvm.org/docs/ClangFormat.html) | `.clang-format` config file |
  17. | ktlint | .kt, .kts | `ktlint` command available |
  18. | ruff | .py, .pyi | `ruff` command available with config |
  19. | rustfmt | .rs | `rustfmt` command available |
  20. | cargofmt | .rs | `cargo fmt` command available |
  21. | uv | .py, .pyi | `uv` command available |
  22. | rubocop | .rb, .rake, .gemspec, .ru | `rubocop` command available |
  23. | standardrb | .rb, .rake, .gemspec, .ru | `standardrb` command available |
  24. | htmlbeautifier | .erb, .html.erb | `htmlbeautifier` command available |
  25. | air | .R | `air` command available |
  26. | dart | .dart | `dart` command available |
  27. | ocamlformat | .ml, .mli | `ocamlformat` command available and `.ocamlformat` config file |
  28. | terraform | .tf, .tfvars | `terraform` command available |
  29. | gleam | .gleam | `gleam` command available |
  30. | nixfmt | .nix | `nixfmt` command available |
  31. | shfmt | .sh, .bash | `shfmt` command available |
  32. | pint | .php | `laravel/pint` dependency in `composer.json` |
  33. | oxfmt (Experimental) | .js, .jsx, .ts, .tsx | `oxfmt` dependency in `package.json` and an [experimental env variable flag](/docs/cli/#experimental) |
  34. So if your project has `prettier` in your `package.json`, OpenCode will automatically use it.
  35. ---
  36. ## How it works
  37. When OpenCode writes or edits a file, it:
  38. 1. Checks the file extension against all enabled formatters.
  39. 2. Runs the appropriate formatter command on the file.
  40. 3. Applies the formatting changes automatically.
  41. This process happens in the background, ensuring your code styles are maintained without any manual steps.
  42. ---
  43. ## Configure
  44. You can customize formatters through the `formatter` section in your OpenCode config.
  45. ```json title="opencode.json"
  46. {
  47. "$schema": "https://opencode.ai/config.json",
  48. "formatter": {}
  49. }
  50. ```
  51. Each formatter configuration supports the following:
  52. | Property | Type | Description |
  53. | ------------- | -------- | ------------------------------------------------------- |
  54. | `disabled` | boolean | Set this to `true` to disable the formatter |
  55. | `command` | string[] | The command to run for formatting |
  56. | `environment` | object | Environment variables to set when running the formatter |
  57. | `extensions` | string[] | File extensions this formatter should handle |
  58. Let's look at some examples.
  59. ---
  60. ### Disabling formatters
  61. To disable **all** formatters globally, set `formatter` to `false`:
  62. ```json title="opencode.json" {3}
  63. {
  64. "$schema": "https://opencode.ai/config.json",
  65. "formatter": false
  66. }
  67. ```
  68. To disable a **specific** formatter, set `disabled` to `true`:
  69. ```json title="opencode.json" {5}
  70. {
  71. "$schema": "https://opencode.ai/config.json",
  72. "formatter": {
  73. "prettier": {
  74. "disabled": true
  75. }
  76. }
  77. }
  78. ```
  79. ---
  80. ### Custom formatters
  81. You can override the built-in formatters or add new ones by specifying the command, environment variables, and file extensions:
  82. ```json title="opencode.json" {4-14}
  83. {
  84. "$schema": "https://opencode.ai/config.json",
  85. "formatter": {
  86. "prettier": {
  87. "command": ["npx", "prettier", "--write", "$FILE"],
  88. "environment": {
  89. "NODE_ENV": "development"
  90. },
  91. "extensions": [".js", ".ts", ".jsx", ".tsx"]
  92. },
  93. "custom-markdown-formatter": {
  94. "command": ["deno", "fmt", "$FILE"],
  95. "extensions": [".md"]
  96. }
  97. }
  98. }
  99. ```
  100. The **`$FILE` placeholder** in the command will be replaced with the path to the file being formatted.