Is it possible to prevent Prettier Visual Studio Code extension from indenting the head and body HMTL elements?

Question

So, I've been using the deprecated Beautify formatting extension for VS Code for a while now, and recently decided to make the switch to Prettier. I've been struggling to find a solution to the indentation issue and I was wondering if it was even possible?

Prettier indents the as well as the , Beautify does not do this and it's the actual look I prefer. At the moment, the work around that I found was to just set Beautify as my formatter for HTML files, while using Prettier for everything else. Ideally, if I could do all of this with just one formatter it'd be great.

Prettier:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Title</title>
        <link rel="stylesheet" href="./style.css" />
    </head>
    <body>
        <p>Content</p>
    </body>
</html>

Beautify:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Title</title>
    <link rel="stylesheet" href="./style.css" />
</head>
<body>
    <p>Content</p>
</body>
</html>

My current editor settings are as follows:

"editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnPaste": true,
  "editor.formatOnSave": true,
  "editor.tabSize": 4,
  "prettier.arrowParens": "avoid",
  "prettier.singleQuote": true,
  "prettier.trailingComma": "none",
  "prettier.semi": false,
  "prettier.htmlWhitespaceSensitivity": "ignore",
  "[html]": {
    "editor.defaultFormatter": "HookyQR.beautify"
  },
  "html.format.extraLiners": " ",

Is it possible to prevent Prettier Visual Studio Code extension from indenting the head and body HMTL elements?

0 Answers0