Add plugin support

[esamattis]

Closes #395
Closes #612

It works by checking language support from each workspace that has a local Prettier installation and registers all supported languages as language formatters.

There's one caveat though. If you have multiple workspaces that have different prettier plugins installed you will get error message that a plugin is not installed if you try to format file in a workspace that does not have it installed but some other workspace has. I don't think there's a way around this because vscode registers formatters globally.

Prelease build from this PR: https://github.com/epeli/prettier-vscode/releases/download/1.8.103-prerelease/prettier-vscode-1.8.103-prerelease.vsix

Install with

code --install-extension prettier-vscode-1.8.103-prerelease.vsix

[wesleygrimes]

Nice work!

Would this in theory allow us .NET folks to format our C# code with the prettier-plugin-csharp installed?

[esamattis]

Yeah. It should support all prettier plugins.

[esamattis]

I tried to add global plugin support here

esamattis@7ed1576

But there's an issue in requiring the global prettier. I tried to use the requireg module but it does not seem to work inside vscode extension for some reason. Any ideas welcome.

Btw, I still think this PR is ready to merge. It's better than no plugin support and we can add the global plugin support in later PR. In fact I can open a draft PR from above commit for discussion immediately after this one merged.

[esamattis]

Found a workaround esamattis@dff3734

This PR now has a working plugin support using a global Prettier installation too. It prefers local one if it is found.

Here's a .vsix build for testing https://github.com/epeli/prettier-vscode/releases/download/global-plugins-support/prettier-vscode-1.8.99-prerelease.vsix

[Frederick888]

Thank you guys for putting effort into this function!

I'm having a little trouble with prettier-plugin-apex though... I've installed prettier and the apex plugin globally,

$ npm -g ls --depth 0 | grep prettier
├── prettier@1.16.4
├── prettier-plugin-apex@1.0.0-alpha.6

but vs code still tells me that

There is no document formatter for 'apex'-files installed.

Any ideas?

PS: I'm using the vsix uploaded by @epeli above.

Name: Prettier - Code formatter
Id: esbenp.prettier-vscode
Description: VS Code plugin for prettier/prettier
Version: 1.8.99-prerelease
Publisher: Esben Petersen
VS Marketplace Link: https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode

[esamattis]

Does it work with a local installation?

[Frederick888]

@epeli I'm afraid no... got the same error message from vs code

$ npm ls --depth 0
/path/to/project
├── prettier@1.16.4
└── prettier-plugin-apex@1.0.0-alpha.6

[esamattis]

