Is it pocssible to configure the code reformatting?

I heavily use code reformatting to maintain a consistent style. Unfortunately I did not find a way to influence the code style.

As an example, I would prefer

<div
class="q-pa-md"
>

to be formatted as

<div class="q-pa-md">

(all attributes on one line)

Is this something I can set up - and in general can I set my own code style?

 

5 comments
Comment actions Permalink

>(all attributes on one line)

This is a way HTML attributes are formatted by default. Please check Wrap attributes and New line before first attribute values in Settings | Editor | Code Style | HTML | Other; I'd also suggest to make sure that Hard wrap at is set to some reasonable value (not to 0 or similar)

0
Comment actions Permalink

Thank you for your answer, but unfortunately, no changes in the style made any difference (I already tried that). I still have attributes being forcefully put on o new line (each on its line) like in the example of my question.

0
Comment actions Permalink

Strange

Do you have Prettier configured in Settings | Languages & Frameworks | JavaScript | Prettier? Also, do you have .editorconfig file(s) in your project? Is editorconfig support enabled in Settings | Editor | Code Style?

0
Comment actions Permalink

I did not have Prettier → I installed it (`npm -g install prettier`), added the plugin and now I see it under Settings | Languages & Frameworks | JavaScript | Prettier. 

Attempting to reformat works (it reformats the whole code, I had a look at Ctrl-Shift-Alt-L to make sure everything is marked), but the structure is still the same (all attributes in their own line). I tried to manually make one line of the multiline tag, but it was forcefully reformatted into three lines (to take the example of my question).

I do not have .editorconfig files and editorconfig support is enabled

AHHHH - I found it. Interestingly enough, it was your comment about enabling hard wraps that worked - but I tested it in the HTML code style section, which is not (or only partly) applicable to Vue files (Vue components). When enabling it globally (it was 0) then the attributes went back to a single line.

Thank you very much for your help!

1
Comment actions Permalink

I still have a few tags that break the attributes in several lines, while others have them only in one. 

Examples:

<q-slider
v-model="expiresValue"
:max="10"
:min="0"
:step="1"
label
label-always
snap
/>

vs.

<q-input v-model="note.title" class="text-h4" />

 

I will have a look at Prettier docs to try to understand why.

0

Please sign in to leave a comment.