Skip to content

Add prettier.forceFormatDocument to code actions #2500

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 4 commits into from
Closed
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions .vscode/settings.json
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
// Place your settings in this file to overwrite default and user settings.
{
"editor.codeActionsOnSave": {
"source.prettier.forceFormatDocument": true,
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is this a new recommended best practice from the VS Code team or just preference?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

No, it's not. I'm going to undo this difference if it is not necessary.

This difference has two intent.
First, The intent of this difference is to resolve #1277 by realizing the following quoted portion.

Originally posted by @rohit-gohri in #1277 (comment) 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.
#1555 (comment)

Second, it is for testing the created new code action in this PR.
The intention was to make it clear that I was testing through the code action.

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It looks like Microsoft's recommended settings

Although you can also use the formatter on save using the setting editor.formatOnSave it is recommended to use the editor.codeActionsOnSave feature since it allows for better configurability.

https://github.com/microsoft/vscode-eslint

"source.fixAll.eslint": true
},
"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": false,
"editor.formatOnType": false,
"files.eol": "\n",
"cSpell.words": [
Expand Down
1 change: 1 addition & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ All notable changes to the "prettier-vscode" extension will be documented in thi
- Search for ignore file in all containing workspace folders, not just innermost
- Fix wrong time unit in log.
- Allow formatting ranges in `jsonc` (JSON with Comments).
- Add `prettier.forceFormatDocument` to code actions

## [9.5.0]

Expand Down
35 changes: 35 additions & 0 deletions src/CodeActionOnSave.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
import {
CodeAction,
CodeActionKind,
type CodeActionProvider,
type ProviderResult,
} from "vscode";

const FORCE_FORMAT_DOCUMENT_COMMAND = "prettier.forceFormatDocument";
const FORCE_FORMAT_DOCUMENT_CODE_ACTION_KIND = CodeActionKind.Source.append(
FORCE_FORMAT_DOCUMENT_COMMAND
);
const FORCE_FORMAT_DOCUMENT_TITLE = "Format Document (Forced)";
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why is it forced?

Copy link
Contributor Author

@roottool roottool Jun 24, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Because this code action uses a command of the same name that exists in the command palette.
But I would be willing to adopt any better title. 👍
For example,

Suggested change
const FORCE_FORMAT_DOCUMENT_TITLE = "Format Document (Forced)";
const FORMAT_DOCUMENT_TITLE = "Prettier: Format Document";

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"
#1555 (comment)


export default class CodeActionOnSave implements CodeActionProvider {
public static readonly providedCodeActionKinds = [
FORCE_FORMAT_DOCUMENT_CODE_ACTION_KIND,
];

public provideCodeActions(): ProviderResult<CodeAction[]> {
const forceFormatDocumentAction = this.createForceFormatDocumentAction();
return [forceFormatDocumentAction];
}

private createForceFormatDocumentAction(): CodeAction {
const action = new CodeAction(
FORCE_FORMAT_DOCUMENT_TITLE,
FORCE_FORMAT_DOCUMENT_CODE_ACTION_KIND
);
action.command = {
command: FORCE_FORMAT_DOCUMENT_COMMAND,
title: FORCE_FORMAT_DOCUMENT_TITLE,
};
return action;
}
}
10 changes: 9 additions & 1 deletion src/extension.ts
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import { commands, ExtensionContext, workspace } from "vscode";
import { commands, ExtensionContext, languages, workspace } from "vscode";
import { createConfigFile } from "./commands";
import CodeActionOnSave from "./CodeActionOnSave";
import { LoggingService } from "./LoggingService";
import { ModuleResolver } from "./ModuleResolver";
import PrettierEditService from "./PrettierEditService";
Expand Down Expand Up @@ -75,4 +76,11 @@ export function activate(context: ExtensionContext) {
forceFormatDocumentCommand,
...editService.registerDisposables()
);

const forceFormatDocumentCodeActionProvider =
languages.registerCodeActionsProvider("*", new CodeActionOnSave(), {
providedCodeActionKinds: CodeActionOnSave.providedCodeActionKinds,
});

context.subscriptions.push(forceFormatDocumentCodeActionProvider);
}