Cannot format code (has default formatter set to prettier)

[GabrielPedroza]

Summary

After I updated my MacBook (regular software update and xcode (never seen before but updated it as well)), my format stopped working as intended from my settings.json. Ex: I originally had 4 as Tab Width and now I only have 2 so I switched it and it doesn't work. I have no idea how to replicate or reproduce this issue.

VS Code Version:

Version: 1.57.1 (Universal) Commit: 507ce72a4466fbb27b715c3722558bb15afa9f48 Date: 2021-06-17T13:28:32.912Z Electron: 12.0.7 Chrome: 89.0.4389.128 Node.js: 14.16.0 V8: 8.9.255.25-electron.0 OS: Darwin arm64 21.4.0

Prettier Extension Version: v8.1.0 (latest version as of this issue post)

OS and version: MacOS v12.3.1 (latest version aswell)

Prettier Log Output

["INFO" - 7:38:34 PM] Extension Name: esbenp.prettier-vscode.
["INFO" - 7:38:34 PM] Extension Version: 8.1.0.
["DEBUG" - 7:38:34 PM] Using bundled version of prettier.
["DEBUG" - 7:38:34 PM] Enabling Prettier globally
{
  "languageSelector": [
    {
      "language": "javascript",
      "scheme": "file"
    },
    {
      "language": "mongo",
      "scheme": "file"
    },
    {
      "language": "javascriptreact",
      "scheme": "file"
    },
    {
      "language": "typescript",
      "scheme": "file"
    },
    {
      "language": "typescriptreact",
      "scheme": "file"
    },
    {
      "language": "json",
      "scheme": "file"
    },
    {
      "language": "jsonc",
      "scheme": "file"
    },
    {
      "language": "json5",
      "scheme": "file"
    },
    {
      "language": "css",
      "scheme": "file"
    },
    {
      "language": "postcss",
      "scheme": "file"
    },
    {
      "language": "less",
      "scheme": "file"
    },
    {
      "language": "scss",
      "scheme": "file"
    },
    {
      "language": "handlebars",
      "scheme": "file"
    },
    {
      "language": "graphql",
      "scheme": "file"
    },
    {
      "language": "markdown",
      "scheme": "file"
    },
    {
      "language": "mdx",
      "scheme": "file"
    },
    {
      "language": "html",
      "scheme": "file"
    },
    {
      "language": "vue",
      "scheme": "file"
    },
    {
      "language": "yaml",
      "scheme": "file"
    },
    {
      "language": "ansible",
      "scheme": "file"
    },
    {
      "language": "home-assistant",
      "scheme": "file"
    },
    {
      "language": "javascript",
      "scheme": "untitled"
    },
    {
      "language": "mongo",
      "scheme": "untitled"
    },
    {
      "language": "javascriptreact",
      "scheme": "untitled"
    },
    {
      "language": "typescript",
      "scheme": "untitled"
    },
    {
      "language": "typescriptreact",
      "scheme": "untitled"
    },
    {
      "language": "json",
      "scheme": "untitled"
    },
    {
      "language": "jsonc",
      "scheme": "untitled"
    },
    {
      "language": "json5",
      "scheme": "untitled"
    },
    {
      "language": "css",
      "scheme": "untitled"
    },
    {
      "language": "postcss",
      "scheme": "untitled"
    },
    {
      "language": "less",
      "scheme": "untitled"
    },
    {
      "language": "scss",
      "scheme": "untitled"
    },
    {
      "language": "handlebars",
      "scheme": "untitled"
    },
    {
      "language": "graphql",
      "scheme": "untitled"
    },
    {
      "language": "markdown",
      "scheme": "untitled"
    },
    {
      "language": "mdx",
      "scheme": "untitled"
    },
    {
      "language": "html",
      "scheme": "untitled"
    },
    {
      "language": "vue",
      "scheme": "untitled"
    },
    {
      "language": "yaml",
      "scheme": "untitled"
    },
    {
      "language": "ansible",
      "scheme": "untitled"
    },
    {
      "language": "home-assistant",
      "scheme": "untitled"
    },
    {
      "language": "jsonc",
      "scheme": "vscode-userdata"
    }
  ],
  "rangeLanguageSelector": [
    {
      "language": "javascript",
      "scheme": "file"
    },
    {
      "language": "javascriptreact",
      "scheme": "file"
    },
    {
      "language": "typescript",
      "scheme": "file"
    },
    {
      "language": "typescriptreact",
      "scheme": "file"
    },
    {
      "language": "json",
      "scheme": "file"
    },
    {
      "language": "graphql",
      "scheme": "file"
    },
    {
      "language": "javascript",
      "scheme": "untitled"
    },
    {
      "language": "javascriptreact",
      "scheme": "untitled"
    },
    {
      "language": "typescript",
      "scheme": "untitled"
    },
    {
      "language": "typescriptreact",
      "scheme": "untitled"
    },
    {
      "language": "json",
      "scheme": "untitled"
    },
    {
      "language": "graphql",
      "scheme": "untitled"
    }
  ]
}
["DEBUG" - 7:38:34 PM] Enabling Prettier for Workspace /Users/gabrielpedroza/Code/Projects/OP-Graphics
{
  "languageSelector": [
    {
      "pattern": "/Users/gabrielpedroza/Code/Projects/OP-Graphics/**/*.{js,_js,bones,cjs,es,es6,frag,gs,jake,jsb,jscad,jsfl,jsm,jss,mjs,njs,pac,sjs,ssjs,xsjs,xsjslib,wxs,js.flow,jsx,ts,tsx,json,avsc,geojson,gltf,har,ice,JSON-tmLanguage,mcmeta,tfstate,tfstate.backup,topojson,webapp,webmanifest,yy,yyp,jsonc,sublime-build,sublime-commands,sublime-completions,sublime-keymap,sublime-macro,sublime-menu,sublime-mousemap,sublime-project,sublime-settings,sublime-theme,sublime-workspace,sublime_metrics,sublime_session,json5,css,wxss,pcss,postcss,less,scss,handlebars,hbs,graphql,gql,graphqls,md,markdown,mdown,mdwn,mkd,mkdn,mkdown,ronn,scd,workbook,mdx,component.html,html,htm,html.hl,inc,xht,xhtml,mjml,vue,yml,mir,reek,rviz,sublime-syntax,syntax,yaml,yaml-tmlanguage,yaml.sed,yml.mysql}",
      "scheme": "file"
    },
    {
      "language": "javascript",
      "scheme": "file"
    },
    {
      "language": "mongo",
      "scheme": "file"
    },
    {
      "language": "javascriptreact",
      "scheme": "file"
    },
    {
      "language": "typescript",
      "scheme": "file"
    },
    {
      "language": "typescriptreact",
      "scheme": "file"
    },
    {
      "language": "json",
      "scheme": "file"
    },
    {
      "language": "jsonc",
      "scheme": "file"
    },
    {
      "language": "json5",
      "scheme": "file"
    },
    {
      "language": "css",
      "scheme": "file"
    },
    {
      "language": "postcss",
      "scheme": "file"
    },
    {
      "language": "less",
      "scheme": "file"
    },
    {
      "language": "scss",
      "scheme": "file"
    },
    {
      "language": "handlebars",
      "scheme": "file"
    },
    {
      "language": "graphql",
      "scheme": "file"
    },
    {
      "language": "markdown",
      "scheme": "file"
    },
    {
      "language": "mdx",
      "scheme": "file"
    },
    {
      "language": "html",
      "scheme": "file"
    },
    {
      "language": "vue",
      "scheme": "file"
    },
    {
      "language": "yaml",
      "scheme": "file"
    },
    {
      "language": "ansible",
      "scheme": "file"
    },
    {
      "language": "home-assistant",
      "scheme": "file"
    },
    {
      "language": "javascript",
      "scheme": "untitled"
    },
    {
      "language": "mongo",
      "scheme": "untitled"
    },
    {
      "language": "javascriptreact",
      "scheme": "untitled"
    },
    {
      "language": "typescript",
      "scheme": "untitled"
    },
    {
      "language": "typescriptreact",
      "scheme": "untitled"
    },
    {
      "language": "json",
      "scheme": "untitled"
    },
    {
      "language": "jsonc",
      "scheme": "untitled"
    },
    {
      "language": "json5",
      "scheme": "untitled"
    },
    {
      "language": "css",
      "scheme": "untitled"
    },
    {
      "language": "postcss",
      "scheme": "untitled"
    },
    {
      "language": "less",
      "scheme": "untitled"
    },
    {
      "language": "scss",
      "scheme": "untitled"
    },
    {
      "language": "handlebars",
      "scheme": "untitled"
    },
    {
      "language": "graphql",
      "scheme": "untitled"
    },
    {
      "language": "markdown",
      "scheme": "untitled"
    },
    {
      "language": "mdx",
      "scheme": "untitled"
    },
    {
      "language": "html",
      "scheme": "untitled"
    },
    {
      "language": "vue",
      "scheme": "untitled"
    },
    {
      "language": "yaml",
      "scheme": "untitled"
    },
    {
      "language": "ansible",
      "scheme": "untitled"
    },
    {
      "language": "home-assistant",
      "scheme": "untitled"
    },
    {
      "language": "jsonc",
      "scheme": "vscode-userdata"
    }
  ],
  "rangeLanguageSelector": [
    {
      "language": "javascript",
      "scheme": "file"
    },
    {
      "language": "javascriptreact",
      "scheme": "file"
    },
    {
      "language": "typescript",
      "scheme": "file"
    },
    {
      "language": "typescriptreact",
      "scheme": "file"
    },
    {
      "language": "json",
      "scheme": "file"
    },
    {
      "language": "graphql",
      "scheme": "file"
    },
    {
      "language": "javascript",
      "scheme": "untitled"
    },
    {
      "language": "javascriptreact",
      "scheme": "untitled"
    },
    {
      "language": "typescript",
      "scheme": "untitled"
    },
    {
      "language": "typescriptreact",
      "scheme": "untitled"
    },
    {
      "language": "json",
      "scheme": "untitled"
    },
    {
      "language": "graphql",
      "scheme": "untitled"
    }
  ]
}
["INFO" - 7:38:36 PM] Formatting /Users/gabrielpedroza/Code/Projects/OP-Graphics/src/App.tsx
["INFO" - 7:38:36 PM] Using config file at '/Users/gabrielpedroza/Code/.prettierrc.json'
["INFO" - 7:38:36 PM] Using ignore file (if present) at /Users/gabrielpedroza/Code/Projects/OP-Graphics/.prettierignore
["DEBUG" - 7:38:36 PM] Using bundled version of prettier.
["INFO" - 7:38:36 PM] File Info:
{
  "ignored": false,
  "inferredParser": "typescript"
}
["INFO" - 7:38:36 PM] Detected local configuration (i.e. .prettierrc or .editorconfig), VS Code configuration will not be used
["INFO" - 7:38:36 PM] Prettier Options:
{
  "filepath": "/Users/gabrielpedroza/Code/Projects/OP-Graphics/src/App.tsx",
  "parser": "typescript",
  "singleQuote": true,
  "trailingComma": "all",
  "printWidth": 80
}
["INFO" - 7:38:36 PM] Formatting completed in 60.350084ms.
["INFO" - 7:39:55 PM] Formatting /Users/gabrielpedroza/Library/Application Support/Code/User/settings.json
["DEBUG" - 7:39:55 PM] Using bundled version of prettier.
["INFO" - 7:39:55 PM] File Info:
{
  "ignored": false,
  "inferredParser": "json"
}
["INFO" - 7:39:55 PM] No local configuration (i.e. .prettierrc or .editorconfig) detected, falling back to VS Code configuration
["INFO" - 7:39:55 PM] Prettier Options:
{
  "arrowParens": "always",
  "bracketSpacing": true,
  "endOfLine": "lf",
  "htmlWhitespaceSensitivity": "css",
  "insertPragma": false,
  "jsxBracketSameLine": true,
  "jsxSingleQuote": true,
  "printWidth": 80,
  "proseWrap": "preserve",
  "quoteProps": "as-needed",
  "requirePragma": false,
  "semi": false,
  "singleQuote": false,
  "tabWidth": 4,
  "trailingComma": "es5",
  "useTabs": true,
  "vueIndentScriptAndStyle": false,
  "filepath": "/Users/gabrielpedroza/Library/Application Support/Code/User/settings.json",
  "parser": "json"
}
["INFO" - 7:39:55 PM] Formatting completed in 29.175625ms.

