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?

question from:https://stackoverflow.com/questions/66067807/vs-code-prevent-prettier-from-overwriting-formatting-from-better-align

Answer 1

The only way I can think of is disabling formatOnSave and leaving the alignment for after formatting, I'm afraid.