DEV Community

loading...

Disabling languages for Prettier (in VScode)

Zell Liew πŸ€—
Frontend consultant; teaching frontend to self-taught devs at http://zellwk.com. Currently attempting to demystify Javascript at http://learnjavascript.today.
Originally published at zellwk.com ・2 min read

It used to be straightforward to disable languages for Prettier in VSCode. You just added a prettier.disableLanguages setting and you were done.

// In settings.json
[
  "prettier.disableLanguages": [
    "javascript",
    "javascriptreact",
    "json",
    "markdown"
  ],
]
Enter fullscreen mode Exit fullscreen mode

Unfortunately, prettier.disableLanguages is deprecated so we can’t do this anymore. Here’s what we can do instead.

There are two methods.

  1. Enable Prettier in specific languages.
  2. Enable Prettier globally but disable it in specific languages.

Enabling Prettier in specific languages

The first option is to enable Prettier for specific languages you use. You can do this with the editor.defaultFormatter property. Here's an example where you enable it for CSS.

[
  "[css]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
]
Enter fullscreen mode Exit fullscreen mode

If you use this method, you need to enable Prettier for every language, which can be tedious.

[
  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[css]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[scss]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
]
Enter fullscreen mode Exit fullscreen mode

So I prefer to enable Prettier globally, but overwrite Prettier in specific languages.

Enabling Prettier Globally but disabling it in specific languages

We can enable Prettier globally with the editor.defaultFormatter property.

"editor.defaultFormatter": "esbenp.prettier-vscode",
Enter fullscreen mode Exit fullscreen mode

If you want to disable Prettier for a specific language, you can set the editor.defaultFormatter to null.

"editor.defaultFormatter": null;
Enter fullscreen mode Exit fullscreen mode

You can also choose to overwrite a specific formatter for a specific language. In the following example, I use Standard JS instead of Prettier for formatting JavaScript.

Note:
If you're using Standard for JavaScript, it's much easier to use the prettier-vscode-standard extension instead. I wrote about this in another article.

"[javascript]": {
    "editor.defaultFormatter": "chenxsan.vscode-standardjs"
},
Enter fullscreen mode Exit fullscreen mode

Thanks for reading. This article was originally posted on my blog. Sign up for my newsletter if you want more articles to help you become a better frontend developer.

Discussion (0)