Unable to create custom formatter for Svelte

[siduck]

local options = {

  -- custom formatter
  formatters = {
    svelte_fmt = {
      command = "prettier",
      args = { "--write", "--plugin", "prettier-plugin-svelte", "$FILENAME" },
    },
  },

  formatters_by_ft = {
    svelte = { "svelte_fmt" },
  },
}

require("conform").setup(options)

[siduck]

ok removed --write arg + i had 2 prettiers so removed the useless one, it works now

formatters = {
    svelte_fmt = {
      command = "prettier",
      args = { "--plugin", "prettier-plugin-svelte", "$FILENAME" },
    },
  }

[snr2718]

Hi, I'm facing the same issue. I have globally installed prettier and prettier plugin svelte.

[siduck]

Hi, I'm facing the same issue. I have globally installed prettier and prettier plugin svelte.

i installed with mason and had to manually set path

[gitaarik]

Hey @siduck, how did you install Prettier with the prettier-plugin-svelte plugin through Mason?

And isn't there a way to configure the formatter without specifying the path? I want to be able to share my nvim setup with my friends without them having to know how to do this.

[siduck]

hi @gitaarik i installed it with npm, cd'ed into that mason local dir and installed the package. Ik this isnt a good solution. Its better if you ask on mason repo. williamboman/mason.nvim#161

my friends without them having to know how to do this.

😆

[siduck]

any better solution? @williamboman

[gitaarik]

Ok, isn't it also just a matter of adding a mason registry package?

Something like this?

---
name: prettier-plugin-svelte
description:  Format your svelte components using prettier.
homepage: https://github.com/sveltejs/prettier-plugin-svelte
licenses:
  - MIT
languages:
  - Svelte
categories:
  - Formatter

source:
  id: pkg:npm/[email protected]

bin:
  prettier: npm:prettier-plugin-svelte

Edit: although I wonder if it would cause problems if this is installed by Mason before prettier itself.

[siduck]

@gitaarik no idea how mason works tbh! but i doubt if it'd accept prettier plugins as there are a lot

there's a workaround that you can install that plugin as dev dependency for your project, that'll work too. But its bad to add it for every project..

Imo there should be another formatter for svelte which doesnt rely on prettier

[gitaarik]

Aha, I see now there is an issue on Mason Github Issues regarding sub-packages:

williamboman/mason.nvim#392

Someone also posted a workaround snippet, but haven't figured out yet how that exactly works.

[gitaarik]

Ok, figured it out, without using absolute paths.

I'm adding this now as a custom plugin to my setup:

function run_command(command)
  local handle = io.popen(command)
  local result = handle:read("a")
  handle:close()
  vim.notify("Command: \n\n" .. command .. "\nResult:" .. result)
end

function prettier_plugin_svelte_install()
  local prettier_node_modules = vim.fn.resolve(
    vim.fn.stdpath("data") ..
    "/mason/packages/prettier/node_modules/"
  )
  run_command("cd " .. prettier_node_modules .. " && npm install prettier-plugin-svelte")
end

vim.api.nvim_create_user_command("MasonExtraInstall", prettier_plugin_svelte_install, {})

Then I can install prettier-plugin-svelte with the :MasonExtraInstall command, and configure it in conform.nvim like this:

local prettier_svelte = vim.fn.resolve(
  vim.fn.stdpath("data") ..
  "/mason/packages/prettier/node_modules/prettier-plugin-svelte/plugin.js"
)

require("conform").setup({
  lsp_fallback = true,

  formatters = {
    svelte_fmt = {
      command = "prettier",
      args = { "--plugin", prettier_svelte, "$FILENAME" },
    },
  },

  formatters_by_ft = {
    svelte = { "svelte_fmt" },
  }
})

[gitaarik]

I do notice something different with this formatter. If you haven't saved the file and run the formatter, it will use the currently saved contents and format that. So any changes you made would disappear. This even happens when using format_on_save.

So that's a bit tricky. You always need to first safe the file before you do the formatting. Do you also have this behavior @siduck?

[siduck]

@gitaarik yes

[gitaarik]

@siduck aha ok, are you not bothered by this behavior? Do you have any idea how to resolve it?

[siduck]

@siduck aha ok, are you not bothered by this behavior? Do you have any idea how to resolve it?

if we set auto_save in conform then that would be a good workaround. Or if conform allows us to use a function in cmd in we could run the write command and return prettier string

Being months since i worked on svelte so didnt look into this much!

[gitaarik]

Ok, I fixed it :). The trick was to add --stdin-filepath before $FILENAME. I'm now also importing the original svelte formatter and then overriding that. Then it will also work on windows and read prettier config files (I guess).

And this also fixes that it works on unsaved files, just like a regular formatter

function prettier_svelte_formatter()
  local plugin_path = vim.fn.resolve(
    vim.fn.stdpath("data")
      .. "/mason/packages/prettier/node_modules/prettier-plugin-svelte/plugin.js"
  )

  local formatter = require("conform.formatters.prettier")
  formatter.args = {
    "--plugin",
    plugin_path,
    "--stdin-filepath",
    "$FILENAME",
  }

  return formatter
end

require("conform").setup({
  lsp_fallback = true,

  formatters = {
    prettier_svelte = prettier_svelte_formatter(),
  },

  formatters_by_ft = {
    svelte = { "prettier_svelte" },
  },
})

[siduck]

@gitaarik thanks! i'll add this to my config too :))

[siduck]

@gitaarik i now use deno fmt, no hassle and so fast man!

[gitaarik]

Ok, instead of prettier you mean? For svelte files?

[siduck]

Ok, instead of prettier you mean? For svelte files?

yep, deno fmt by default supports svelte. no plugin needed!