4

I'm using VsCode with Prettied Extension. Prettier in some cases is formatting inside the HTML element (I.g. Class value), which is annoying, because its breaking the property in multiple lines unnecessarily, Hence:

  1. I don't want to use “prettier-ignore” comments for every line in code because its tedious and

  2. I don't want to use .prettierignore file in root, because in my understanding it ignores the HTML files and also turn off vscode's default HTML formatter.

I want to allow prettier for all the languages except for HTML, so I put a file with the extension .prettierrc in project root with the content as following:

{
   "editor.defaultFormatter": "esbenp.prettier-vscode",
   "[html]": {
     "editor.defaultFormatter": null
   }
}

Now my question is:

  1. Can I use .prettierignore file in root, if so, will it disable vscode's HTML default formatter?

  2. Check my .prettierrc config file and let me know if its the right (or another) way.

eyllanesc
  • 235,170
  • 19
  • 170
  • 241
Tanvir
  • 1,642
  • 8
  • 32
  • 53

1 Answers1

3

A good workaround for your desired result would be to switch HTML formatting to the default vscode formatter and then leave everything else for Prettier. We can do that just by changing a value in our settings.json

You can press Ctrl + Shift + P in vscode to open the command pallete and search for open settings, you will find a setting called Preferences: Open Settings (JSON) or you can straight up go to C: -> Users -> UserName -> Roaming -> Code -> User and then open settings.json.

Then make sure to change/fill in these values:

"editor.defaultFormatter": "esbenp.prettier-vscode",
"[html]": {
    "editor.defaultFormatter": "vscode.html-language-features"
},

That way you don't need any prettier configuration files. I hope I helped.

Costa
  • 1,794
  • 1
  • 12
  • 21
  • but I said I dont want to format ONLY html with prettier, ur code will do just the opposite. In this case, my code seems to be more accurate. – Tanvir Jul 26 '21 at 08:20
  • No maybe you misunderstood me, what I mean is you will use vscode formatter for HTML. And you can use prettier for everything that is not HTML. My code sets the formatting for HTML to the default tool that vscode has. And sets the default formatting tool for every other language to Prettier. And your answer would be correct but you can't have null there because if you do that everytime you press format then vscode will ask you what tool you want to use.. it doesn't work that way. – Costa Jul 26 '21 at 08:28
  • ohhh Thank u bro, now I got u. I will try this and let u know, Thnks again – Tanvir Jul 26 '21 at 15:02
  • I made a settings.json file right in my project, should I put the code there? or there's settings.json another file in "C:\Users\MyUser\AppData\Roaming\Code\User", which one? Secondly, if I want to make more lagnguage exception (like HTML), how to do that? – Tanvir Jul 26 '21 at 15:09
  • There is another file in C:\Users\MyUser\AppData\Roaming\Code\User where I say MyUser you put your user because I don't know your pc username. Once you open the file, you just add what I have in the end of the document, you keep whatever is inside. And if you want to make another exception just copy paste the last 3 lines of the code and replace html with another language. – Costa Jul 27 '21 at 06:50