VSCode instructions did not work

[wagenet]

To get things to work with VSCode I had to make the following changes:

// .vscode/settings.json
{
  "[glimmer-js]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true
  },
  "[glimmer-ts]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true
  },
  "prettier.documentSelectors": ["**/*.gjs", "**/*.gts"]
}

Note that these are glimmer-js and glimmer-ts not gjs and gts.

// prettierrc.js
module.exports = {
	plugins: ['prettier-plugin-ember-template-tag'],
       overrides: [
		{
			files: '*.gjs',
			options: {
				parser: 'ember-template-tag',
			},
		},
		{
			files: '*.gts',
			options: {
				parser: 'ember-template-tag',
			},
		},
       ]
};

[gitKrystan]

The overrides section of prettierrc.js was also necessary for getting things working in VSCode? I'm pretty surprised to see that since the plugin should already register the parser for those file types.

[wagenet]

@gitKrystan Yes, I needed all of it. It was surprising to me. There may be something else going on, but I'm not sure what.

[gitKrystan]

What glimmer-related VSCode extensions do you have installed?

[simonihmig]

I can confirm this! Struggled for a while to get it working. When explicitly calling Format Document in Code I was getting this:

With all of the config added that @wagenet posted above, it is finally working! 🎉

What glimmer-related VSCode extensions do you have installed?

The Ember/Glimmer specific ones I have are

• lifeart.vscode-ember-unstable
• chiragpat.vscode-glimmer
• typed-ember.glint-vscode

[Techn1x]

We encountered the above only after switching from yarn 1 to pnpm 8...... So I am wondering if the OP and Simon are also using pnpm. That might be the key here, or a giant red herring.

Specifically, the config I needed to add was;

• the parser overrides in prettierrc.js
• and the prettier.documentSelectors in vscode settings
  • I already had the below, as given from the readme, and that seems to be working fine, for me anyway

  "[gjs]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[gts]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "prettier.documentSelectors": ["**/*.gjs", "**/*.gts"] // this is all I needed to add here

[Techn1x]

Might be stating the obvious, but without the above, when I do a Format Document (forced) in vscode, the inferredParser value is null

[gitKrystan]

I finally saw this happen IRL when working on someone else's computer. I suspect that it's something to do with which VSCode extension is registering the gjs/gts extension. It appears that there is one that registers it as gjs/gts (which should be handled automatically when using this plugin) and another that registers as glimmer-js/glimmer-ts.

It would be helpful if people could dump the output of code --list-extensions here for me to diff (and note if you are having this issue or not). I suspect the fix will just be for me to register this plugin with all-of-the-above, but I'd love to have a local repro first.

Here's mine:

code --list-extensions
adpyke.vscode-sql-formatter
candidmetrics.ember-module-snippets
chiragpat.vscode-glimmer
codezombiech.gitignore
csstools.postcss
DavidAnson.vscode-markdownlint
dbaeumer.vscode-eslint
DocX.ember-qunit-testem-launcher
eamodio.gitlens
ecmel.vscode-html-css
EditorConfig.EditorConfig
esbenp.prettier-vscode
formulahendry.auto-rename-tag
formulahendry.code-runner
foxundermoon.shell-format
GitHub.remotehub
github.vscode-github-actions
GitHub.vscode-pull-request-github
JannisX11.batch-rename-extension
jasonnutter.search-node-modules
lifeart.vscode-ember-unstable
mariusschulz.yarn-lock-syntax
meganrogge.template-string-converter
mgmcdermott.vscode-language-babel
mrmlnc.vscode-scss
ms-vscode.azure-repos
ms-vscode.remote-repositories
ms-vscode.test-adapter-converter
ms-vscode.vscode-typescript-next
ms-vsliveshare.vsliveshare
naumovs.theme-oceanicnext
Orta.vscode-jest
paulshen.paul-typescript-toolkit
pflannery.vscode-versionlens
phanitejakomaravolu.EmberES6Snippets
pranaygp.vscode-css-peek
rebornix.ruby
redhat.vscode-yaml
ritwickdey.LiveServer
ryu1kn.partial-diff
SirTori.indenticator
sleistner.vscode-fileutils
streetsidesoftware.code-spell-checker
stylelint.vscode-stylelint
typed-ember.glint-vscode
VisualStudioExptTeam.intellicode-api-usage-examples
VisualStudioExptTeam.vscodeintellicode
wayou.vscode-todo-highlight
wingrunr21.vscode-ruby

Actually...I switched computers recently and might now have a local repro... 🎉

[Techn1x]

I run vscode over a docker container (via the remote-containers extension) so there's local extensions and remote extensions, but here you go

$ code --list-extensions
chiragpat.vscode-glimmer
csstools.postcss
mjmcloug.vscode-elixir
ms-vscode-remote.remote-containers
vayan.haml

$ code --list-extensions
Extensions installed on Container bx-docker:latest (bx-docker):
bradlc.vscode-tailwindcss
ChakrounAnas.turbo-console-log
cssho.vscode-svgviewer
dbaeumer.vscode-eslint
eamodio.gitlens
EditorConfig.EditorConfig
esbenp.prettier-vscode
lifeart.vscode-ember-unstable
mjmcloug.vscode-elixir
redhat.vscode-yaml
stylelint.vscode-stylelint
typed-ember.glint-vscode

[gitKrystan]

Are you all using PNPM (and are you using PNPM workspaces)?

I found some issues around how Prettier auto-loads plugins that seem like they would conflict with PNPM. Also found this in the changelog: https://github.com/prettier/prettier/blob/fc6419ab63a8b3bc2b4458bb5771fe64638ab013/changelog_unreleased/api/14759.md?plain=1#L3

[Techn1x]

Pnpm yes, workspaces no.

I did actually encounter that prettier/pnpm/plugin searching as a separate issue (after switching to pnpm, prettier couldn't find my tailwindcss prettier plugin) but listing it explicitly in prettierrc plugins resolved that.

[gitKrystan]

Notes from my investigation today:

getSupportInfo() (which is what prettier-vscode uses to load the supported file extensions) does not return file extensions for custom registered languages
prettier/prettier#10561

Plugins are automatically loaded if you have them installed in the same node_modules directory where prettier is located. Plugin package names must start with @prettier/plugin- or prettier-plugin- or @/prettier-plugin- to be registered.
-- https://prettier.io/docs/en/plugins.html#using-plugins

^^ In the case of my accidental repro (which is in a project using pnpm workspaces), the plugin is not in the same node modules folder

More plugin autoload issues:
prettier/prettier#8474
prettier/prettier-vscode#2586

Other plugin loading issues:
prettier/prettier#13276

Some people had luck with something like:

module.exports = {
  plugins: [require('prettier-plugin-ember-template-tag')]
}

but I haven't gotten that working in my repro yet.

I did confirm that @wagenet's hacks above work.