Builtin Zed prettier does not respect zed "tab_width" options

[ikelos]

Check for existing issues

• Completed

Describe the bug / provide steps to reproduce it

The tab_size option is set to 4 by default (both globally and for javascript in particular) and the autoformatting on save is on by default. Open a Javascript file, ensure the indents are 4 spaces, save the file. The indents are changed to a tab size of 2. This is because the in-built prettier (allowed by default) has its own tab_width defaults, which are set to 2. This can be overridden in the zed config with:

{
    "languages": {
        "JavaScript": {
            "prettier": {
                "tab_width": 4
            }
        }
    }
}

However, this is extremely confusing and most users would expect tab_size at the top level, or at the language level to override the built-in prettier configuration.

This may be related to #12154 and #20009.

Environment

Zed: v0.159.7 (Zed)
OS: Linux Wayland gentoo 2.15
Memory: 15.3 GiB
Architecture: x86_64
GPU: Intel(R) UHD Graphics (TGL GT1) || Intel open-source Mesa driver || Mesa 24.2.6

If applicable, add mockups / screenshots to help explain present your vision of the feature

In my view, javascript files, when saved by default, should adhere to the tab_width defaults of zed.

If applicable, attach your Zed.log file to this issue.

Not applicable, although when saving a broken JSON settings file, I discovered the following line:

2024-11-05T11:11:12.87589183Z [ERROR] default prettier instance failed to format buffer

Caused by:
    error during message '{"jsonrpc":"2.0","id":2,"method":"prettier/format","params":{"text":"..snip..","options":{"plugins":[],"parser":null,"filepath":"/home/mike/.config/zed/settings.json","prettierOptions":{"useTabs":false,"tabWidth":2,"printWidth":80}}}}' handling: SyntaxError: Unexpected token, expected "," (13:3)
      11 |   "buffer_font_size": 16,
      12 |   "tab_size": 4, "hard_tabs": false
    > 13 |   "theme": {
         |   ^
      14 |     "mode": "system",
      15 |     "light": "One Light",
      16 |     "dark": "One Dark"

Which caused me to investigate prettierOptions and eventually find that prettier has its own tab_width setting.

[notpeter]

I don't believe tab_width is a valid prettier setting. I believe it should be tabWidth but I would recommend against specifying these values for prettier in your Zed settings. Prettier defaults to tabWidth = 2, if you need to use a value of 4, you can set this value as:

  "languages": {
    "JavaScript": {
      "tab_size": 4
    }
  }

Zed will inject this into the prettier tabWidth setting here:

zed/crates/prettier/src/prettier.rs

Lines 372 to 379 in 8b3d315

	if !options.contains_key("tabWidth") {
	options.insert(
	"tabWidth".to_string(),
	serde_json::Value::Number(serde_json::Number::from(
	language_settings.tab_size.get(),
	)),
	);
	}

I also recommend you explicit include .prettierc.json with similar prettier overrides per extension/language. This way prettier on the CLI and in Zed will behave the same.

I understand your confusion as to why a global setting of tab_size does not override the per-language values, this is because tab_size, hard_tabs, etc may be overriden by the config.toml for languages:

zed/crates/languages/src/javascript/config.toml

Line 19 in 8b3d315

tab_size = 2

zed/crates/languages/src/go/config.toml

Line 16 in 8b3d315

hard_tabs = true

The Zed defaults attempt to align with the most common defaults for a given language (e.g. hard tabs for go matching go fmt, tab_size = 2 for matching prettier defaults for JS/TS/json/jsonc, etc.)

Since the default.json tab_size is 4, the Javascript config.toml overrides that default to 2.

[Pumacks]

Nahh this issue shouldnt be closed as not planned.
This is a valid feature.

I got Zed as a binary through pacman, this means i have to build this myself and have to edit these files for just adjusting the tabsize of the formatter.
plus i cant update zed through my package manager now.

please reopen this issue.

[notpeter]

@Pumacks You shouldn't need to build yourself, you should just be able to add the following to your Zed settings (user settings or project settings) as I suggested above:

  "languages": {
    "JavaScript": {
      "tab_size": 4
    }
  }

Is this not working for you?