Internal use of native prettier parsers

[Shinigami92]

Continuation of the discussion of #9

[Shinigami92]

@ikatyang
I'm using the native parsers now more heavily: 9725b19

Now I'm currently at work and tested the commit with yarn link
Works nice, BUT!

Assignments

Something like

v-list-tile.clickable(@click.native="x = true")

formats to

v-list-tile.clickable(@click.native="(x = true)")

That's interesting and I didn't expected this.
Is it expected to use this type of format?

Class expressions

v-icon(:class="{'active': showFilterX || showFilterY }") filter_list

formats to

v-icon(:class="{ active: showFilterX || showFilterY }") filter_list

Vue class and style: Object-Syntax
Should be fine...

Single attributes and printWidth

I have some lines in my code that are very long and indented deeply

Options:

{
   "arrowParens": "always",
   "bracketSpacing": true,
   "printWidth": 120,
   "semi": true,
   "singleQuote": true,
   "tabWidth": 3,
   "trailingComma": "none",
   "useTabs": false,
   "overrides": [
      {
         "files": ["*.pug"],
         "options": {
            "tabWidth": 3,
            "singleQuote": false
         }
      }
   ]
}

7 x 3 space indentation
135 cols

                     span.chart-text(v-if="profitableEntityTypeCombinations.conversions && !profitableEntityTypeCombinationsProgress")

formats to

                     span.chart-text(
                        v-if="profitableEntityTypeCombinations.conversions && !profitableEntityTypeCombinationsProgress"
                     )

I'm thinking about not to wrap if there is only one attribute 🤔

[ikatyang]

Assignments

...
Is it expected to use this type of format?

That's a vue event binding, which should use __vue_event_binding (see here for more info). You can compare the result from the Prettier playground with vue parser with yours, it should be the expected behavior if the both of the results are the same.

Single attributes and printWidth

...
I'm thinking about not to wrap if there is only one attribute 🤔

FYI, if you force single attributes not to break, you'll probably face something like this:

span.chart-text(v-if="profitableEntityTypeCombinations.conversions &&
  !profitableEntityTypeCombinationsProgress")

which does not look good and it's inconsistent with Prettier JSX and HTML/Vue/Angular.

[Shinigami92]

Single attributes and printWidth

span.chart-text(v-if="profitableEntityTypeCombinations.conversions &&
  !profitableEntityTypeCombinationsProgress")

This is invalid pug code and can't happen

Since pug is based heavily on indentations and the result can easily break,
I use a printWidth of 9000 in interpolations only for the sake of simplicity and as a compromise.

Assignments

Ok tested it in the playground with

<template>
  <v-list-tile class="clickable" @click.native="x = true"></v-list-tile>
  <v-list-tile class="clickable" @click.native="(x = true)"></v-list-tile>
  <v-list-tile class="clickable" @click.native="((x = true))"></v-list-tile>
</template>

and it formats always to

<template>
  <v-list-tile
    class="clickable"
    @click.native="x = true"
  ></v-list-tile>
  <v-list-tile
    class="clickable"
    @click.native="x = true"
  ></v-list-tile>
  <v-list-tile
    class="clickable"
    @click.native="x = true"
  ></v-list-tile>
</template>

without brackets.

So I will look into it and try to use __vue_event_binding for this. Otherwise I think I can remove to brackets on my own.

Besides, it is valid javascript binding code and a little bit like the --arrow-parens option.

const fn = (y) => y + 42;
let x;
fn((y) => x = y);

is the same as

const fn = (y) => y + 42;
let x;
fn((y) => (x = y));

If I am not wrong?!

[Shinigami92]

Mh... __vue_event_binding isn't working at all for this use-case

I think this is fine for now
I will wait on more feedback from the community