Prettier-vscode: Ignore HTML and CSS

[jimniels]

I have the extension installed in my editor along with editor.formatOnSave but I'd like to be able to only run prettier on JS files. Is this possible? Is there some kind of configuration option that let's me say "format on save with prettier only when it's a .js file"?

[RobinMalfait]

That is already happening. Prettier does not format HTML do far. You can disable the css though in settings set prettier.cssEnable to an empty array.

If your HTML gets formatted that's probably by the default formatter or another formatter.

(Answered from phone so I don't know the exact setting line. It's available in the readme or in settings itself)

[CiGit]

What you can have is "format on save only when it's a javascript file"
https://code.visualstudio.com/docs/getstarted/settings#_language-specific-editor-settings

[jimniels]

I knew there had to be a way for configuring this. Thanks so much for helping me out!

---

Was able to resolve by turning off formatting for html files globally in vscode

// settings.json
{
  "[html]": {
      "editor.formatOnSave": false
    }
}

And on a project-by-project basis I turn off the CSS as I see fit (through a .vscode/settings.json file int the project root)

{
  "editor.formatOnSave": true,
  prettier.cssEnable: [""]
}

[marko911]

Is there any way to get this plugin to work inside script tags in html ? I'm trying to get it to play nice with prettier-eslint and I have the html plugin for eslint but I'm not getting any eslint highlighting for js code inside html .

[azz]

Did you try https://www.npmjs.com/package/eslint-plugin-script-tags?

[marko911]

@azz I looked into it but not sure what settings to configure in VS code to get it to work. So far nothing works for formatting inside HTML files. Kinda silly in my opinion.

[kurtommy]

this is the way to go

{
"editor.formatOnPaste": true,
"prettier.singleQuote": false,
"prettier.trailingComma": "none",
"prettier.disableLanguages": ["html"],
"editor.formatOnSave": true,
"editor.rulers": [110],
"html.format.wrapAttributes": "force",
"html.format.enable": true,
"html.format.wrapLineLength": 110
}
this will keep ts lint enabled while for html we use the standard vscode formatting

[sumudu-Jayasinghe]

"prettier.disableLanguages": ["html"], in settings.js works

[saiyaff]

I am trying to understand why the thumbs down for the "prettier.disableLanguages": ["html"], in settings config file. Is that a bad practice or what?

[gagle]

It works @saiyaff

[github-actions[bot]]

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.