DEV Community

Cover image for βœ”||🀒 Commit or Vomit | code style
 🐀πŸ₯‡ Jasper de Jager
🐀πŸ₯‡ Jasper de Jager

Posted on

βœ”||🀒 Commit or Vomit | code style

Photo by Oskar Yildiz on Unsplash


<some-component class="complicated div"
  [title]="'test'"
  subtitle="test div"
  [color]="divColor"
>
  <ul>
    <li *ngFor="let item of list"
      class="list-item"
    >
      <span i18n>list item</span>
      {{item}}
    </li>
  </ul>
</some-component>

Enter fullscreen mode Exit fullscreen mode

What do you think of the presented code style?

❀: Commit (something I could commit)
🏷: Vomit (I'd never commit this)
πŸ¦„: I like your post please continue this series!

Let's vote! 😊

Top comments (14)

Collapse
 
faraazahmad profile image
Syed Faraaz Ahmad • Edited

I think its good to have attributes on multiple lines if they're too many, but if you're gonna have it on multiple lines, have all of them on multiple lines for a tag. This is what I would go for.

<some-component
  class="complicated div"
  [title]="'test'"
  subtitle="test div"
  [color]="divColor"
>
  <ul>
    <li *ngFor="let item of list" class="list-item">
      <span i18n>list item</span>
      {{item}}
    </li>
  </ul>
</some-component>
Enter fullscreen mode Exit fullscreen mode

If some tag doesn't have that many attributes, maybe let them all be in a single line. If available, I'll definitely use a formatter for this so no one would have to worry about it individually and the styles would be consistent, because we all know if you give devs too much choice they'll spend weeks arguing about each one. Btw, I really like this post series.

Collapse
 
jmdejager profile image
🐀πŸ₯‡ Jasper de Jager • Edited

And the difference between

[title]="'test'"
Enter fullscreen mode Exit fullscreen mode

and

subtitle="test div"
Enter fullscreen mode Exit fullscreen mode
Collapse
 
theowlsden profile image
Shaquil Maria

Coming from Angular, honestly, I'd use brackets to pass data no matter what. This will allow you to pass a variable assigned in your TS file and remove static strings inside of your HTML. (I don't know if this makes sense to you). Otherwise, I agree with @faraazahmad .

Thread Thread
 
jmdejager profile image
🐀πŸ₯‡ Jasper de Jager

Yes forgot to tell, it's an angular example 😊

Collapse
 
annervisser profile image
Anner Visser

I am on board with @faraazahmad 's example.
For properties I'd go with the non-bracketed subtitle="test" for simple strings

Thread Thread
 
jmdejager profile image
🐀πŸ₯‡ Jasper de Jager

Same!! 😊

Collapse
 
sargalias profile image
Spyros Argalias

I agree with this + using brackets when appropriate.

Collapse
 
jackmellis profile image
Jack

Oh definitely separate lines for all attributes. If you only have one or two then all on the same line. Never split randomly in an impossible to read manner.
Anyway, I thought these days we all just have to do whatever the prettier overloads have deemed "the way"?

Collapse
 
darkwiiplayer profile image
π’ŽWii πŸ³οΈβ€βš§οΈ • Edited

<li class="list-item"> πŸ˜‚

Edit to add: I do like this "commit or vomit" format though, it's a very cool idea :D

Collapse
 
jmdejager profile image
🐀πŸ₯‡ Jasper de Jager

To be clear: This is just an example, I'd also never add the class list-item to a li like this. πŸ˜‹

Collapse
 
jmdejager profile image
🐀πŸ₯‡ Jasper de Jager

I'd also like to see your preferred HTML code style in this matter!

Collapse
 
edave64 profile image
edave64

This code doesn't seem to have run through the auto-formatter. So PR rejected, run prettier first :P

Collapse
 
mattcoady profile image
Matt Coady

Yea this isn't even an issue really. What prettier wants, prettier gets.

Collapse
 
natalia_asteria profile image
Natalia Asteria

I'm fine with it.