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

Question

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

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

例如：

运行 Better Align 后，运行 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);
          }}
        >

然后，运行 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);
          }}
        >

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

Answer 1

请检查Prettier的忽略代码功能。

基本上，只需在应用了 Better Align 以及保存文件时防止 Prettier 格式化的代码前添加注释

prettier-ignore

即可。

JavaScript 注释

// prettier-ignore

将排除下一个节点 在格式化的抽象语法树中。

例如：

matrix(
  1, 0, 0,
  0, 1, 0,
  0, 0, 1
)

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

将转变为：

matrix(1, 0, 0, 0, 1, 0, 0, 0, 1);

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

Answer 2

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

Answer 3

尝试使用 VS Code“对齐空格”扩展

此扩展更改代码对齐方式而不修改代码。

https://marketplace.visualstudio.com/items?itemName=OldStarchy.align-spaces