`.svelte` files refuse to format regardless of config, missing `svelte/compiler` dependency

[nmontavon]

Even when specifying svelte settings, and successfully linking the config (other settings are applying), Zed can't format .svelte files.

Workaround/Fix:
cd into ~/Library/Application\ Support/Zed/extensions/work/oxc and install the svelte package, so that the 'svelte/compiler' oxfmt relies on is present.

This seems slightly extreme, it might be cleaner to provide a config setting to a user-specified svelte/compiler install path or similar.

Latest Zed & oxc-extension.

[camc314]

can you share your .zed/settings.json?

Have you set up zed to use oxfmt for formatting svelte files?

[leaysgur]

To be clear:

• You must install svelte/compiler yourself in order to format .svelte files
  • It is intentionally not bundled with Oxfmt
• In other words, for your editor to find the Oxfmt binary and execute it in LSP mode, svelte/compiler must be installed such that import("svelte/compiler") works as JS

We're not entirely sure about your settings, but since you mentioned that installing it that way worked, I assume that's just how it needs to be done in your settings.

it might be cleaner to provide a config setting to a user-specified svelte/compiler install path or similar.

And this is a bit tricky. It's not our code calling import("svelte/compiler"), but rather the internal prettier-plugin-svelte code that we're bundling as-is.

[nrayburn-tech]

The path supplied in the original report is for the oxfmt installation that happens automatically with the Zed extension. I don’t believe other Oxc extensions do something like this, so it’s unique to Zed.

I’m not entirely sure the best solution. The easiest might be a config option, but that doesn’t fit the Zed approach of “it just works”.

[leaysgur]

Ah, I see.

In that sense, with the current our strategy, the recommended setup for both the CLI and LSP is to install them locally within the project and use them from there. This applies not only to Zed, but to other editors as well.

If you prefer to use global versions instead of local ones, that setup is the user's responsibility. If you want to format .svelte files using npx oxfmt, you need to run npx -p oxfmt -p svelte oxfmt.

[nrayburn-tech]

Zed doing the auto install isn’t something I like, but that’s just sort of the approach in that ecosystem unfortunately.

I’ll think on it some more before closing this, but in the meantime I think you’re right that project installs should be used and I would expect those to work.

[nmontavon]

I am well aware that svelte/compiler doesn't get bundled, I think that is the right strategy.

However detecting project-level installations always is a pain when the project is a mono-repo, contains node_module folders in different places, etc etc etc.

Project installs are probably the safest, as is would match the svelte version more accurately - agian, a path may be necessary for this.

The JS ecosystem can be such a mess, I'm sorry guys 🫪

Config for context:

    "oxlint": {
      "initialization_options": {
        "settings": {
          "run": "onType",
          "typeAware": true,
          "disableNestedConfig": false,
          "unusedDisableDirectives": "deny",
          "fixKind": "safe_fix_or_suggestion",
          "configPath": "frontend/oxlint.config.ts"
          // "tsConfigPath": "frontend/tsconfig.json"
        }
      }
    },
    "oxfmt": {
      "initialization_options": {
        "settings": {
          "fmt.configPath": "frontend/.oxfmtrc.json",
          "run": "onSave"
        }
      }
    }

    "Svelte": {
      "format_on_save": "on",
      "language_servers": [
        "tsgo",
        "!vtsls",
        "!typescript-language-server",
        "..."
      ],
      "prettier": {
        "allowed": false
      },
      "formatter": [
        {
          "language_server": {
            "name": "oxfmt"
          }
        },
        {
          "code_action": "source.fixAll.oxc"
        }
      ]
      // "language_servers": ["oxlint", "svelte-language-server", "..."],
      // "code_actions_on_format": {
      //     "source.fixAll.oxc": true,
      // },
    },

[nrayburn-tech]

I did confirm that using project installations worked for me. The reported behavior is only when Oxfmt is not installed locally and relying on the Zed provided version of Oxfmt (which @leaysgur mentioned above is not suggested).

I think the best solution here that fits the Zed ecosystem would be to automatically install Svelte into the Zed Oxc extension directory in this scenario (Oxc extension is installed, Oxfmt is enabled in the Zed settings, there is not a top level package.json with the oxfmt package, and the top level package.json has a svelte package).

The suggested approach has all the same issues that relying on the Zed Oxc extension to provide oxfmt does, so I don't think it's making things any worse in that sense.

[leaysgur]

I have a few concerns:

• How will the installed version be handled?
  • Will multiple projects end up overwriting each other's global installations?
  • While I don't anticipate any actual issues for now, there's a risk it could fall out of sync with the project-local version?
• How is this handled with Prettier?
  • Even when using Prettier, I believe a separate plugin installation is still required

[nrayburn-tech]

The latest Svelte version would always be installed, same as how the latest Oxfmt version is always installed. There’s no guarantee (or even attempt) that a project Svelte version matches the one installed with the Oxc extension.
Projects overriding isn’t an issue because the latest is always used.
Syncing versions isn’t an issue because the latest is always used, and it’s guaranteed the project version and extension version will eventually not match.

I’m not sure how Prettier would work in this scenario. I do know that Prettier support in Zed isn’t an extension, it’s built in to the editor. So, it doesn’t have the same limitations that we do.

I also wouldn’t object to doing nothing and just updating the documentation to call out this scenario and that project installs should be used instead.

[leaysgur]

Did a little research on Prettier and Zed...
It seems that for Svelte, plugin is also installed automatically.

https://github.com/zed-industries/zed/blob/5b948e5aaba15cf4446cfdf9cef1cfddcb062bee/assets/settings/default.json#L2300

Only the plugins listed by default in settings.json are installed automatically. However, you can also have arbitrary plugins installed by adding them to settings.json.

https://github.com/zed-industries/zed/blob/5b948e5aaba15cf4446cfdf9cef1cfddcb062bee/crates/prettier/src/prettier.rs#L398