Prettier not formatting doc blocks correctly

Short description of issue

@param declarations are getting reformatted improperly

Reproduction steps

Create a doc block and add some @param declarations, with each one starting on a new line. Save / format the document and see prettier reformat them incorrectly. First screenshot shows how it should look, second shows how it looks after formatting.

Additional info

Workspace settings:

{
  "[liquid]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

Prettier config is:

{
  printWidth: 80,
  tabWidth: 2,
  useTabs: false,
  semi: true,
  singleQuote: true,
  trailingComma: 'all',
  bracketSpacing: true,
  arrowParens: 'avoid',
  endOfLine: 'auto',
  tailwindStylesheet: '/src/entrypoints/theme.css',
  overrides: [
    {
      files: ['**/*.css', '**/*.liquid'],
      options: {
        singleQuote: false,
      },
    },
    {
      files: ['**/*.css'],
      options: {
        tailwindPreserveWhitespace: true,
      },
    },
  ],
  plugins: ['@shopify/prettier-plugin-liquid', 'prettier-plugin-tailwindcss'],
}

What type of topic is this

Bug report

Upload screenshot(s) of issue


Hi @Nic_Oliver

Thanks for flagging this behavior - digging into this on my side.

:thinking: I’m unable to reproduce this bug even with the same prettier config. If I save this:

{% doc %}
@param {number} group_index_0 - Group index starting at 0
@param {object} group_index_config - Config JSON for the component group
{% enddoc %}

It is correctly formatted to:

{% doc %}
  @param {number} group_index_0 - Group index starting at 0
  @param {object} group_index_config - Config JSON for the component group
{% enddoc %}

(note the added space at the front)

Ah ha! But if I try it on the playground I get the error you see: Prettier Liquid Plugin - Playground . We’ll create an issue for this and have a look at it.

1 Like