Trouble Formatting docker-compose.yaml in VS Code with Docker Extension

Question

I'm experiencing an issue with formatting my docker-compose.yaml file in Visual Studio Code, and I'm looking for some guidance.

I have installed the Docker extension from this link. When I open a docker-compose.yaml file, the language type is automatically recognized as Compose. Despite my efforts, I can't seem to invoke any formatting extensions. Here's my current setting:

"[dockercompose]": {
  "editor.defaultFormatter": "redhat.vscode-yaml",
  "editor.formatOnSave": true,
}

I've also tried:

"[dockercompose]": {
  "editor.defaultFormatter": "ms-azuretools.vscode-docker",
  "editor.formatOnSave": true,
}

However, I keep receiving the message: "No formatter installed for dockercompose files." I can only format the file when I change the language type to YAML. How can I configure VS Code to format docker-compose.yaml files without changing the language type? Any advice or solutions would be greatly appreciated.

Answer 1

You can try downloading form Open VSX if you are using vscode fork here is sample settings.json open using

(Open the Command Palette by pressing Ctrl+Shift+P (on Windows/Linux) or Cmd+Shift+P (on macOS). Type Preferences: Open User Settings (JSON) and select the corresponding command. This will open your global user settings.json file.)

{
  "redhat.telemetry.enabled": false,
  // this must be explicitly set to true in your settings.json file or
  // the auto-deduplication logic will programmatically set the value to
  // false if it detects that Red Hat's YAML extension is installed
  "docker.extension.enableComposeLanguageServer": true,
  "yaml.schemas": {
    "/Users/vidyesh/.vscode/extensions/continue.continue-1.0.20-darwin-arm64/config-yaml-schema.json": [
      ".continue/**/*.yaml"
    ],
    // this tells Red Hat's YAML extension to consider Compose YAML
    // files as not having a schema so it will stop suggesting code
    // completion items, hover tooltips, and so on
    "https://raw.githubusercontent.com/docker/vscode-extension/6a88caada42b57090df7ce91ec2a6561b422afe1/misc/empty.json": ["compose*y*ml", "docker-compose*y*ml"]
  },
  "geminicodeassist.project": "climbing-circlet-61kwv",
  "svelte.enable-ts-plugin": true,
  "files.autoSave": "afterDelay",
  "[typescriptreact]": {
    // "editor.defaultFormatter": "esbenp.prettier-vscode"
    "editor.defaultFormatter": "oxc.oxc-vscode"
  },
  "[dockercompose]": {
    "editor.insertSpaces": true,
    "editor.tabSize": 2,
    "editor.autoIndent": "advanced",
    "editor.quickSuggestions": {
      "other": true,
      "comments": false,
      "strings": true
    },
    "editor.defaultFormatter": "redhat.vscode-yaml"
  },
  "[github-actions-workflow]": {
    "editor.defaultFormatter": "redhat.vscode-yaml"
  },
  "[css]": {
    // "editor.defaultFormatter": "esbenp.prettier-vscode"
    "editor.defaultFormatter": "oxc.oxc-vscode"
  },
  "[svelte]": {
    // "editor.defaultFormatter": "esbenp.prettier-vscode"
    "editor.defaultFormatter": "oxc.oxc-vscode"
  },
  "geminicodeassist.displayInlineContextHint": true,
  "git.autofetch": true,
  "python.languageServer": "Default",
  "workbench.colorTheme": "Default Dark+",
  "explorer.fileNesting.patterns": {
    "*.ts": "${capture}.js",
    "*.js": "${capture}.js.map, ${capture}.min.js, ${capture}.d.ts",
    "*.jsx": "${capture}.js",
    "*.tsx": "${capture}.ts",
    "tsconfig.json": "tsconfig.*.json",
    "package.json": "package-lock.json, yarn.lock, pnpm-lock.yaml, bun.lockb, bun.lock",
    "*.sqlite": "${capture}.${extname}-*",
    "*.db": "${capture}.${extname}-*",
    "*.sqlite3": "${capture}.${extname}-*",
    "*.db3": "${capture}.${extname}-*",
    "*.sdb": "${capture}.${extname}-*",
    "*.s3db": "${capture}.${extname}-*"
  },
  "oxc.fmt.experimental": true,
  "oxc.typeAware": true
}