Prettier configuration ignored

Hi, we are evaluating WebStorm but the code formatting does not respect the prettier rules. 

I have this .prettierc.mjs and automatica prettier configuration into the IDE prettier options:

export default {
  experimentalTernaries: true,
  printWidth: 100,
  tabWidth: 2,
  useTabs: false,
  semi: true,
  singleQuote: false,
  quoteProps: "consistent",
  jsxSingleQuote: true,
  trailingComma: "none",
  bracketSpacing: true,
  bracketSameLine: true,
  arrowParens: "always",
  vueIndentScriptAndStyle: true,
  singleAttributePerLine: false
};
 

I run format on this code:

<template>
  <DxSelectBox
    :search-enabled="true"
    value="apartmentId"
    display-expr="name"
    value-expr="id"
    :data-source="data?.apartments"
    @value-changed="onValueChanged" />
</template>

 it should not be changed, but WS does this really weird thing (everything is on the same line, creating a 160 char lines)!

<template>
  <DxSelectBox :search-enabled="true" value="apartmentId" display-expr="name" value-expr="id" :data-source="data?.apartments" @value-changed="onValueChanged" />
</template>

VsCode on the other hand respect the rules. We basically had to reformat everything again from Vscode.

Will be prettier supported adequately in the future? Or are there other formatter that actually works? We obviously don't want those long lines. At the moment the “format” command is actually ruining the formatting. 

 

0
7 comments

Unfortunately I failed to reproduce the issue using the similar setup.

Can you please share a bit more context around the problem? Which version of the IDE are you using? Could you please share a sample project where we could reproduce it?

0

Hi,

we are evaluating WebStorm 2024.2.4

Build #WS-242.23726.96, built on October 22, 2024
Licensed to Trial User
Subscription is active until November 29, 2024.
Runtime version: 21.0.4+13-b509.26 aarch64 (JCEF 122.1.9)
VM: OpenJDK 64-Bit Server VM by JetBrains s.r.o.
  • Automatic prettier configuration
  • nodejs 22.10.0 and Vue and Typescript.

Fact is that today I cannot reproduce it anymore. After I ran prettier from the command line, it seems that WS started respecting its directives too. Weird.

 

0

I used the same version for testing.

Should the issue occur again, please let us know.

0

Still happening. There's something broken in the prettier integration in my opinion. 

It doesn't break long lines, it seems to follow its own rules.

We are evaluating WebStorm because in Rubymine  the prettier plugin just crashes at startup, but here it seems to work randomly, using different rules from those defined in prettierrc.mjs.

BTW how do I disable the “feature” that puts parameters INLINE into the code? It's really disturbing to say the least. Parameter hinting is fine, but putting those hints inline is extremely confusing, an absolute no-go. 

thanks.

0

With your configuration, the attributes are inlined unless the line length exceeds the specified value (printWidth: 100); it's the same when running Prettier in command line.

If it works differently for you, please share a sample project where the issue can be reproduced.

0

No, it doesn't. 

export default {
  experimentalTernaries: true,
  printWidth: 140,
  tabWidth: 2,
  useTabs: false,
  semi: true,
  singleQuote: false,
  quoteProps: "consistent",
  jsxSingleQuote: true,
  trailingComma: "none",
  bracketSpacing: true,
  bracketSameLine: true,
  arrowParens: "always",
  vueIndentScriptAndStyle: true,
  singleAttributePerLine: false
};

This is after running prettier from the command line: 

<ListViewComponent
  id="dockList"
  :dataSource="ListData"
  cssClass="e-template-list"
  :showIcon="showIcon"
  :fields="listFields"
  v-on:select="onSelect" />

This is after selecting code and running  reformat code from the IDE:

<ListViewComponent id="dockList" :dataSource="ListData" cssClass="e-template-list" :showIcon="showIcon" :fields="listFields" v-on:select="onSelect" />

How can I share a project? It happens with every project. It just ignores .prettierc.mjs and uses its own rules.

0

You can upload the project (as a zip) to some file server or share a link to github repository, whatever suits you best.

0

Please sign in to leave a comment.