How to format on save with the Deno VSCode extension?

Question

I am using the vscode-deno extension and eventhough I turned on deno.enable, deno.lint and deno.unstable in my vscode settings, it does not format my code on save, which I suppose is the expected behavior.

I instead used the RunOnSave extension to hack my way into running a deno fmt on file save, but I was wondering if there was a way to do that with the Deno extension alone?

My .vscode/settings.json:

{
  "deno.enable": true,
  "deno.lint": true,
  "deno.unstable": true,
  "emeraldwalk.runonsave": {
    "commands": [
      {
        "match": "\\.ts$",
        "cmd": "deno fmt ${file}"
      }
    ]
  }
}

Cabalism

Answer 1

Found it, I have to turn on formatting on save and specifying the Deno extension as the default formatter

{
  "deno.enable": true,
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "denoland.vscode-deno"
}

Cabalism

Worth mentioning you can set the default formatter to only touch ts files using this: "[typescript]": {"editor.defaultFormatter": "denoland.vscode-deno"} – Garpike

And maybe you want to nest format on save to typescript to avoid other file extensions get automatically formatted. Like so; js "[typescript]": { "editor.formatOnSave": true, "editor.defaultFormatter": "denoland.vscode-deno" } – Surakarta

To specify config options, add "deno.config": "./deno.jsonc", to settings.json, then add a deno.jsonc as per deno.land/[email protected]/getting_started/configuration_file – Lorentz

Answer 2

Just another addition which might scratch your head a little bit. It took me a couple of hours.

My settings.json:

{
  "licenser.license": "MPLv2",
  "editor.defaultFormatter": "denoland.vscode-deno",
  "editor.formatOnSave": true,
  "editor.formatOnSaveMode": "file",
  "editor.codeActionsOnSave": {
    "source.fixAll": "always",
    "source.organizeImports": "always",
  },
  "[typescript]": {
      "editor.defaultFormatter": "denoland.vscode-deno"
  },
  "[javascript]": {
      "editor.defaultFormatter": "denoland.vscode-deno"
  },
  "deno.enable": true,
  "deno.config": "./deno.jsonc",
}

My deno.jsonc:

{
  "compilerOptions": {
    "allowJs": false,
    "lib": ["deno.window"],
    "strict": true
  },
  "lint": {
    "include": ["src/"],
    "exclude": ["src/testdata/", "data/fixtures/**/*.ts"],
    "rules": {
      "tags": ["recommended"],
      "include": ["ban-untagged-todo"],
      "exclude": ["no-unused-vars"]
    }
  },
  "fmt": {
    "useTabs": false,
    "lineWidth": 80,
    "indentWidth": 2,
    "semiColons": true,
    "singleQuote": true,
    "proseWrap": "preserve",
    "include": ["src/", "main.ts"],
    "exclude": ["src/testdata/", "data/fixtures/**/*.ts"]
  },
  "lock": false,
  "nodeModulesDir": false,
  "test": {
    "include": ["src/"],
    "exclude": ["src/testdata/", "data/fixtures/**/*.ts"]
  },
  "tasks": {
    "start": "deno run main.ts"
  },
  "imports": {}
}

In your settings.json, the formatter works only when I add [typescript] part.

And also, check your fmt.include. I forgot to add main.ts into it.

Arsenopyrite