VSCode instructions did not work #38

wagenet · 2022-11-23T21:47:26Z

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 · 2022-11-28T18:47:19Z

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 · 2022-11-28T18:48:21Z

@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 · 2022-11-28T18:50:18Z

What glimmer-related VSCode extensions do you have installed?

simonihmig · 2023-01-16T20:32:36Z

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

@wagenet

This includes these tweaks from @wagenet: ember-tooling/prettier-plugin-ember-template-tag#38 (comment)

Techn1x · 2023-06-06T08:39:52Z

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 · 2023-06-06T09:00:07Z

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

gitKrystan · 2023-06-06T17:24:22Z

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 · 2023-06-07T01:34:55Z

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 · 2023-06-08T00:07:18Z

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 · 2023-06-08T00:23:15Z

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 · 2023-06-08T00:37:16Z

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 · 2023-06-08T00:59:07Z

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 · 2023-06-08T09:16:10Z

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 · 2023-09-03T22:08:01Z

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 · 2023-09-04T04:09:44Z

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 · 2023-11-28T09:23:41Z

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 · 2024-01-24T00:45:24Z

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

This was referenced Jan 18, 2023

Implement basic component API CrowdStrike/ember-headless-form#14

Merged

feat(#5): Add Button component CrowdStrike/ember-toucan-core#11

Merged

backspace added a commit to cardstack/boxel that referenced this issue Feb 28, 2023

Add Prettier autofixes for host Glint templates

bb201da

This includes these tweaks from @wagenet: ember-tooling/prettier-plugin-ember-template-tag#38 (comment)

gitKrystan mentioned this issue Apr 17, 2023

[Bug] With invalid hbs, prettier will transform <template> in source code #43

Closed

Techn1x mentioned this issue Jun 8, 2023

[Bug] File extension patterns not detected when plugin is required explicitly using require() (due to PnP) prettier/prettier#13276

Closed

evoactivity mentioned this issue Jul 9, 2023

[Bug] Prettier v3 Support #61

Closed

gitKrystan mentioned this issue Sep 3, 2023

Add more detail to languages array (possibly simplifying VSCode setup!) #125

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

VSCode instructions did not work #38

VSCode instructions did not work #38

wagenet commented Nov 23, 2022 •

edited by gitKrystan

Loading

gitKrystan commented Nov 28, 2022

wagenet commented Nov 28, 2022

gitKrystan commented Nov 28, 2022

simonihmig commented Jan 16, 2023

Techn1x commented Jun 6, 2023 •

edited

Loading

Techn1x commented Jun 6, 2023

gitKrystan commented Jun 6, 2023 •

edited

Loading

Techn1x commented Jun 7, 2023 •

edited

Loading

gitKrystan commented Jun 8, 2023

Techn1x commented Jun 8, 2023

gitKrystan commented Jun 8, 2023 •

edited

Loading

NullVoxPopuli commented Jun 8, 2023 •

edited

Loading

Techn1x commented Jun 8, 2023

gitKrystan commented Sep 3, 2023 •

edited

Loading

Techn1x commented Sep 4, 2023

amk221 commented Nov 28, 2023 •

edited

Loading

jaswilli commented Jan 24, 2024 •

edited

Loading

VSCode instructions did not work #38

VSCode instructions did not work #38

Comments

wagenet commented Nov 23, 2022 • edited by gitKrystan Loading

gitKrystan commented Nov 28, 2022

wagenet commented Nov 28, 2022

gitKrystan commented Nov 28, 2022

simonihmig commented Jan 16, 2023

Techn1x commented Jun 6, 2023 • edited Loading

Techn1x commented Jun 6, 2023

gitKrystan commented Jun 6, 2023 • edited Loading

Techn1x commented Jun 7, 2023 • edited Loading

gitKrystan commented Jun 8, 2023

Techn1x commented Jun 8, 2023

gitKrystan commented Jun 8, 2023 • edited Loading

NullVoxPopuli commented Jun 8, 2023 • edited Loading

Techn1x commented Jun 8, 2023

gitKrystan commented Sep 3, 2023 • edited Loading

Techn1x commented Sep 4, 2023

amk221 commented Nov 28, 2023 • edited Loading

jaswilli commented Jan 24, 2024 • edited Loading

wagenet commented Nov 23, 2022 •

edited by gitKrystan

Loading

Techn1x commented Jun 6, 2023 •

edited

Loading

gitKrystan commented Jun 6, 2023 •

edited

Loading

Techn1x commented Jun 7, 2023 •

edited

Loading

gitKrystan commented Jun 8, 2023 •

edited

Loading

NullVoxPopuli commented Jun 8, 2023 •

edited

Loading

gitKrystan commented Sep 3, 2023 •

edited

Loading

amk221 commented Nov 28, 2023 •

edited

Loading

jaswilli commented Jan 24, 2024 •

edited

Loading