Can't get this to work with VSCode

[Flowgram]

Hi there,

I've spent a few hours trying everything to get this to work on save with VS Code.

Prettier works fine with HTML files, but I just can't get it to format *.twig files.

My .prettierrc file looks like:

{ "tabWidth": 2, "useTabs": false, "plugins": ["./node_modules/prettier-plugin-twig-melody"] }

I'm using the Twig extension for syntax highlighting,

What am I doing wrong?

[Flowgram]

When I try to format a twig file manually, VS Code says:

There is no formatter for 'twig' files installed.

[chasegiunta]

@Flowgram FYI vscode needs to restart in order for this to work.

[twbartel]

Hi @Flowgram, usually, you should not even need the

"plugins": ["./node_modules/prettier-plugin-twig-melody"]

in .prettierrc. Prettier should pick it up automatically. Have you tried Chase's restart advice?

Otherwise, can you try, on the command line:

prettier --write path/to/some/file.twig

[Flowgram]

I finally got another chance to look into this. After installing Prettier globally I can successfully format my twig files manually:

prettier --write views/twig_file.twig

However, VSCode is still not formatting twig files on save even though formatOnSave is true.

"editor.formatOnSave": true

The following is outputed by Prettier on VSCode launch

["INFO" - 11:43:31 AM] Extension Name: esbenp.prettier-vscode.
["INFO" - 11:43:31 AM] Extension Version: 4.5.0.
["INFO" - 11:43:31 AM] Enabling prettier for languages
[
  "css",
  "graphql",
  "html",
  "javascript",
  "javascriptreact",
  "json",
  "json5",
  "jsonc",
  "less",
  "markdown",
  "mdx",
  "mongo",
  "postcss",
  "scss",
  "typescript",
  "typescriptreact",
  "vue",
  "yaml"
]
["INFO" - 11:43:31 AM] Enabling prettier for range supported languages
[
  "graphql",
  "javascript",
  "javascriptreact",
  "json",
  "typescript",
  "typescriptreact"
]

It's working fine on save of HTML files.

[RomainFallet]

For me, when Prettier is installed in the project (not globally), this plugin only works with a .prettierc config:

{
  "plugins": ["./node_modules/prettier-plugin-twig-melody"]
}

Prettier finds automatically all other plugins I'm using but not this one.

[Flowgram]

@RomainFallet yeah, I've got that in my .prettierc

I take it formatOnSave is working for you on twig files then?

When you load VSCode and look at Prettier Output console, is twig listed as Enabled (see my log above)?

[chasegiunta]

I've only got this working (although, I've only really tested) by installing it locally at the project level and then doing a restart of VSCode. For me, I have prettier configured through my package.json

"prettier": {
    "plugins": [
      "./node_modules/prettier-plugin-twig-melody"
    ],
  },

["INFO" - 7:21:00 AM] Extension Name: esbenp.prettier-vscode.
["INFO" - 7:21:00 AM] Extension Version: 4.5.0.
["INFO" - 7:21:01 AM] Loaded module 'prettier@1.19.1' from '/Users/chasegiunta/Sites/thp/node_modules/prettier/index.js'
["INFO" - 7:21:01 AM] Enabling prettier for languages
[
  "css",
  "graphql",
  "html",
  "javascript",
  "javascriptreact",
  "json",
  "json5",
  "jsonc",
  "less",
  "markdown",
  "mdx",
  "mongo",
  "postcss",
  "scss",
  "twig",
  "typescript",
  "typescriptreact",
  "vue",
  "yaml"
]
["INFO" - 7:21:01 AM] Enabling prettier for range supported languages
[
  "graphql",
  "javascript",
  "javascriptreact",
  "json",
  "typescript",
  "typescriptreact"
]

[chasegiunta]

prettier is not a direct project dependency in my package.json, but this line in my output that's not present in yours:

["INFO" - 7:21:01 AM] Loaded module 'prettier@1.19.1' from '/Users/chasegiunta/Sites/thp/node_modules/prettier/index.js'

potentially means something is have a difficult time loading prettier?

[chris78er]

@Flowgram Try this setting in VS Code:

"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode",
"prettier.prettierPath": "./ADJUST_PATH/node_modules/prettier"

That worked for me.

[Flowgram]

@chris78er, that pointed me in the right direction, thank you so much!

I added this line to my VS Code settings:

"prettier.prettierPath": "/Users/MYNAME/.nvm/versions/node/v12.16.2/lib/node_modules/prettier",

I then installed Prettier for Melody globally

npm i prettier-plugin-twig-melody -g

And lo and behold, twig files are now being formatted on save in VS Code.

Thanks again!

[JWesorick]

I have tried all of the above and the plugin still does not register. It picked up the php plugin just fine with no extra config even. So maybe compare against that one?

edit: I guess it's working but throwing errors in the output because of a bad closing tag.

[renestalder]

It works for me in most projects, but not in all. In some cases, I don't know at all why it doesn't work despite being set up identically as in other projects. And in some projects where I have monorepos and the prettier stuff is in a subfolder, it clearly doesn't work (it then works when I open that subfolder directly as a project in vscode).

In all cases, it always works when formatting via command line. Just vscode doesn't pick prettier up as valid formatter.

[hmsun-es]

This issue is caused by the Twig 2 extension, which uses the vscode-prettier extension to convert HTML (twig), a language type specific to .twig files. This problem occurs because it does not work as a formatter. Disabling Twig 2 solves the problem. Use only the Twig 1 extension, not Twig 2.