Since the 12.x updates, the Prettier output channel in VS Code attempts to render ANSI color codes. However, because the native VS Code Output panel does not interpret these escape sequences by default, the logs become cluttered with raw codes (like [31m[1m), making syntax errors extremely difficult to read.
This happens because the underlying Prettier instance detects the environment incorrectly and forces color output.
The output should display a clean, plain-text code frame pointing to the error, just like in version 11.x:
SyntaxError: Opening tag "liPunto" not terminated. (24:9)
22 | <li>Punto 1</li>
23 | <li>Punto 2</li>
> 24 | <liPunto 2</li>
| ^^^^^^^^^^
["ERROR" - 16:46:40] Opening tag "liPunto" not terminated. (23:11)
�[0m �[90m 21 |�[39m �[33m<�[39m�[33mli�[39m�[33m>�[39mPunto 1�[33m<�[39m�[33m/�[39m�[33mli�[39m�[33m>�[39m
�[90m 22 |�[39m �[33m<�[39m�[33mli�[39m�[33m>�[39mPunto 2�[33m<�[39m�[33m/�[39m�[33mli�[39m�[33m>�[39m
�[31m�[1m>�[22m�[39m�[90m 23 |�[39m �[33m<�[39m�[33mliPunto�[39m �[37m�[41m�[1m2�[22m�[49m�[39m�[33m<�[39m�[33m/�[39m�[33mli�[39m�[33m>�[39m
["INFO" - 17:07:56] Formatting untitled:Untitled-1
["INFO" - 17:07:56] EditorConfig support is enabled, checking for .editorconfig files
["INFO" - 17:07:56] No local configuration (i.e. .prettierrc or .editorconfig) detected, will fall back to VS Code configuration
["INFO" - 17:07:56] PrettierInstance:
{
"__debug": {
"mockable": {
"mocked": {},
"implementations": {}
}
},
"__internal": {
"errors": {},
"optionCategories": {
"CATEGORY_CONFIG": "Config",
"CATEGORY_EDITOR": "Editor",
"CATEGORY_FORMAT": "Format",
"CATEGORY_GLOBAL": "Global",
"CATEGORY_OTHER": "Other",
"CATEGORY_OUTPUT": "Output",
"CATEGORY_SPECIAL": "Special"
},
"formatOptionsHiddenDefaults": {
"astFormat": "estree",
"printer": {},
"locStart": null,
"locEnd": null,
"getVisitorKeys": null
},
"vnopts": {
"apiDescriptor": {}
},
"picocolors": {
"isColorSupported": true
},
"utilities": {}
},
"doc": {
"builders": {
"line": {
"type": "line"
},
"softline": {
"type": "line",
"soft": true
},
"hardline": [
{
"type": "line",
"hard": true
},
{
"type": "break-parent"
}
],
"literalline": [
{
"type": "line",
"hard": true,
"literal": true
},
{
"type": "break-parent"
}
],
"lineSuffixBoundary": {
"type": "line-suffix-boundary"
},
"cursor": {
"type": "cursor"
},
"breakParent": {
"type": "break-parent"
},
"trim": {
"type": "trim"
},
"hardlineWithoutBreakParent": {
"type": "line",
"hard": true
},
"literallineWithoutBreakParent": {
"type": "line",
"hard": true,
"literal": true
}
},
"default": {
"builders": {
"line": {
"type": "line"
},
"softline": {
"type": "line",
"soft": true
},
"hardline": [
{
"type": "line",
"hard": true
},
{
"type": "break-parent"
}
],
"literalline": [
{
"type": "line",
"hard": true,
"literal": true
},
{
"type": "break-parent"
}
],
"lineSuffixBoundary": {
"type": "line-suffix-boundary"
},
"cursor": {
"type": "cursor"
},
"breakParent": {
"type": "break-parent"
},
"trim": {
"type": "trim"
},
"hardlineWithoutBreakParent": {
"type": "line",
"hard": true
},
"literallineWithoutBreakParent": {
"type": "line",
"hard": true,
"literal": true
}
},
"printer": {},
"utils": {}
},
"printer": {},
"utils": {}
},
"util": {},
"version": "3.7.4"
}
["WARN" - 17:07:57] Unable to resolve ignore path: .prettierignore for Untitled-1
["INFO" - 17:07:57] Resolved plugins:
[]
["WARN" - 17:07:57] Parser not inferred, trying VS Code language.
["INFO" - 17:07:57] Using VS Code configuration
["INFO" - 17:07:57] Prettier Options:
{
"arrowParens": "always",
"bracketSpacing": true,
"endOfLine": "lf",
"htmlWhitespaceSensitivity": "css",
"insertPragma": false,
"singleAttributePerLine": false,
"bracketSameLine": false,
"jsxBracketSameLine": false,
"jsxSingleQuote": false,
"printWidth": 80,
"proseWrap": "preserve",
"quoteProps": "as-needed",
"requirePragma": false,
"semi": true,
"singleQuote": false,
"tabWidth": 2,
"trailingComma": "all",
"useTabs": false,
"embeddedLanguageFormatting": "auto",
"vueIndentScriptAndStyle": false,
"experimentalTernaries": false,
"objectWrap": "preserve",
"experimentalOperatorPosition": "end",
"filepath": "Untitled-1",
"parser": "html"
}
["ERROR" - 17:07:57] Error formatting document.
["ERROR" - 17:07:57] Opening tag "liPunto" not terminated. (24:9)
�[0m �[90m 22 |�[39m �[33m<�[39m�[33mli�[39m�[33m>�[39mPunto 1�[33m<�[39m�[33m/�[39m�[33mli�[39m�[33m>�[39m
�[90m 23 |�[39m �[33m<�[39m�[33mli�[39m�[33m>�[39mPunto 2�[33m<�[39m�[33m/�[39m�[33mli�[39m�[33m>�[39m
�[31m�[1m>�[22m�[39m�[90m 24 |�[39m �[33m<�[39m�[33mliPunto�[39m �[37m�[41m�[1m2�[22m�[49m�[39m�[33m<�[39m�[33m/�[39m�[33mli�[39m�[33m>�[39m
�[90m |�[39m �[31m�[1m^�[22m�[39m�[31m�[1m^�[22m�[39m�[31m�[1m^�[22m�[39m�[31m�[1m^�[22m�[39m�[31m�[1m^�[22m�[39m�[31m�[1m^�[22m�[39m�[31m�[1m^�[22m�[39m�[31m�[1m^�[22m�[39m�[31m�[1m^�[22m�[39m�[31m�[1m^�[22m�[39m
�[90m 25 |�[39m �[33m<�[39m�[33mli�[39m�[33m>�[39m�[33m<�[39m�[33m/�[39m�[33mli�[39m�[33m>�[39m
�[90m 26 |�[39m �[33m<�[39m�[33mli�[39m�[33m>�[39mPunto 3�[33m<�[39m�[33m/�[39m�[33mli�[39m�[33m>�[39m
�[90m 27 |�[39m �[33m<�[39m�[33m/�[39m�[33mul�[39m�[33m>�[39m�[0m
SyntaxError: Opening tag "liPunto" not terminated. (24:9)
�[0m �[90m 22 |�[39m �[33m<�[39m�[33mli�[39m�[33m>�[39mPunto 1�[33m<�[39m�[33m/�[39m�[33mli�[39m�[33m>�[39m
�[90m 23 |�[39m �[33m<�[39m�[33mli�[39m�[33m>�[39mPunto 2�[33m<�[39m�[33m/�[39m�[33mli�[39m�[33m>�[39m
�[31m�[1m>�[22m�[39m�[90m 24 |�[39m �[33m<�[39m�[33mliPunto�[39m �[37m�[41m�[1m2�[22m�[49m�[39m�[33m<�[39m�[33m/�[39m�[33mli�[39m�[33m>�[39m
�[90m |�[39m �[31m�[1m^�[22m�[39m�[31m�[1m^�[22m�[39m�[31m�[1m^�[22m�[39m�[31m�[1m^�[22m�[39m�[31m�[1m^�[22m�[39m�[31m�[1m^�[22m�[39m�[31m�[1m^�[22m�[39m�[31m�[1m^�[22m�[39m�[31m�[1m^�[22m�[39m�[31m�[1m^�[22m�[39m
�[90m 25 |�[39m �[33m<�[39m�[33mli�[39m�[33m>�[39m�[33m<�[39m�[33m/�[39m�[33mli�[39m�[33m>�[39m
�[90m 26 |�[39m �[33m<�[39m�[33mli�[39m�[33m>�[39mPunto 3�[33m<�[39m�[33m/�[39m�[33mli�[39m�[33m>�[39m
�[90m 27 |�[39m �[33m<�[39m�[33m/�[39m�[33mul�[39m�[33m>�[39m�[0m
at al (file:///c:/Users/gabeweb/.vscode/extensions/esbenp.prettier-vscode-12.4.0/node_modules/prettier/plugins/html.mjs:24:8634)
at jr (file:///c:/Users/gabeweb/.vscode/extensions/esbenp.prettier-vscode-12.4.0/node_modules/prettier/plugins/html.mjs:24:22609)
at Xr (file:///c:/Users/gabeweb/.vscode/extensions/esbenp.prettier-vscode-12.4.0/node_modules/prettier/plugins/html.mjs:24:21705)
at Kr (file:///c:/Users/gabeweb/.vscode/extensions/esbenp.prettier-vscode-12.4.0/node_modules/prettier/plugins/html.mjs:24:23222)
at Object.parse (file:///c:/Users/gabeweb/.vscode/extensions/esbenp.prettier-vscode-12.4.0/node_modules/prettier/plugins/html.mjs:24:23618)
at parse5 (file:///c:/Users/gabeweb/.vscode/extensions/esbenp.prettier-vscode-12.4.0/node_modules/prettier/index.mjs:16420:24)
at async coreFormat (file:///c:/Users/gabeweb/.vscode/extensions/esbenp.prettier-vscode-12.4.0/node_modules/prettier/index.mjs:16952:7)
at async formatWithCursor (file:///c:/Users/gabeweb/.vscode/extensions/esbenp.prettier-vscode-12.4.0/node_modules/prettier/index.mjs:17172:14)
at async Object.format2 (file:///c:/Users/gabeweb/.vscode/extensions/esbenp.prettier-vscode-12.4.0/node_modules/prettier/index.mjs:18730:25)
at async PrettierEditService.format (file:///c:/Users/gabeweb/.vscode/extensions/esbenp.prettier-vscode-12.4.0/dist/extension.js:3296:29)
at async PrettierEditProvider.provideEdits (file:///c:/Users/gabeweb/.vscode/extensions/esbenp.prettier-vscode-12.4.0/dist/extension.js:3167:20)
at async Vw.provideDocumentFormattingEdits (file:///c:/Users/gabeweb/AppData/Local/Programs/Microsoft%20VS%20Code/6a49527b96/resources/app/out/vs/workbench/api/node/extensionHostProcess.js:530:145851)
["INFO" - 17:07:57] Formatting completed in 121ms.
Preflight Checklist
Issue Summary
Since the 12.x updates, the Prettier output channel in VS Code attempts to render ANSI color codes. However, because the native VS Code Output panel does not interpret these escape sequences by default, the logs become cluttered with raw codes (like
[31m[1m), making syntax errors extremely difficult to read.Additional Context / Workaround
This happens because the underlying Prettier instance detects the environment incorrectly and forces color output.
Launching VS Code with the environment variable
NO_COLOR=1(orFORCE_COLOR=0) temporarily fixes the issue and restores the clean plain-text behavior. The extension should ideally strip ANSI codes or forceNO_COLORinternally when writing to the VS Code Output channel.Reproduction Repository
https://github.com/prettier/prettier-vscode
Steps to Reproduce
Install Prettier VS Code extension v12.4.0.
Introduce a syntax error in an HTML/JS file (e.g., an unclosed tag like
<li Punto 2</li>).Trigger formatting and open the Output panel, selecting Prettier from the dropdown.
Expected Behavior
The output should display a clean, plain-text code frame pointing to the error, just like in version 11.x:
Actual Behavior
The output is flooded with raw ANSI escape sequences and duplicate stack traces:
Operating System
Windows
IDE
VSCode
IDE Version
1.122.0
Prettier Extension Version
12.4.0
Prettier Version
3.7.4
Prettier Extension Logs
Prettier Configuration