**settings.json

{
    "liveServer.settings.donotShowInfoMsg": true,
    "editor.cursorBlinking": "expand",
    "workbench.startupEditor": "none",
    "editor.autoClosingBrackets": "always",
    "editor.autoClosingDelete": "always",
    "editor.autoClosingOvertype": "always",
    "[javascript]": {
        "editor.autoClosingBrackets": "always"
    },
    "editor.formatOnSave": true,
    "terminal.integrated.defaultProfile.osx": "zsh",
    "workbench.iconTheme": "eq-material-theme-icons-palenight",
    "cSpell.userWords": [
        "Mipmaps",
        "Phong",
        "Toon",
        "cineon",
        "clearcoat",
        "drei",
        "frameloop",
        "glsl",
        "glslify",
        "gltf",
        "gsap",
        "jenga",
        "lerp",
        "loader",
        "mapping",
        "matcap",
        "matcaps",
        "mediump",
        "metalness",
        "minecraft",
        "msaa",
        "num",
        "o",
        "pass",
        "pedroza",
        "portfinder",
        "raycaster",
        "reinhard",
        "removebg",
        "rstr",
        "signin",
        "signup",
        "smaa",
        "t",
        "tone",
        "webgl",
        "wireframe",
        "xlarge"
    ],
    "explorer.confirmDelete": false,
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "git.enableSmartCommit": true,
    "explorer.confirmDragAndDrop": false,
    "liveSassCompile.settings.autoprefix": [],
    "liveSassCompile.settings.formats": [
        {
            "format": "expanded",
            "extensionName": ".css",
            "savePath": "/dist/css"
        }
    ],
    "json.maxItemsComputed": 2500,
    "prettier.jsxBracketSameLine": true,
    "prettier.jsxSingleQuote": true,
    "prettier.enableDebugLogs": true,
    "javascript.updateImportsOnFileMove.enabled": "always",
    "editor.largeFileOptimizations": false,
    "editor.inlineSuggest.enabled": true,
    "github.copilot.enable": {
        "*": true,
        "yaml": false,
        "plaintext": true,
        "markdown": true
    },
    "bracket-pair-colorizer-2.depreciation-notice": false,
    "files.autoSave": "afterDelay",
    "workbench.editorAssociations": {
        "*.ipynb": "jupyter-notebook"
    },
    "notebook.cellToolbarLocation": {
        "default": "right",
        "jupyter-notebook": "left"
    },
    "editor.inlayHints.fontFamily": "monospace",
    "editor.fontSize": 12.5,
    "editor.fontLigatures": false,
    "workbench.colorTheme": "Material Theme Ocean High Contrast",
    "prettier.tabWidth": 4,
    "prettier.useTabs": true,
    "prettier.semi": false,
    "editor.formatOnPaste": true,
    "gitlens.hovers.detailsMarkdownFormat": "${avatar}  __${author}__, ${ago}${' via 'pullRequest}   _(${date})_ ${message}${commands}${---footnotes}",
    "editor.codeActionsOnSave": null
}

