Bug: Not working in VS Code

[jaymakes11]

Info

Tool	Version
Plugin	v1.x.x (latest)
Prettier	v2.1.2
Prettier VS Code extension	v5.6.0
Node	v10.19.0
OS	mac

The issue

I can't seem to get this to work in VS Code (manually and on-save). When attempting to do so, VS Code shows "There is no formatter for 'jade' files installed." So it seems the issue is VS Code not having a formatter specified for Pug/Jade files... so, in my user/workspace settings I added:

"[jade]": {
   "editor.formatOnSave": true,
   "editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[pug]": {
   "editor.formatOnSave": true,
   "editor.defaultFormatter": "esbenp.prettier-vscode"
},

But this still does not work.

Any ideas?

[Shinigami92]

I'm working daily with my own plugin and it works fine in VS Code 🤔
So the problem must be something on your side 😟

• Have you tried a repo with clean installation of node_modules + reload vscode
• Also node_modules is on relative root and not a subdirectory in the opened working dir
• And did you check some extensions and disabled some of them
• Is CLI working? yarn prettier --write .
• Did you backup and reset your VS Code settings?

If you found any working solution, please let me and the community know with an answer 🙂

[jaymakes11]

Thanks @Shinigami92. Glad to hear there's hope 🙂

When you have a Pug file open, do you see the Prettier indicator (button) in the bottom right status bar?

To answer your questions (which are super useful in helping debug this on my end, thank you!):

Have you tried a repo with clean installation of node_modules + reload vscode

No, not yet. Will do so if need be.

Also node_modules is on relative root and not a subdirectory in the opened working dir

This could be the issue. I'm using PNPM for this particular project in a mono-repo fashion, but the relevant prettier and prettier-pug packages are in the root. Though, since it's working via the CLI i'm not sure this is the issue.

And did you check some extensions and disabled some of them

Yes, but I could dig more on this front.

Is CLI working? yarn prettier --write .

Yes (npx prettier --write index.pug).

Did you backup and reset your VS Code settings?

No, this is a good idea though. Will do if need be.

[Shinigami92]

I use these extensions:

```shell $ code --list-extensions adamvoss.vscode-languagetool adamvoss.vscode-languagetool-en alexkrechik.cucumberautocomplete antfu.i18n-ally argiolasriccardo90.regions-with-colors bierner.markdown-emoji bradymholt.pgformatter clinyong.vscode-css-modules codezombiech.gitignore CoenraadS.bracket-pair-colorizer-2 cssho.vscode-svgviewer dariofuzinato.vue-peek dbaeumer.vscode-eslint docsmsft.docs-markdown donjayamanne.githistory DotJoshJohnson.xml eamodio.gitlens EditorConfig.EditorConfig esbenp.prettier-vscode eyhn.vscode-vibrancy fwcd.kotlin GitHub.vscode-pull-request-github GitLab.gitlab-workflow GrapeCity.gc-excelviewer Gruntfuggly.todo-tree hbenl.vscode-test-explorer hollowtree.vue-snippets IBM.output-colorizer kavod-io.vscode-jest-test-adapter kumar-harsh.graphql-for-vscode lannonbr.vscode-js-annotations lucaslpsan.vuetify-pug-snippet MariusAlchimavicius.json-to-ts mathiasfrohlich.Kotlin mkxml.vscode-filesize mrmlnc.vscode-puglint ms-azuretools.vscode-docker ms-kubernetes-tools.vscode-kubernetes-tools ms-vsliveshare.vsliveshare nickdemayo.vscode-json-editor octref.vetur pflannery.vscode-versionlens ph-hawkins.arc-plus PKief.material-icon-theme pnp.polacode raymondcamden.languagetool redhat.java redhat.vscode-yaml shaharkazaz.git-merger SonarSource.sonarlint-vscode streetsidesoftware.code-spell-checker stylelint.vscode-stylelint Tobermory.es6-string-html VisualStudioExptTeam.vscodeintellicode vscjava.vscode-java-debug vscjava.vscode-java-dependency vscjava.vscode-java-pack vscjava.vscode-java-test vscjava.vscode-maven vscode-icons-team.vscode-icons wayou.vscode-todo-highlight wmaurer.change-case ```

[jaymakes11]

How about explicitly specifying a defaultFormatter for Pug/Jade, @Shinigami92?

i.e. Do you have anything like this in your JSON config?

"[jade]": {
   "editor.formatOnSave": true,
   "editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[pug]": {
   "editor.formatOnSave": true,
   "editor.defaultFormatter": "esbenp.prettier-vscode"
},

[Shinigami92]

My Settings:

```json { "[html]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "[java]": { "editor.formatOnSave": false, "editor.formatOnPaste": false, "editor.formatOnType": false }, "[javascript]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "[json]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "[jsonc]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "[markdown]": { "files.trimTrailingWhitespace": false }, "[typescript]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "breadcrumbs.enabled": true, "diffEditor.ignoreTrimWhitespace": false, "diffEditor.renderSideBySide": true, "editor.columnSelection": false, "editor.cursorBlinking": "phase", "editor.cursorSurroundingLines": 6, "editor.formatOnPaste": true, "editor.formatOnSave": true, "editor.renderWhitespace": "selection", "editor.rulers": [ { "column": 80, "color": "#80808053" }, { "column": 120, "color": "#8080809e" } ], "editor.semanticHighlighting.enabled": true, "editor.suggest.localityBonus": true, "editor.suggestSelection": "first", "extensions.ignoreRecommendations": false, "files.defaultLanguage": "markdown", "files.exclude": { "**/.classpath": true, "**/.project": true, "**/.settings": true, "**/.factorypath": true }, "files.insertFinalNewline": true, "files.trimFinalNewlines": true, "files.trimTrailingWhitespace": true, "git.autofetch": true, "git.enableSmartCommit": true, "gitlens.defaultDateFormat": "DD MMM YYYY, HH:mm:ss", "gitlens.views.repositories.files.layout": "tree", "html.format.endWithNewline": true, "html.format.extraLiners": "", "html.format.indentInnerHtml": true, "java.semanticHighlighting.enabled": true, "javascript.format.semicolons": "insert", "javascript.referencesCodeLens.enabled": true, "jsannotations.hideDiagnostics": true, "languageTool.language": "en-US", "markdown.showToolbar": true, "puglint.enable": true, "regionsWithColors.box": true, "sonarlint.connectedMode.connections.sonarqube": [ { "connectionId": "***", "serverUrl": "https://***", "token": "***" } ], "sonarlint.ls.javaHome": "/Library/Java/JavaVirtualMachines/openjdk-14.0.2.jdk/Contents/Home", "sonarlint.rules": { "typescript:S4328": { "level": "off" }, "typescript:S4335": { "level": "off" } }, "sonarlint.trace.server": "messages", "terminal.integrated.fontFamily": "'Meslo LG M for Powerline'", "terminal.integrated.rendererType": "dom", "terminal.integrated.scrollback": 5000, "terminal.integrated.shell.osx": "zsh", "todo-tree.tree.showScanModeButton": false, "cSpell.userWords": [ "Blocklist", "Invalidatable", "Pageable", "Phong", "Quadflieg", "adsoul", "axiso", "deletable", "hideable", "junit", "mixins", "nameof", "prefetch", "prepend", "scrollbar", "serializable", "sitelink", "stylelint", "vuetify", "vuex" ], "todohighlight.defaultStyle": { "color": "#608b4e", "backgroundColor": "#dea221" }, "todohighlight.keywordsPattern": "(//|#)(\\s*)?[A-Z]{4,5}( \\w*)?( [123]\\d{3}-(0[1-9]|1[0-2])-(0[1-9]|[12]\\d|3[01]))?:", "typescript.format.semicolons": "insert", "typescript.implementationsCodeLens.enabled": true, "typescript.referencesCodeLens.enabled": true, "typescript.tsserver.log": "verbose", "versionlens.suggestions.showOnStartup": true, "vetur.experimental.templateInterpolationService": true, "vetur.useWorkspaceDependencies": true, "vetur.validation.template": true, "vscode_vibrancy.opacity": 0.1, "vscode-json-editor.theme": "dark", "window.zoomLevel": 2, "workbench.colorCustomizations": { "jsannotations.annotationForeground": "#797979" }, "workbench.colorTheme": "Default Dark+", "workbench.iconTheme": "material-icon-theme", "workbench.startupEditor": "newUntitledFile", "[vue]": { "editor.defaultFormatter": "esbenp.prettier-vscode" } } ```

[Shinigami92]

@yet-another-dev Any news?
If you solved it, please write a response and then close this issue :slightly_smiling_face:

[jaymakes11]

After reinstalling my VS Code and ensuring no plugins other than the VS Prettier plugin was running I got it to work 😄

I did notice that that seeing jade listed in the output for Prettier was required to get it to work:

Now to reenable extensions one-by-one to see which one was the culprit... If I find one I'll be sure to note it here but for now will close this issue. Thanks again for the tips and help with this, @Shinigami92.

[jaymakes11]

Alright, after some more testing it seems that this is connected to pnpm. I'm using pnpm specifically for its monorepo features (which are pretty sweet!), so it's rather unfortunate that there's a conflict. If running npm i and reloading VS Code then prettier is identified as the formatter for pug files. If running pnpm i they are not.

I found a perhaps-related issue on the prettier-vscode plugin's repo.

[Shinigami92]

Maybe related to https://github.com/prettier/prettier/pull/9167