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

mixin arguments can not be formatted

Open ekfuhrmann opened this issue 6 years ago • 3 comments

If I have the following formatted code:

+link({
  name: 'Solutions', 
  subnav: {
    sublinks: [
       {name: 'WISP', url: '#', icon:'wisp'},
       {name: 'Fiber', url: '#', icon:'fiber'},
       {name: 'MDU', url: '#', icon:'mdu'},
       {name: 'Voice', url: '#', icon:'voice'},
       {name: 'Cable', url: '#', icon:'cable'},
       {name: 'Enterprise', url: '#', icon:'enterprise'}
    ]
  }
})

It gets formatted to the following:

+link({ name: 'Solutions', subnav: { sublinks: [ {name: 'WISP', url: '#', icon:'wisp'}, {name: 'Fiber', url: '#', icon:'fiber'}, {name: 'MDU', url: '#', icon:'mdu'}, {name: 'Voice', url: '#', icon:'voice'}, {name: 'Cable', url: '#', icon:'cable'}, {name: 'Enterprise', url: '#', icon:'enterprise'} ] }})

Is there any possible way to prevent this reformatting from happening, as it makes parsing the information far more difficult?

ekfuhrmann avatar Feb 05 '20 20:02 ekfuhrmann

Mh yeah, I knew this would come someday 😌 I definitely have to work on this problem

Could you get around this in the meantime in the following way?

- var nav = {
  name: 'Solutions', 
  subnav: {
    sublinks: [
       {name: 'WISP', url: '#', icon:'wisp'},
       {name: 'Fiber', url: '#', icon:'fiber'},
       {name: 'MDU', url: '#', icon:'mdu'},
       {name: 'Voice', url: '#', icon:'voice'},
       {name: 'Cable', url: '#', icon:'cable'},
       {name: 'Enterprise', url: '#', icon:'enterprise'}
    ]
  }
}
+link(nav)

It's tricky to implement this feature request, because it's multiline-javascript formatting within pug And I have to take care of the indentation and other things

I may have time at the upcoming weekend

Shinigami92 avatar Feb 05 '20 20:02 Shinigami92

I figured this would be a complicated implementation, so I am totally happy with the - var workaround for the time being.

I wish I could help more with the implementation, but I unfortunately do not have much experience with creating linting rules (I'm guessing it's a fair amount of regex?), but I can certainly help test should you come up with anything.

Thanks for the response!


For anyone looking to use - var, you will need to use the following format for a multi-line var:

- 
  var nav = {
    name: 'Solutions', 
    subnav: {
      sublinks: [
         {name: 'WISP', url: '#', icon:'wisp'},
         {name: 'Fiber', url: '#', icon:'fiber'},
         {name: 'MDU', url: '#', icon:'mdu'},
         {name: 'Voice', url: '#', icon:'voice'},
         {name: 'Cable', url: '#', icon:'cable'},
         {name: 'Enterprise', url: '#', icon:'enterprise'}
      ]
    }
  }
+link(nav)

ekfuhrmann avatar Feb 05 '20 21:02 ekfuhrmann

Uff... we have a huge problem here :/

https://github.com/prettier/plugin-pug/blob/34f3a5d3dd9e09864cee17b960ceecb39bc26c48/src/printer.ts#L716-L720

Here we have args and it is just a string In the string there is a comma separated list of arguments. But I cant split it by , because if one argument in example json contains comma by it self, it breaks.

So I will ask the author of pugjs to change the lexer to output a string[] instead of a string Same applies also to mixins

So sorry if this could take some time

Shinigami92 avatar Feb 09 '20 10:02 Shinigami92