VSCode Dual Document Format (Prettier + ESLint)

keybindings.json

[
  {
    "key": "alt+cmd+l",
    "command": "-editor.action.formatDocument",
    "when": "config.workspaceKeybindings.dualDocumentFormat.enabled && editorHasDocumentFormattingProvider && editorTextFocus && !editorReadonly"
  },
  {
    "key": "alt+cmd+l",
    "command": "workbench.action.tasks.runTask",
    "args": "format-prettier-eslint",
    "when": "config.workspaceKeybindings.dualDocumentFormat.enabled && editorHasDocumentFormattingProvider && editorTextFocus && !editorReadonly"
  }
]

settings.json

{
  "workspaceKeybindings.dualDocumentFormat.enabled": true
}

tasks.json

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "format-prettier",
      "command": "${command:prettier.forceFormatDocument}"
    },
    {
      "label": "format-eslint",
      "command": "${command:eslint.executeAutofix}"
    },
    {
      "label": "format-prettier-eslint",
      "dependsOrder": "sequence",
      "dependsOn": ["format-prettier", "format-eslint"]
    }
  ]
}

VSCode Dual Document Format (Prettier + ESLint)

This config reformats the code first with Prettier, then with ESLint.

How does it work?

• The first of the two tasks in the tasks.json file formats the code with Prettier, and the second formats the code with ESLint. The third task runs the first two tasks sequentially.

• The first of the shortcuts in the keybindings.json file removes the normal format document shortcut, and the second assigns the third task mentioned above to the same shortcut. The config.workspaceKeybindings.dualDocumentFormat.enabled rule, which is the first of the rules found in the shortcuts, controls the state in which these shortcuts will work. Other rules are those that are already in this shortcut.

• When we add the config found in the settings.json file to the .vscode/settings.json file in the workspace we want, the dual format operation starts.