plugin-pug icon indicating copy to clipboard operation
plugin-pug copied to clipboard

Bug: VSCode fails to format pug files with [email protected] and higher

Open ladown opened this issue 1 year ago • 4 comments

Plugin Version

v3.0.0

Prettier Version

v3.1.1

Which frameworks are affected?

  • [X] none
  • [ ] vue
  • [ ] angular
  • [ ] svelte

Node Version

v20.10.0

Which operating systems have you used?

  • [ ] Linux
  • [X] macOS
  • [ ] Windows

Prettier config

{
  "plugins": ["@prettier/plugin-pug"],
  "tabWidth": 4,
  "singleQuote": true,
  "trailingComma": "all",
  "semi": true,
  "printWidth": 130,
  "useTabs": true,
  "jsxSingleQuote": true,
  "endOfLine": "auto",
  "bracketSameLine": false,
  "htmlWhitespaceSensitivity": "ignore",
  "pugAttributeSeparator": "none",
  "pugWrapAttributesThreshold": 1
}

Input

script.
  const obj = { test: 1};

Output or Error

There is no formatter for 'jade' files installed.

Expected Output

script.
  const obj = { test: 1 };

Additional Context

Hello!

I faced with the problem, that [email protected] and higher causes the problem, that VSCode doesn't format Pug files with prettier. If we install prettier3.1.0 and lower it works fine. When we install [email protected] and higher, we see next indicator in footer panel of VSCode:

image

When we try to format it with command Format Document, we will have the following notification:

image

I also tried to set default formatter in VSCode settings and it didn't not help me.

If we try to format .pug files from CLI, it works perfect

ladown avatar Jan 15 '24 13:01 ladown

Can you identify if this is an issue with the plugin, or maybe with the prettier version https://github.com/prettier/prettier/blob/main/CHANGELOG.md#311

Shinigami92 avatar Jan 15 '24 18:01 Shinigami92

I tested this issue with other plugins and figured out, that its connected with the Prettier

ladown avatar Jan 15 '24 19:01 ladown

Hi, Same here, I have installed Prettier and the Pug plugin as DevDeps. "@prettier/plugin-pug": "^3.0.0" "prettier": "^3.2.5"

When trying to indent, I get same suggestion window from VSCode for Jade :-/

Screenshot from 2024-02-16 20-01-14

PS:

  • Linux Ubuntu OS
  • Pug view using the template engine integrated to Express NodeJs

mhabsaoui avatar Feb 16 '24 19:02 mhabsaoui

Hello, @mhabsaoui !

Its a problem with prettier extension as i can see. Here you can learn more - https://github.com/prettier/prettier-vscode/issues/3253

As for me, i found a solution to add path to prettier config in VSCode JSON settings -- "prettier.configPath": "./.prettierrc"

ladown avatar Feb 19 '24 14:02 ladown