search

prettier / prettier-vscode

Visual Studio Code extension for Prettier
https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode
MIT License
5.04k stars 446 forks source link

Add plugin support #757

Closed esamattis closed 4 years ago

esamattis commented 5 years ago

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 commented 5 years ago

Nice work!

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

esamattis commented 5 years ago

Yeah. It should support all prettier plugins.

esamattis commented 5 years ago

I tried to add global plugin support here

https://github.com/epeli/prettier-vscode/commit/7ed1576a123b86df5fa9df1d3b29dbd7207666b1

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 commented 5 years ago

Found a workaround https://github.com/epeli/prettier-vscode/commit/dff3734460af8eef5aee18bb129315bd6249ede5

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 commented 5 years ago

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 commented 5 years ago

Does it work with a local installation?

Frederick888 commented 5 years ago

@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 commented 5 years ago

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 commented 5 years ago

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

Tested under macOS and Linux, same results

Southclaws commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

@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 commented 5 years ago

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

esamattis commented 5 years ago

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

esamattis commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

@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 commented 5 years ago

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 commented 5 years ago

@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 commented 5 years ago

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 commented 5 years ago

@CiGit does #817 handle your concerns?

khuongduybui commented 5 years ago

How soon can we use this please?

enriched commented 5 years ago

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

khuongduybui commented 5 years ago

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 commented 5 years ago

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 commented 5 years ago

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 commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

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

Janther commented 4 years ago

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

matzkoh commented 4 years ago

https://github.com/prettier/prettier-vscode/blob/4570b5dc4d47697decfb5f5145ada3c62268d72a/src/PrettierEditProvider.ts#L196

Editing this line fixes #878.

{ ...fileOptions, filepath: fileName },
ntotten commented 4 years ago

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