Add code action to format with prettier in codeActionsOnSave in VS Code

[bhajneet]

Originally posted by @rohit-gohri in https://github.com/prettier/prettier-vscode/issues/1277#issuecomment-621175180 is a working solution for running prettier before eslint.

The above solution runs the default formatter (which can be set to Prettier) then uses the code action for eslint afterwards.

There is already one example of a code action to create a config file in this extension.

Could a code action be added for formatting? Such that if a user were to hit ctrl+shift+p in VS Code it would show something like "Prettier: Format Document"

Here are examples from Microsoft

[rohit-gohri]

This would be great as my current workaround hangs a little when working on bigger projects.

[J3m5]

Please, can we have this feature ? This would solve the prettier / eslint conflict as from March 2020 we can have order actions on save https://github.com/microsoft/vscode/pull/92681

See related API: https://code.visualstudio.com/api/references/vscode-api#CodeActionProvider

[jtanner]

I'm using https://marketplace.visualstudio.com/items?itemName=rohit-gohri.format-code-action to work around this in the meantime.

[J3m5]

@jtanner This is what I've been using too for a while and it's working well.

[bietkul]

Is there any update on this issue?

[bhajneet]

Currently, this issue has the most thumbs-up emojis:

https://github.com/prettier/prettier-vscode/issues?q=is%3Aissue+is%3Aopen+sort%3Areactions-%2B1-desc

If @ntotten or any other developer of the project could please share their thoughts on this request, then others in this thread can appreciate a two way conversation

[ntotten]

I'm not going to work on this any time soon, but happy to accept a PR.

[roottool]

@bhajneet I have an one question. Which an action do you want?

1. CodeAction such as Prettier: Create Configuration File
2. CodeActionsOnSave such as source.fixAll.eslint

I have a feeling you are requesting about 1, but I have a feeling the commenters are requesting about 2. I want 2 too.

BTW, a code action like "Prettier: Format Document" exists in this extension. It is "Format Document (Forced)". https://github.com/prettier/prettier-vscode/blob/991a53f27df9f6d2abc782d8065512310c120983/package.nls.json#L3

[J3m5]

@roottool What you are mentioning is the definition of the command exposed on the command palette. For exposing actions for the CodeActionsOnSave option, the plugin needs to provide a Code Action by using the CodeAction API, and especially a CodeActionKind of type "source"

Base kind for source actions: source

Source code actions apply to the entire file. They must be explicitly requested and will not show in the normal lightbulb menu. Source actions can be run on save using editor.codeActionsOnSave and are also shown in the source context menu.

[roottool]

Thank you for teaching me! I was able to create PR for this issue by your comment.

[silentcloud]

Mark up