Different HTML formatting between prettier-cli and prettier-vscode
See original GitHub issueI 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:
- Created 5 years ago
- Reactions:12
- Comments:5 (1 by maintainers)
Top 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 >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
My bad. Vetur was using incorrect formatter.
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.