VS Code: Prevent Prettier from overwriting formatting from Better Align - formatting

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
)

Answer 2

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