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.

[mgexm]

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! :(

[vtbassmatt]

Awesome! I can easily add this to the README at least, and maybe it's a lead on how to incorporate document formatting back into the base extension.

[vtbassmatt]

Whoops, just realized that VS Code has no native formatting for YAML. I'll edit my edit to the README and then mark this issue closed, since it's not just a workaround - it's the way to get your formatter working again 😁

[ggirard07]

Looks like this workaround works with prettier, but not with the redhat one (redhat.vscode-yaml)

[axiac]

It seems that Prettier can be registered as a formatter for file type azure-pipelines while RedHat YAML and Kubernetes YAML Formatter (kennylong.kubernetes-yaml-formatter) cannot be registered.

But a search in VSCode extensions for category:formatters azure-pipelines lists only the "Azure Pipelines" extension that, in fact, does not do any formatting on the YAML files.

[hho]

When I set the file type to "Azure Pipelines", VS Code says no formatter for pipelines is installed (and as @axiac mentioned, the search then recommends this very extension again).

However, when I switch the file type to YAML, it says there are two formatters for YAML installed, ms-azure-devops.azure-pipelines and redhat.vscode-yaml.

So it seems this extension claims to format YAML, but not Azure Pipelines, but the store listing says otherwise? It's all very confusing, would be great if somebody could clean this up.

[winstliu]

@hho/@axiac, could you open a new issue for what you're seeing?

[hho]

@hho/@axiac, could you open a new issue for what you're seeing?

Done.