How to use prettier's plugins option?

[srid]

Follow-up to #103

When using the prettier formatter, how do we actually use the plugins option?

With

programs.prettier.settings = {
  plugins = [ "prettier-plugin-tailwindcss" ];
};

(To use https://tailwindcss.com/blog/automatic-class-sorting-with-prettier)

I get:

[INFO]: Error using formatter #prettier:
• [STDOUT]:

• [STDERR]:
[error] Cannot find package 'prettier-plugin-tailwindcss' imported from /Users/srid/code/nix-browser/noop.js

[gkze]

You'd need to install the NPM module yourself. Right now accessing/managing NPM modules from Nix/Nixpkgs isn't straightforward

[Mic92]

Does pluginSearchDirs has any effect at all? I couldn't find it in the upstream documentations. I packaged the plugin with npm2nix but it's not found by prettier:

    treefmt.programs.prettier.settings.plugins = [ "prettier-plugin-tailwindcss" ];
    treefmt.programs.prettier.settings.pluginSearchDirs = [
      "${self'.packages.prettier-plugin-tailwindcss}/lib"
    ];

[Mic92]

I got it working by specifying an absolute plugin path: https://git.clan.lol/clan/clan-core/src/commit/dbc0ae08c09a20b3921c663bee3356ff9d5ad7eb/formatter.nix#L15

[gkze]

Yeah it' not pretty (no pun intended lol) but that works... hopefully once NPM <=> Nix improves it will be more straightforward

[multivac61]

@Mic92 Is this still the recommended way? Looks like the absolutely plugin path hack has been removed from HEAD: https://git.clan.lol/clan/clan-core/src/branch/main/formatter.nix

[jukremer]

What is currently the best method to use a plugin that's in nixpkgs?

prettier = {
  enable = true;
  settings = {
    plugins = [ "${pkgs.prettier-plugin-go-template}" ];
    overrides = {
      files = [ "*.html" ];
      options.parser = "go-template";
    };
  };
};

Would this work? Do I need to specify the path further? Do I have to add the package separately?

[Mic92]

@Mic92 Is this still the recommended way? Looks like the absolutely plugin path hack has been removed from HEAD: https://git.clan.lol/clan/clan-core/src/branch/main/formatter.nix

I don't actually don't know, we currently don't need prettier.

[gkze]

When I got this working I installed the plugins via the devShell's packages and specified their names in the prettier config

[jukremer]

Does pluginSearchDirs has any effect at all?

Prettier removed the pluginSearchDirs option so that is probably why it's not working.

[Toby222]

How do you set plugin options? e.g. @prettier/plugin-xml has the option xmlWhitespaceSensitivity, but you can't set it in settings because it does not exist.

[jukremer]

Finally got it working, had to update the plugin which is in nixpkgs.

{ pkgs, ... }:
{
  projectRootFile = "flake.nix";
  programs = {
    nixfmt.enable = true;
    gofmt.enable = true;
    taplo.enable = true;
    prettier = {
      enable = true;
      settings = {
        plugins = [
          "${pkgs.prettier-plugin-go-template}/lib/node_modules/prettier-plugin-go-template/lib/index.js"
        ];
        overrides = [
          {
            files = [ "*.html" ];
            options.parser = "go-template";
          }
        ];
      };
    };
  };
  settings.global.excludes = [
    "public/**"
    "static/**"
  ];
}

[silky]

@jukremer interestingly your approach did not work for me with prettier-plugin-sort-imports; which in fact has broken prettier on 24.11 ; I get an error like:

[error] Cannot find package '@trivago/prettier-plugin-sort-imports' imported from .../noop.js

no matter how I configure the plugin.

(I have:

  programs.prettier.enable = true;
  settings.formatter.prettier = {
    plugins = [
      "${prettier-plugin-sort-imports}/lib/node_modules/@trivago/prettier-plugin-sort-imports/lib/src/index.js"
    ];
  ...
```)

[jukremer]

I think this approach only works for packages that are in nixpkgs.

[silky]

@jukremer why? I defined the package myself above; so it should be no different.