VS Code：防止 Prettier 覆盖 Better Align 的格式

Question

我浏览了格式设置和堆栈溢出帖子，我切换了一堆不同的设置，但似乎找不到答案。

两个 VS Code 扩展在这里发挥作用：更漂亮和更好对齐。我想使用 Prettier 来总体格式化我的代码，并使用 Better Align 来对齐我的代码的某些部分。但是 Prettier 会覆盖我用 Better Align 所做的任何更改。

例如：

在运行更好对齐之后，在运行之前更漂亮：

<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);
          }}
        >

然后，在运行更漂亮之后：

<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);
          }}
        >

Prettier 中是否有忽略对齐格式的设置？或者，是否有其他方法可以做到这一点？

Answer 1

恐怕我能想到的唯一方法是禁用 formatOnSave 并在格式化后保留对齐方式。

Answer 2

请检查Prettier的Ignoring Code功能

基本上，只需在您应用 Better Align 的代码前添加注释 prettier-ignore，并且您希望在保存文件时防止 Prettier 格式化。

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
)

VS Code：防止 Prettier 覆盖 Better Align 的格式

VS Code: Prevent Prettier from overwriting formatting from Better Align

formatting

visual-studio-code

vscode-settings

prettier