prettier Prettier is removing the doctype from handlebar files

Environments:

Prettier Version: 2.3.2
Running Prettier via: vscode extension
Runtime: Node.js v14.16.0
Operating System: Windows
Prettier plugins (if any): none

Steps to reproduce:

Original code:

<!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>Document</title>
</head>
<body>
  
</body>
</html>

Formatted code:

<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>Document</title>
  </head>
  <body>

  </body>
</html>

Expected behavior:

The <!DOCTYPE html> should be preserved unchanged.

Actual behavior:

The <!DOCTYPE html> is removed.

Jul 18 '21 02:07 paulsmithkc

I cannot reproduce this in playground. Can you reproduce in playground?

Prettier 2.3.2 Playground link

--parser html

Input:

<!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>Document</title>
</head>
<body>
  
</body>
</html>

Output:

<!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>Document</title>
  </head>
  <body></body>
</html>

Jul 18 '21 17:07 sosukesuzuki

This issue has been automatically closed because there has been no response to our request for more information from the original author. With only the information that is currently in the issue, we don't have enough information to take action. Please reach out if you have or find the answers we need so that we can investigate further.

Aug 01 '21 17:08 no-response[bot]

Sorry. This happened when formatting a .handlebars file. The file was located at /views/layouts/main.handlebars.

On further testing, it seems to be a problem .handlebars files, and not .html files. Still a critical bug.

Aug 04 '21 03:08 paulsmithkc

Thanks!

Prettier 2.3.2 Playground link

--parser glimmer

Input:

<!DOCTYPE html>
<html lang="en">
</html>

Output:

<html lang="en">
</html>

It seems a known issue in parser. https://github.com/glimmerjs/glimmer-vm/issues/870

Aug 04 '21 03:08 fisker

Seems still to be an issue after the official release of handlebars support and glimmerjs fixing the issue?

Feb 04 '22 06:02 Officialstrike

According to https://github.com/glimmerjs/glimmer-vm/issues/870, the issues have already been fixed in https://github.com/glimmerjs/glimmer-vm/pull/1305. However, I'm experiencing the same issues with v2.7.1.

Jul 03 '22 15:07 mwyschan

I found this issue on https://ovio.org/projects and would love to contribute!

Aug 08 '22 12:08 Chikanka

Go ahead!

Aug 08 '22 13:08 fisker

I tried to work on this, but it seems the doctype info still missing in AST.

> require('@glimmer/syntax').preprocess('<!DOCTYPE html>')
{
  type: 'Template',
  body: [],
  blockParams: [],
  loc: SourceSpan {
    data: HbsSpan {
      source: [Source],
      hbsPositions: [Object],
      kind: 'HbsPosition',
      _charPosSpan: null,
      _providedHbsLoc: [Object]
    },
    isInvisible: false
  }
}

Sep 08 '22 11:09 fisker

This happens to .astro files too.

Apr 14 '23 06:04 portfolioris

On, VS Code the following .prettierrc works

{
  "overrides": [
    {
      "files": "*.handlebars",
      "options": {
        "parser": "html"
      }
    }
  ]
}

Jul 03 '23 21:07 RohithCIS

On, VS Code the following .prettierrc works

Prettier does not depend on text editor.

I tested it on prettier v2.8.8 and it works. Thanks.

Here's my config in .prettierrc.toml:

overrides = [
  { files = "*.hbs", options = { parser = "html" } }
]

Jul 05 '23 21:07 Andrew15-5