[GabrielPedroza]

I tried stack overtflowing it, https://stackoverflow.com/questions/52586965/why-does-prettier-not-format-code-in-vs-code, but this didn't help since I already had it already. I also tried closing vs code and reopening it and that didn't work neither.

[fregante]

For me it's silently failing because the version this extension uses is too old for this TypeScript syntax:

SyntaxError: ';' expected. (101:12)
   99 |
  100 | class SkipElement extends Error {
> 101 |   override name = "SkipElement";
      |            ^
  102 | }
  103 |

Prettier supports this format correctly (I use it via pre-commit) but the extension fails.

@prettier can you make errors loud? It's not the first time the extension frustratingly fails with zero feedback, there should be a notification.

[bandinopla]

had a similar issue, solved it following this: https://stackoverflow.com/a/58669550/18693152

[GabrielPedroza]

had a similar issue, solved it following this: https://stackoverflow.com/a/58669550/18693152

I tried doing that as well and the stack overflow post seems very similar to the one I posted initially but still didn't solve it. If you or anyone runs into this and solves it in a different way, please let me know. Thanks anyway for the link

[franzmongin]

Please got the same problem, tried everything, prettier extension just stopped working in my vscode ..

[ntotten]

can you make errors loud? It's not the first time the extension frustratingly fails with zero feedback, there should be a notification.

We used to have this behavior and it was insanely annoying. Errors are shown in the bottom bar in VS Code.

[github-actions[bot]]

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.