Prettier VSCode Not Consistent With CLI

[hamirmahal]

Discussed in #3227

^{Originally posted by MarvNC December 14, 2023}
I am using CLI 3.1.1 installed with npm globally. Meanwhile, my Prettier VSCode extension is v10.1.0.
I'd been mildly annoyed for a while at how it inserted random whitespaces between English and CJK text, but after doing some research I found out that this was fixed in the 3.0 release. After some debugging I found that using prettier --write . would not insert the random whitespaces, but the VSCode extension would.
What should I do to debug this? Is there a way to update the version of prettier used within the VSCode extension or force it to use the same globally installed version? Reading the FAQ on the extension page it seems it should be using 3.0.0 as the extension is past version 10.

Log

["INFO" - 3:21:29 PM] Extension Name: esbenp.prettier-vscode.
["INFO" - 3:21:29 PM] Extension Version: 10.1.0.
["INFO" - 3:21:31 PM] Formatting file:///h%3A/code/yomitan-dict-stats/readme.md
["INFO" - 3:21:31 PM] Using config file at 'h:\code\yomitan-dict-stats\.prettierrc'
["INFO" - 3:21:31 PM] 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" - 3:21:31 PM] Using ignore file (if present) at h:\code\yomitan-dict-stats\.prettierignore
["INFO" - 3:21:31 PM] File Info:
{
  "ignored": false,
  "inferredParser": "markdown"
}
["INFO" - 3:21:31 PM] Detected local configuration (i.e. .prettierrc or .editorconfig), VS Code configuration will not be used
["INFO" - 3:21:31 PM] Prettier Options:
{
  "filepath": "h:\\code\\yomitan-dict-stats\\readme.md",
  "parser": "markdown",
  "singleQuote": true,
  "proseWrap": "never"
}
["INFO" - 3:21:31 PM] Formatting completed in 199ms.

[custompro12]

I was having a similar issue. It seems to be fixed for me now after uninstalling the VS Code extension, restarting VS Code, and then installing it again. If you're using a remote container, make sure you uninstall it in the container as well as on your host.

[leppaott]

Restart extension host at least fixed it for me when updating Prettier. Saving tried to format Promise<void> into Promise

[ksbrar]

Restarting/reinstalling the vscode hasn't fixed the divergence for me. I'm on version 11.0.0 of the extension and version 3.3.3 of prettier CLI (used via npx).

With a minimal config, the consistent differences in formatting I've observed include:

• Prettier CLI inserts an extra tab for the latter part of ternary expressions in TypeScript, while VSCode does not.
• Prettier CLI enforces lowercase for HTML tags, while VSCode really wants to make doctype tags uppercase.

[dosolkowski-work]

I'm also experiencing some discrepancies, which seem to have appeared recently. In particular, the extension is removing trailing newlines from .json files even though Prettier CLI believes they should be present. I do have a .editorconfig file in the parent folder of my workspace folder that specifies insert_final_newline = false, but the Prettier docs specify this is not an EditorConfig option that is supported. I don't see a Prettier-native option to configure this, so I'm not sure how this could be happening. The prettier.useEditorConfig setting for this extension does not seem to make a difference for this behavior.

[ToMeHarris]

I'm also having issues where the plugin formats quite differently from the CLI. We use a fork of prettier, but it is still located in ./node_modules/prettier (I've tried putting that in manually as the prettier path in my vscode settings). I've verified that I am using the plugin and not the default formatter by doing Format Document With, and I don't have a prettier package installed globally in npm or have any other prettier packages/configs in my project directory.

[ToMeHarris]

Update: I figured out my issue. Turns out I needed to add "prettier": {} to my package.json. The logs for the plugin said that it couldn't find any prettier config in the project, so it was defaulting to the editor settings. This way, it's using the default behavior of my team's fork of prettier.

[ghost]

Also adding to this: a missing .prettierrc.json or prettier key in package.json yields unexpected behaviour. I expect the extension to behave the same when no config is given, compared to an empty config either inside package.json or .prettierrc.json.

[StefanBrand]

Setting prettierPath works for me, but mind that in a VSCode workspace the path might be different to .node_modules/prettier. In our case it is app/node_modules/prettier.

[github-actions]

This issue has been labeled as stale due to inactivity. Reply to keep this issue open.

[ssbarnea]

In fact this problem is a bit more general can be described as 'prettier extension not being able to find prettier executable in PATH'.

I am using mise to manage build dependencies and this takes care of versioning and installation itself, making the tools available on PATH, including vscode console. Still, prettier extension fails to find prettier and displays the message below on logs even for projects that do not use any package.json

Failed to load module. If you have prettier or plugins referenced in package.json, ensure you have run `npm install

While looking for package.json does makes sense, it should also look in path.

❯ which -a prettier
/Users/ssbarnea/.config/mise/installs/npm-prettier/3.5.3/bin/prettier

❯ ls -l /Users/ssbarnea/.config/mise/installs/npm-prettier/3.5.3/bin/prettier
/Users/ssbarnea/.config/mise/installs/npm-prettier/3.5.3/bin/prettier -> ../lib/node_modules/prettier/bin/prettier.cjs

Based on the documentation where only an alternative options to use global npm modules also exists I can only assume that the extension is unable to make use on prettier executable and can only use node modules. This add extra problems for multiple reasons, like node version incompatibles.

I was able to temporary force the extension to load prettier installed by mise by resolving the symlink and configuring /Users/ssbarnea/.config/mise/installs/npm-prettier/3.5.3/lib/node_modules/prettier as the path to prettier.

Still this comes at a high cost: if I update mise config to use a newer prettier it will break, so it will not be portable even between projects on the same machine.

We clearly need an option to allow extension to just use prettier executable from user PATH.