VS Code: Prevent Prettier from overwriting formatting from Better Align

Question

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?

Answer 1

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
)