prettier-vscode
prettier-vscode copied to clipboard
prettier
Option to use VSCode language instead of prettier resolved language
Summary
When formatting a file that has extension of A but it is actually language B (and selected as so in Vs Code), prettier still formats it as language A and errors out.
Steps To Reproduce:
- Create a simle HTML file:
<!doctype html>
<html>
<head>
<title>Example Domain</title>
<meta charset="utf-8" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<body>
<div>
<h1>Example Domain</h1>
<p>This domain is for use in illustrative examples in documents. You may use this
domain in literature without prior coordination or asking for permission.</p>
<p><a href="https://www.iana.org/domains/example">More information...</a></p>
</div>
</body>
</html>
Save it to html.json.
- Open it in VS Code.
- Click the "JSON" on the right side of the status bar to activate "change language mode" option (or just use
ctrl+shift+Pthen search "language mode"), and choose HTML. - Right click the doc content area -> Format Document With... -> Prettier.
Expected result
Prettier formats the document as HTML.
Actual result
Prettier extension errors out because it ignores the Language Mode and still tries to format it as JSON.
You can see it clearly in the log because it says "parser": "json".
Additional information
VS Code Version:
Version: 1.104.0-insider (user setup) Commit: 5d24d0fea3ffc65b824989dda916714a46ca97a7 Date: 2025-08-19T05:03:18.690Z Electron: 37.2.3 ElectronBuildId: 12035395 Chromium: 138.0.7204.100 Node.js: 22.17.0 V8: 13.8.500258-electron.0 OS: Windows_NT x64 10.0.19045
Prettier Extension Version: 11.0.0
OS and version: Windows 10 x64
Prettier Log Output
["INFO" - 11:39:48 AM] Extension Name: esbenp.prettier-vscode.
["INFO" - 11:39:48 AM] Extension Version: 11.0.0.
["INFO" - 11:39:56 AM] Formatting file:///c%3A/files/codtest/html.json
["INFO" - 11:39:56 AM] PrettierInstance:
{
"doc": {
"builders": {
"line": {
"type": "line"
},
"softline": {
"type": "line",
"soft": true
},
"hardline": {
"type": "concat",
"parts": [
{
"type": "line",
"hard": true
},
{
"type": "break-parent"
}
]
},
"literalline": {
"type": "concat",
"parts": [
{
"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": {},
"debug": {}
},
"version": "2.8.8",
"util": {},
"__internal": {
"errors": {},
"coreOptions": {
"CATEGORY_CONFIG": "Config",
"CATEGORY_EDITOR": "Editor",
"CATEGORY_FORMAT": "Format",
"CATEGORY_OTHER": "Other",
"CATEGORY_OUTPUT": "Output",
"CATEGORY_GLOBAL": "Global",
"CATEGORY_SPECIAL": "Special",
"options": {
"cursorOffset": {
"since": "1.4.0",
"category": "Special",
"type": "int",
"default": -1,
"range": {
"start": -1,
"end": null,
"step": 1
},
"description": "Print (to stderr) where a cursor at the given position would move to after formatting.\nThis option cannot be used with --range-start and --range-end.",
"cliCategory": "Editor"
},
"endOfLine": {
"since": "1.15.0",
"category": "Global",
"type": "choice",
"default": [
{
"since": "1.15.0",
"value": "auto"
},
{
"since": "2.0.0",
"value": "lf"
}
],
"description": "Which end of line characters to apply.",
"choices": [
{
"value": "lf",
"description": "Line Feed only (\\n), common on Linux and macOS as well as inside git repos"
},
{
"value": "crlf",
"description": "Carriage Return + Line Feed characters (\\r\\n), common on Windows"
},
{
"value": "cr",
"description": "Carriage Return character only (\\r), used very rarely"
},
{
"value": "auto",
"description": "Maintain existing\n(mixed values within one file are normalised by looking at what's used after the first line)"
}
]
},
"filepath": {
"since": "1.4.0",
"category": "Special",
"type": "path",
"description": "Specify the input filepath. This will be used to do parser inference.",
"cliName": "stdin-filepath",
"cliCategory": "Other",
"cliDescription": "Path to the file to pretend that stdin comes from."
},
"insertPragma": {
"since": "1.8.0",
"category": "Special",
"type": "boolean",
"default": false,
"description": "Insert @format pragma into file's first docblock comment.",
"cliCategory": "Other"
},
"parser": {
"since": "0.0.10",
"category": "Global",
"type": "choice",
"default": [
{
"since": "0.0.10",
"value": "babylon"
},
{
"since": "1.13.0"
}
],
"description": "Which parser to use.",
"choices": [
{
"value": "flow",
"description": "Flow"
},
{
"value": "babel",
"since": "1.16.0",
"description": "JavaScript"
},
{
"value": "babel-flow",
"since": "1.16.0",
"description": "Flow"
},
{
"value": "babel-ts",
"since": "2.0.0",
"description": "TypeScript"
},
{
"value": "typescript",
"since": "1.4.0",
"description": "TypeScript"
},
{
"value": "acorn",
"since": "2.6.0",
"description": "JavaScript"
},
{
"value": "espree",
"since": "2.2.0",
"description": "JavaScript"
},
{
"value": "meriyah",
"since": "2.2.0",
"description": "JavaScript"
},
{
"value": "css",
"since": "1.7.1",
"description": "CSS"
},
{
"value": "less",
"since": "1.7.1",
"description": "Less"
},
{
"value": "scss",
"since": "1.7.1",
"description": "SCSS"
},
{
"value": "json",
"since": "1.5.0",
"description": "JSON"
},
{
"value": "json5",
"since": "1.13.0",
"description": "JSON5"
},
{
"value": "json-stringify",
"since": "1.13.0",
"description": "JSON.stringify"
},
{
"value": "graphql",
"since": "1.5.0",
"description": "GraphQL"
},
{
"value": "markdown",
"since": "1.8.0",
"description": "Markdown"
},
{
"value": "mdx",
"since": "1.15.0",
"description": "MDX"
},
{
"value": "vue",
"since": "1.10.0",
"description": "Vue"
},
{
"value": "yaml",
"since": "1.14.0",
"description": "YAML"
},
{
"value": "glimmer",
"since": "2.3.0",
"description": "Ember / Handlebars"
},
{
"value": "html",
"since": "1.15.0",
"description": "HTML"
},
{
"value": "angular",
"since": "1.15.0",
"description": "Angular"
},
{
"value": "lwc",
"since": "1.17.0",
"description": "Lightning Web Components"
}
]
},
"plugins": {
"since": "1.10.0",
"type": "path",
"array": true,
"default": [
{
"value": []
}
],
"category": "Global",
"description": "Add a plugin. Multiple plugins can be passed as separate `--plugin`s.",
"cliName": "plugin",
"cliCategory": "Config"
},
"pluginSearchDirs": {
"since": "1.13.0",
"type": "path",
"array": true,
"default": [
{
"value": []
}
],
"category": "Global",
"description": "Custom directory that contains prettier plugins in node_modules subdirectory.\nOverrides default behavior when plugins are searched relatively to the location of Prettier.\nMultiple values are accepted.",
"cliName": "plugin-search-dir",
"cliCategory": "Config"
},
"printWidth": {
"since": "0.0.0",
"category": "Global",
"type": "int",
"default": 80,
"description": "The line length where Prettier will try wrap.",
"range": {
"start": 0,
"end": null,
"step": 1
}
},
"rangeEnd": {
"since": "1.4.0",
"category": "Special",
"type": "int",
"default": null,
"range": {
"start": 0,
"end": null,
"step": 1
},
"description": "Format code ending at a given character offset (exclusive).\nThe range will extend forwards to the end of the selected statement.\nThis option cannot be used with --cursor-offset.",
"cliCategory": "Editor"
},
"rangeStart": {
"since": "1.4.0",
"category": "Special",
"type": "int",
"default": 0,
"range": {
"start": 0,
"end": null,
"step": 1
},
"description": "Format code starting at a given character offset.\nThe range will extend backwards to the start of the first line containing the selected statement.\nThis option cannot be used with --cursor-offset.",
"cliCategory": "Editor"
},
"requirePragma": {
"since": "1.7.0",
"category": "Special",
"type": "boolean",
"default": false,
"description": "Require either '@prettier' or '@format' to be present in the file's first docblock comment\nin order for it to be formatted.",
"cliCategory": "Other"
},
"tabWidth": {
"type": "int",
"category": "Global",
"default": 2,
"description": "Number of spaces per indentation level.",
"range": {
"start": 0,
"end": null,
"step": 1
}
},
"useTabs": {
"since": "1.0.0",
"category": "Global",
"type": "boolean",
"default": false,
"description": "Indent with tabs instead of spaces."
},
"embeddedLanguageFormatting": {
"since": "2.1.0",
"category": "Global",
"type": "choice",
"default": [
{
"since": "2.1.0",
"value": "auto"
}
],
"description": "Control how Prettier formats quoted code embedded in the file.",
"choices": [
{
"value": "auto",
"description": "Format embedded code if Prettier can automatically identify it."
},
{
"value": "off",
"description": "Never automatically format embedded code."
}
]
}
}
},
"optionsModule": {
"hiddenDefaults": {
"astFormat": "estree",
"printer": {},
"locStart": null,
"locEnd": null
}
},
"optionsNormalizer": {},
"utils": {}
},
"__debug": {}
}
["INFO" - 11:39:56 AM] Using ignore file (if present) at c:\files\codtest\.prettierignore
["INFO" - 11:39:56 AM] File Info:
{
"ignored": false,
"inferredParser": "json"
}
["INFO" - 11:39:56 AM] No local configuration (i.e. .prettierrc or .editorconfig) detected, falling back to VS Code configuration
["INFO" - 11:39:56 AM] 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": "es5",
"useTabs": false,
"embeddedLanguageFormatting": "auto",
"vueIndentScriptAndStyle": false,
"experimentalTernaries": false,
"filepath": "c:\\files\\codtest\\html.json",
"parser": "json"
}
["ERROR" - 11:39:56 AM] Error formatting document.
["ERROR" - 11:39:56 AM] Unexpected token (2:1)
1 |
> 2 | <!doctype html>
| ^
3 | <html>
4 | <head>
5 | <title>Example Domain</title>
SyntaxError: Unexpected token (2:1)
1 |
> 2 | <!doctype html>
| ^
3 | <html>
4 | <head>
5 | <title>Example Domain</title>
at p (c:\Users\ikena\.vscode-insiders\extensions\esbenp.prettier-vscode-11.0.0\node_modules\prettier\parser-babel.js:22:1054)
at d (c:\Users\ikena\.vscode-insiders\extensions\esbenp.prettier-vscode-11.0.0\node_modules\prettier\parser-babel.js:22:1287)
at Object.parse (c:\Users\ikena\.vscode-insiders\extensions\esbenp.prettier-vscode-11.0.0\node_modules\prettier\parser-babel.js:29:51283)
at Object.parse (c:\Users\ikena\.vscode-insiders\extensions\esbenp.prettier-vscode-11.0.0\node_modules\prettier\index.js:7515:23)
at coreFormat (c:\Users\ikena\.vscode-insiders\extensions\esbenp.prettier-vscode-11.0.0\node_modules\prettier\index.js:8829:18)
at formatWithCursor2 (c:\Users\ikena\.vscode-insiders\extensions\esbenp.prettier-vscode-11.0.0\node_modules\prettier\index.js:9021:18)
at c:\Users\ikena\.vscode-insiders\extensions\esbenp.prettier-vscode-11.0.0\node_modules\prettier\index.js:38183:12
at Object.format (c:\Users\ikena\.vscode-insiders\extensions\esbenp.prettier-vscode-11.0.0\node_modules\prettier\index.js:38197:12)
at t.default.format (c:\Users\ikena\.vscode-insiders\extensions\esbenp.prettier-vscode-11.0.0\dist\extension.js:1:16369)
at t.PrettierEditProvider.provideEdits (c:\Users\ikena\.vscode-insiders\extensions\esbenp.prettier-vscode-11.0.0\dist\extension.js:1:12927)
at oD.provideDocumentFormattingEdits (file:///c:/Users/ikena/AppData/Local/Programs/Microsoft%20VS%20Code%20Insiders/resources/app/out/vs/workbench/api/node/extensionHostProcess.js:140:137286)
["INFO" - 11:39:56 AM] Formatting completed in 38ms.
This appears to be an issue with one of the recent updates/installers. I am also seeing this issue after allowing my Insiders install to update to latest. My setup originally had the context menu entries enabled, but after an update in the last week, they are gone.
Appears to be fixed now in the newest Insider update. My context menu options are back.
Visual Studio Code - Insiders
Version: 1.100.0-insider (system setup)
Commit: f56819db693dba84feb3716e278b5be0a7378633
Date: 2025-04-17T05:10:42.956Z (15 hrs ago)
Electron: 34.4.1
ElectronBuildId: 11317338
Chromium: 132.0.6834.210
Node.js: 20.18.3
V8: 13.2.152.41-electron.0
OS: Windows_NT x64 10.0.22631
"Open with Code - Insiders" in context menu on Windows 10 still missing here
Version: 1.103.0-insider Commit: f5db653369bc87e56162be11ed3af62746347558 Date: 2025-07-28T12:38:35.309Z Browser: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Code-Insiders/1.103.0-insider Chrome/138.0.7204.100 Electron/37.2.3 Safari/537.36
"Open with Code - Insiders" in context menu still missing on my Windows 10 after uninstall and reinstall
Version: 1.104.0-insider (user setup)
Commit: a61e381bfa71c241738e48f2fc8b01eade94c91d
Date: 2025-08-14T20:20:09.764Z
Electron: 37.2.3
ElectronBuildId: 12035395
Chromium: 138.0.7204.100
Node.js: 22.17.0
V8: 13.8.500258-electron.0
OS: Windows_NT x64 10.0.19045
It's a little tricky here I some how restored the context menu with editing the registry with a file
But after the insiders version auto updates and restarts the context menu gone again 😆
Version: 1.104.0-insider (user setup) Commit: 0ab18bd00955d2a3d69eb66d8eea982b76a53780 Date: 2025-08-15T10:51:05.286Z Electron: 37.2.3 ElectronBuildId: 12035395 Chromium: 138.0.7204.100 Node.js: 22.17.0 V8: 13.8.500258-electron.0 OS: Windows_NT x64 10.0.19045
Looks like one of the newer Insider updates broke this again. My context menu entries are gone again now. :(
Does this issue repro with latest 1.107 insiders with user setup ?
- New context menu not showing for system setup in insiders is tracked in https://github.com/microsoft/vscode/issues/259505
- New context menu not showing for stable is tracked in https://github.com/microsoft/vscode/issues/204696
Does this issue repro with latest 1.107 insiders with user setup ?
1. New context menu not showing for system setup in insiders is tracked in [Context menu entries "Open with..." not available with insiders system setup #259505](https://github.com/microsoft/vscode/issues/259505) 2. New context menu not showing for stable is tracked in [[Meta] Enable windows 11 context menu by default in Stable #204696](https://github.com/microsoft/vscode/issues/204696)
Updated to latest Insiders this morning, the explorer/context menu options are still broken/missing.
Version: 1.108.0-insider (system setup)
Commit: f1db08ab87ec1108d0e3c2a20c7ffe5b8a55a23b
Date: 2025-12-10T18:27:57.535Z
Electron: 39.2.3
ElectronBuildId: 12895514
Chromium: 142.0.7444.175
Node.js: 22.21.1
V8: 14.2.231.21-electron.0
OS: Windows_NT x64 10.0.22631
@atom0s that would be the system setup, please follow https://github.com/microsoft/vscode/issues/259505 for updates