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.

[NullVoxPopuli]

That reminds me!,
For pnpm users, this is important information: https://pnpm.io/npmrc#public-hoist-pattern
Note the default values.

If fou only run prettier from one directory, say a monorepo root, to make the prettier plugin work like all the other prettier plugins, you need to add the plugin to the public hoist pattern, if it's not also installed at the root of the monorepo.

The issue doesn't present itself if you run prettier from each directory, as prettier and the plugin are in the same node modules (local to the package)

---

But wait... By default, why wouldn't this gjs plugin, be hoisted?, Thus fixing the problem?

It starts with prettier, and that matches the public-hoist-pattern

---

Update! This is what i get for trying to do code things on my phone -- i missed the linked prettier thing -- removing the functionality that i wan talking about... Which is a very good thing.

Makes folks install deps correctly, etc.

[Techn1x]

I think that issue you linked prettier/prettier#13276 is exactly what the problem is. The workaround in that issue for VSCode are even the same as the OP gave here. The only difference is they use Yarn PnP rather than pnpm but it's kind of the same thing in that node_modules is a non-standard structure

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.

Note that providing a string to the prettier plugins array is essentially the same as calling require

https://prettier.io/docs/en/plugins.html#using-plugins

Strings provided to plugins are ultimately passed to require(), so you can provide a module/package name, a path, or anything else require() takes.

[gitKrystan]

Can y'all try out v1.1.0 and see if any of your issues are resolved?

Specifically, in @wagenet's config I was able to remove:
"prettier.documentSelectors": ["**/*.gjs", "**/*.gts"] from .vscode/settings.json and the entire overrides section from prettierrc.js.

Between #125 and #78 (Prettier totally revamped how they include plugins in v3) this issue might be resolved. 🎉 However, you all should be aware of: #113

[Techn1x]

It looks like I had already removed documentSelectors from my settings (I recently changed systems and had to redo all this stuff).

I've now removed the ember-template-tag parser overrides section from my prettierrc.js

Looks like vscode prettier format on save works!

FWIW, the relevant vscode settings I have now are this.

  "[glimmer-js]": {
    "editor.formatOnSave": true,
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[glimmer-ts]": {
    "editor.formatOnSave": true,
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },

[amk221]

In case this helps anybody...

Our situation is

parent
  ├─ child
  │    ├─ .prettierrc.js  // ember project
  ├─ .prettierrc.js       // non-ember project

If you are working inside the child directory, which is an Ember app with template-tag prettier config, then Format on Save works as per the readme instructions on this repo.

But, if you are working on a file inside the child directory, but from the parent directory in VSCode, then Format on Save does not work. (You get the screenshot @simonihmig posted)

To fix it I needed to add

"prettier.documentSelectors": ["**/*.gjs"]

I did not need any of the previously mentioned [glimmer-js] configs.

[jaswilli]

Hey all, just adding another report:

I'm using plugin version 1.1.0 and had to add:

"prettier.documentSelectors": ["**/*.gjs", "**/*.gts"]

I already had the below settings:

"[glimmer-js]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.foldingStrategy": "indentation"
  },
  "[glimmer-ts]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.foldingStrategy": "indentation"
  },
},

In case it's useful, here's my code --list-extensions

amazonwebservices.aws-toolkit-vscode
attilabuti.vscode-mjml
bierner.markdown-preview-github-styles
bradlc.vscode-tailwindcss
castwide.solargraph
dbaeumer.vscode-eslint
denoland.vscode-deno
eamodio.gitlens
EditorConfig.EditorConfig
Equinusocio.vsc-material-theme
equinusocio.vsc-material-theme-icons
esbenp.prettier-vscode
GitHub.copilot
GitHub.copilot-chat
golang.go
JakeBecker.elixir-ls
jprestidge.theme-material-theme
jtr.vscode-position
kaiwood.endwise
lifeart.vscode-ember-unstable
lifeart.vscode-glimmer-syntax
ms-azuretools.vscode-docker
ms-python.black-formatter
ms-python.flake8
ms-python.isort
ms-python.mypy-type-checker
ms-python.python
ms-python.vscode-pylance
ms-toolsai.jupyter
ms-toolsai.jupyter-keymap
ms-toolsai.jupyter-renderers
ms-toolsai.vscode-jupyter-cell-tags
ms-toolsai.vscode-jupyter-slideshow
ms-vscode-remote.remote-containers
ms-vscode.makefile-tools
ms-vscode.sublime-keybindings
msjsdiag.vscode-react-native
octref.vetur
PKief.material-icon-theme
redhat.vscode-commons
redhat.vscode-yaml
rubocop.vscode-rubocop
Rubymaniac.vscode-direnv
rust-lang.rust-analyzer
samuelcolvin.jinjahtml
Shopify.ruby-lsp
stylelint.vscode-stylelint
svelte.svelte-vscode
tamasfe.even-better-toml
timonwong.shellcheck
typed-ember.glint-vscode
vadimcn.vscode-lldb
VisualStudioExptTeam.intellicode-api-usage-examples
VisualStudioExptTeam.vscodeintellicode