formattingvisual-studio-codeprettier

VS Code: Prevent Prettier from overwriting formatting from Better Align


I've gone through formatting settings and stack overflow posts, I've toggled with a bunch of different settings and can't seem to find an answer to this.

Two VS Code extensions come into play here: Prettier and Better Align. I want to use Prettier to format my code generally, and Better Align to align certain pieces of my code. But Prettier overwrites any changes that I make with Better Align.

For example:

After running Better Align, before running Prettier:

<ReactMapGL
          {...this.props.viewport}
          zoomEnabled          = {true}
          showUserLocation     = {true}
          mapStyle             = {this.props.mapStyle}
          mapboxApiAccessToken = {process.env.REACT_APP_MAPBOX_TOKEN}
          onViewportChange     = {(viewport) => {
            this.props.updateViewport(viewport);
          }}
        >

Then, after running Prettier:

<ReactMapGL
          {...this.props.viewport}
          zoomEnabled={true}
          showUserLocation={true}
          mapStyle={this.props.mapStyle}
          mapboxApiAccessToken={process.env.REACT_APP_MAPBOX_TOKEN}
          onViewportChange={(viewport) => {
            this.props.updateViewport(viewport);
          }}
        >

Is there a setting in Prettier that overlooks the alignment formatting? Alternatively, is there a different way of doing this?


Solution

  • Pls check the Ignoring Code function of Prettier.

    Basically, just add comment prettier-ignore before the code to which you applied Better Align and which you want to prevent Prettier from formatting when saving the file.

    A JavaScript comment of // prettier-ignore will exclude the next node in the abstract syntax tree from formatting.

    For example:

    matrix(
      1, 0, 0,
      0, 1, 0,
      0, 0, 1
    )
    
    // prettier-ignore
    matrix(
      1, 0, 0,
      0, 1, 0,
      0, 0, 1
    )
    

    will be transformed to:

    matrix(1, 0, 0, 0, 1, 0, 0, 0, 1);
    
    // prettier-ignore
    matrix(
      1, 0, 0,
      0, 1, 0,
      0, 0, 1
    )