Allow VS Code to "format document" when a file is marked as Azure Pipelines

[vtbassmatt]

I need to investigate what teaches VS Code how to format a doc. Is YAML a native thing, or is there something we could do in our extension to tell it that an Azure Pipelines file is also a YAML doc.

[mikeharder]

We would like to use this extension for syntax highlighting and autocomplete. However, this extension does not support "format document", and it's also incompatible with other extensions which do provide formatting (e.g. Prettier, YAML).

Since "format document" is more important for our workflow, we are currently unable to use this extension.

[vtbassmatt]

This doesn't look too big, we could do something like: https://github.com/adamvoss/vscode-yaml-languageservice/blob/master/src/services/yamlFormatter.ts

[dotnetcanuck]

I currently use Prettier to format Azure Pipelines YAML files. Installing this extension broke that functionality. Jury is still out on whether that's a dealbreaker for me or not, but it would have been nice if the two extensions were compatible.

At the very least, when you do add support for auto-formatting, please add the ability to customize the formatting options with a config file (e.g. JSON or something similar).

Thanks!

[vtbassmatt]

Sorry about that. Are you able to switch the file over to "YAML" temporarily, run Prettier, and then switch it back to Azure Pipelines?

Click "Azure Pipelines" in the lower right:

That'll pop up a menu in the command palette:

And you can choose YAML:

[dotnetcanuck]

@vtbassmatt That does work as a temporary solution. Thanks!

[jschwellnus92]

Any movement on this? It's a right pain in the ass constantly switching between YAML language mode for Prettier and Azure Pipelines language mode for the tooling.

[collinstevens]

Also a pain to deal with this. I tried to configure the default formatter for azure-pipelines, but it just spat out no formatter installed... Is this on a roadmap to resolve?

{
    "files.associations": {
        "**/pipelines/**/*.yml": "azure-pipelines",
    },
    "[azure-pipelines]": {
        "editor.defaultFormatter": "redhat.vscode-yaml"
    }
}

[adiun]

Yeah, it would be great to have this extension play nice with formatters like prettier.

For now I'm running the Prettier CLI as a VSCode task. You can run this through the command palette -> Run Task. Note the following works if you have a .prettierrc at workspace root. Otherwise just remove those args below.

tasks.json:

{
  "version": "2.0.0",
  "tasks": [
    {
      "label": "prettier",
      "type": "shell",
      "command": "prettier",
      "args": ["--config", "${workspaceFolder}/.prettierrc", "${file}", "--write"],
      "presentation": {
        "reveal": "silent"
      },
      "problemMatcher": [],
      "windows": {
        "options": {
          "shell": {
            "executable": "cmd.exe",
            "args": ["/d", "/c"]
          }
        }
      }
    }
  ]
}

You can also add a keybinding for this custom task or do something fancier with Prettier's watch capabilities.

I just loaded the VSCode prettier formatter extension and then hooked it up through settings.json

"[azure-pipelines]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
},

Then the "format on save" started working.

[vtbassmatt]

@mgexm does that also make Command Palette > Format Document work?

[dotnetcanuck]

@vtbassmatt Yes, it does!

I've had my own VSCode configured that way for a while...I don't know if I found the solution elsewhere or accidentally fixed it myself, but regardless, I didn't remember to post that in this thread. Sorry about that! :(