question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Different HTML formatting between prettier-cli and prettier-vscode

See original GitHub issue

I am using prettier-vscode 1.7.2 and prettier-cli 1.15.2. The following HTML code is formatted differently between prettier-cli and prettier-vscode.

<div class="details">
<span>{{ foo.bar }}</span>
</div>
<div class="details">
<span>aaaaaaaaaaaaa</span>
</div>

Prettier-vscode results in

<div class="details">
  <span>{{ foo.bar }}</span>
</div>
<div class="details"><span>aaaaaaaaaaaaa</span></div>

And prettier-cli results in

<div class="details"><span>{{ foo.bar }}</span></div>
<div class="details"><span>aaaaaaaaaaaaa</span></div>

The cause for this deviation in formatting seems to be how the template literal <span>{{ foo.bar }}</span> is handled.

The project where I am testing this has some vscode workspace settings:

{
  "editor.formatOnSave": true,
  "files.exclude": {
    "dist": true,
    "node_modules": true,
    "coverage": true,
  },
  "editor.codeActionsOnSave": {
    "source.organizeImports": true
  },
  "prettier.requireConfig": true,
  "versionlens.showVersionLensesAtStartup": false,
  // This should format HTML attributes properly (one attribute per line)
  "html.format.wrapAttributes": "force-aligned",
}

A config file for prettier

{
  "$schema": "http://json.schemastore.org/prettierrc",
  "singleQuote": true,
  "printWidth": 160,
  "trailingComma": "all"
}

And also an editorconfig file:

# Editor configuration, see http://editorconfig.org
root = true

[*]
charset = utf-8
indent_style = space
indent_size = 2
insert_final_newline = true
trim_trailing_whitespace = true

[*.md]
max_line_length = off
trim_trailing_whitespace = false

However, none of these settings seem to affect how template literals are formatted.

In order to use prettier-cli I defined the following scripts in package.json:

"prettier-list-files": "prettier -l \"src/**/*.{ts,scss,html}\"",
"prettier-format-and-overwrite-files": "prettier --write \"src/**/*.{ts,scss,html}\""

Except for Prettier - Code formatter and EditorConfig for VS Code no other formatting extensions are beeing used.

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Reactions:12
  • Comments:5 (1 by maintainers)

github_iconTop GitHub Comments

1reaction
jvikcommented, Mar 27, 2019

My bad. Vetur was using incorrect formatter.

0reactions
github-actions[bot]commented, Apr 12, 2020

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.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Prettier not formatting HTML files in VS Code - Stack Overflow
I have heard that Prettier has some issues formatting HTML at times, and VS Code itself already has HTML formatting support.
Read more >
VS Code - You don't need a formatting extension (Prettier and ...
VS Code has builtin formatters for HTML, JavaScript, TypeScript, and JSON. This is a decent basis for frontend developers and JavaScript- ...
Read more >
How to configure Prettier and VSCode - Gleb Bahmutov
I prefer to use two solutions described in this blog post: format the file from VSCode every time I save it.
Read more >
How To Format Code with Prettier in Visual Studio Code
In this article, you'll set up Prettier to automatically format your code in Visual Studio Code, also known as VS Code.
Read more >
Prettier - Code formatter - Visual Studio Marketplace
Prettier Formatter for Visual Studio Code. Prettier is an opinionated code formatter. It enforces a consistent style by parsing your code ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found