Is there any tools to do this kind of code formatting automatically

It looks like a formal letter made with MS Word. I wanna try this kind of format, but doing it manually is a waste of time

Is there any Code Editor/ extension/ something that can do this automatically

Found this on codepen by user yagoestevez.

// CSS
body {
  background          : $secondary-color;
  background          : repeating-linear-gradient(
                        60deg,
                        lighten( $key-color, 4% ),
                        lighten( $key-color, 4% ) 5px,
                        $key-color 5px,
                        $key-color 10px
                      );
  color               : $primary-color;
  font-family         : 'Merriweather', serif;
  padding             : 2rem;
  display             : flex;
  flex-direction      : column; 
  justify-content     : center;
  align-items         : center; 
}

  // JS
  drawTiles ( ) {
    const tiles = this.canvas.selectAll( 'g' )
      .data( this.treeLeaves )
      .enter( )
      .append( 'g' )
        .attr( 'class'    , 'tile-group' )
        .attr( 'transform', d => `translate( ${d.x0}, ${d.y0} )` );

    this.tile = tiles.append( 'rect' );
    this.tile.transition( )
      .attr( 'id'           , ( d, i ) => i )
      .attr( 'class'        , 'tile' )
      .attr( 'data-name'    , d => d.data.name )
      .attr( 'data-category', d => d.data.category )
      .attr( 'data-value'   , d => d.data.value )
      .attr( 'width'        , d => d.x1 - d.x0 )
      .attr( 'height'       , d => d.y1 - d.y0 );

    const mask = tiles.append( 'clipPath' )
      .attr( 'id', ( d, i ) => `clipPath-${i}` )
      .append( 'use' )
      .attr( 'xlink:href', ( d, i ) => `#${i}` );

    const tileText = tiles.append( 'text' )
      .attr( 'clip-path', ( d, i ) => `url( "#clipPath-${i}" )` )
      .attr( 'class', 'tile-text' )
      .attr( 'x', 5 )
      .attr( 'y', 15 )
      .text( d => d.data.name );

    return this;
  }

Edit

Its like the tool "Prettier" + extra whitespace to align the punctuation marks between each line of code

:
for example :
like        :
this        :
colon mark  :

, & =>
.attr( 'or'   , comma => {} )
.attr( 'like' , and   => {} )
.attr( 'this' , arrow => {} )

Unlike usual

:
for example :
like :
this :
colon mark :

, & =>
.attr( 'or' , comma => {} )
.attr( 'like' , and => {} )
.attr( 'this' , arrow => {} )

So, if any longer words added, it gets automatically inserts white spaces