Can you provide an example file that can be formatted using the CLI? I could not find even a working hello world example (no idea what's apex).

[Frederick888]

@epeli An example could be https://github.com/forcedotcom/sfdx-simple

Tested under macOS and Linux, same results

[Southclaws]

I can't seem to get this to work with global prettier + prettier-plugin-toml, are there any specific configuration parameters I need to set?

[esamattis]

So yeah, I got busted for using Windows at home. 🤦‍♂️ I have macbook at work and it's broken here indeed. My workaround for the requireg happens to be windows specific. I need to rethink this.

@Frederick888 But I tried hard coding the global node_modules paths and the apex formatter seems to work ok. I don't understand why it does not work locally for you though. It working fine for me. Do you have the johnaaronnelson.apex extension installed?

@Southclaws The TOML plugin seems to be incomplete. It does not implement vscodeLanguageIds in getSupportInfo().

[Frederick888]

@epeli No, I'm using https://marketplace.visualstudio.com/items?itemName=salesforce.salesforcedx-vscode from Salesforce. Is that extension required for Prettier to work?

[esamattis]

Some extension is required because vscode has to know about the file type. Wonder if that extension exposes the type under different id?

[esamattis]

Weird. It is working for me with the salesforce.salesforcedx-vscode extension too.

[esamattis]

Next attempt: This version is using npm root --quiet -g to find out the global node_modules directory. Tested only on macos for now 😬

https://github.com/epeli/prettier-vscode/releases/download/1.8.100-prerelease/prettier-vscode-1.8.100-prerelease.vsix

[esamattis]

Here's one more prerelease which displays an error message if a given plugin is missing vscodeLanguageIds support.

FYI: You can also open vscode developer tools to see more detailed logging of which prettier is being used.

https://github.com/epeli/prettier-vscode/releases/download/1.8.102-prerelease/prettier-vscode-1.8.102-prerelease.vsix

[Frederick888]

@epeli Just tested 1.8.102 under Linux and it worked like charm! Thanks, mate!

PS: Prettier and Apex plugin were installed globally, only salesforce.salesforcedx-vscode extension was installed.

[esamattis]

I added a 'Show Output Channel' command which displays the messages from the output channel. The used prettier instance is now logged to it.

Also I found it useful when using the alpha releases of the plugins because they might itself cause prettier to crash so now it is possible to see the error messages they produce.

I also tested the new requireg workaround on Windows too. So this should be now working on macOS, Windows and Linux.

Here's prerelease again

https://github.com/epeli/prettier-vscode/releases/download/1.8.103-prerelease/prettier-vscode-1.8.103-prerelease.vsix

[dhoulb]

@epeli Tested on MacOS and looks to be working great with @prettier/plugin-php (I have a 'catchall Prettier' installed several directories higher than I work in and it still works!).

Thanks for the great work.

[CiGit]

Hey, thanks for working on that.
I would highly prefer an option pointing to a prettier installation (defaulting to null) instead of the global resolution. This would allow more use cases and avoid us a dependency. (Like typescript extension does)
As for local installation, we could go through every workspace, and register a formatter with a workspace regex. Then we wouldn't search for prettier on each format call, but get the one from the workspace. Only trouble I see with this is with sub-workspace with different prettier installation.

Resolution:

1. Local, Warn and go to 2. if requiring fails - Would allow those Docker setup
2. Option if not null
3. Bundled

Anything which wouldn't be covered ?

[esamattis]

@CiGit does #817 handle your concerns?

[khuongduybui]

How soon can we use this please?

[enriched]

Installed locally and seems to be working fine with prettier-plugin-java

[khuongduybui]

Installed locally and seems to be working fine with prettier-plugin-java

Can you please tell me what I need to do to have it running?
I installed the vsix, then what?

[enriched]

I installed the plugin as a dev dependency in the project yarn add --dev --exact prettier prettier-plugin-java

then you need to set your settings to use the prettier for formatting your java files:

  "[java]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }

[khuongduybui]

I installed the plugin as a dev dependency in the project yarn add --dev --exact prettier prettier-plugin-java

then you need to set your settings to use the prettier for formatting your java files:

  "[java]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }

Thanks. I installed prettier prettier-plugin-ruby and set [ruby].editor.defaultFormatter like you said. It still says no formatter found for ruby files.
I'm using VSCode stable in Ubuntu btw.

[gnapse]

I installed prettier prettier-plugin-ruby and set [ruby].editor.defaultFormatter like you said. It still says no formatter found for ruby files.

Same here. Latest viscose and latest prettier and latest ruby plugin. I'm on macOS. I still get that there's no formatter for ruby files. All sources point to this PR as being the definitive solution.

Also, this workaround works indeed.

[Janther]

Hi,
I just made a PR to support prettier-vscode in our plugin.
It works with this PR 🎉
However the tabWidth: 4 is not respected.
It uses 2 (even when in the status bar says it's 4).

[nicosampler]

Installing the extension from this PR I was able to use the prettier-plugin-solidity.

[Janther]

@nicosampler did you have issues with the indentation being 2 spaces instead of 4 as I did?

[matzkoh]

prettier-vscode/src/PrettierEditProvider.ts

Line 196 in 4570b5d

fileOptions || {},

Editing this line fixes #878.

{ ...fileOptions, filepath: fileName },

[ntotten]

#817 solves this issue and provides tests so let's proceed with that PR to get this issue resolved.