如何在配置使用Prettier的VSCode中通过Better Align插件来对齐等式？（相关搜索：格式化）

Question

如何在配置使用Prettier的VSCode中通过Better Align插件来对齐等式？
已经使用Prettier来美化格式，设置了保存时自动格式化的配置
但是这种方式无法实现多行不等式对齐
了解到Better Align可以实现对齐效果
安装了后，发现直接保存的时候Better Align的效果无法体现
怀疑是该效果和Prettier的效果冲突了，最后被Prettier效果覆盖了
该如何设置呢？

我的VSCode配置如下：

{
    "editor.fontVariations": false,
    "editor.fontsize": 14,
    //"editor.language.brackets": [],
    "highlight-icemode.backgroundColor": "red",
    "highlight-icemode.borderColor": "blue",
    "workbench.colorCustomizations": {
        "toolbar.hoverBackground": "#ef25bc",
        "toolbar.hoverOutline": "#ef25bc",
        "toolbar.activeBackground": "#ef25bc",
        //badge
        "badge.foreground": "#25efa8",
        "editor.selectionBackground": "#e30faed8",
        "editorCursor.foreground": "#18e571", 
        "editorLineNumber.foreground": "#9F9371", 
        "editor.selectionHighlightBackground": "#e329f07a",
        "editor.wordHighlightTextBackground": "#f134ea7a",
        "editor.findRangeHighlightBackground": "#ff9900",
        "editor.lineHighlightBackground": "#70e5ec3d",
        //"editor.lineHighlightBorder": "#f9f5f562"
        "editor.findMatchBackground": "#ff0000",
        "editor.findMatchHighlightBackground": "#b906f4",
        //"editorIndentGuide.background1": "#cecdc2",
        "editor.findMatchBorder": "#f11a1a",
        "editorBracketMatch.background": "#3344F0",
        "editorBracketMatch.border": "#ff0000",
        "contrastActiveBorder": "#67efbb", 
        //"contrastBorder": "#ff0000",
    },
    "code-runner.runInTerminal": true,
    "workbench.settings.applyToAllProfiles": [
        "code-runner.runInTerminal",
        "editor.autoIndent",
        "prettier.withNodeModules",
        "editor.trimAutoWhitespace",
        "editor.formatOnSave"
    ],
    "[c]": {
        "editor.defaultFormatter": "ms-vscode.cpptools"
    },
    "prettier.withNodeModules": true,
    "editor.minimap.showSlider": "always",
    "[jsonc]": {
        "editor.defaultFormatter": "vscode.json-language-features"
    },
    "update.showReleaseNotes": false,
    "editor.tokenColorCustomizations": {
        "comments": "#8d9b93", // 注释
        "functions": "#b2be05"
        //"keywords": "#d6f608",
        //"numbers": "#f319a3"
        //“strings”:字符串的颜色
        //“types”:类型定义与引用的颜色
        //“variables”:变量的颜色
        //“textMateRules”:其他具体的颜色设置
    },
    "highlightLine.borderColor": "red",
    "highlightLine.borderWidth": "",
    "highlightLine.borderStyle": "outset",
    "files.encoding": "gbk",
    "editor.formatOnType": true,
    "editor.defaultFormatter": "chouzz.vscode-better-align",
    "less.format.newlineBetweenRules": false,
    "scss.format.newlineBetweenRules": false,
    "css.format.newlineBetweenRules": false,
    "prettier.endOfLine": "auto",
    "javascript.format.insertSpaceAfterSemicolonInForStatements": false,
    "typescript.format.insertSpaceAfterFunctionKeywordForAnonymousFunctions": false,
    "prettier.bracketSpacing": false,
    "C_Cpp.vcFormat.space.beforeBlockOpenBrace": false,
    "javascript.format.insertSpaceAfterOpeningAndBeforeClosingEmptyBraces": false,
    "typescript.format.insertSpaceAfterKeywordsInControlFlowStatements": false,
    "typescript.format.insertSpaceAfterOpeningAndBeforeClosingEmptyBraces": false,
    "eslint.codeActionsOnSave.rules": null,
    "eslint.format.enable": true,
    "editor.formatOnSave": true,
    "editor.trimAutoWhitespace": false,
    "search.exclude": {
        "**/*.map": true,
        "**/*.xml": true
    },
    "editor.renderWhitespace": "all",
    "javascript.format.insertSpaceAfterOpeningAndBeforeClosingNonemptyBraces": false,
    "typescript.format.insertSpaceAfterOpeningAndBeforeClosingNonemptyBraces": false,
    "typescript.format.insertSpaceAfterSemicolonInForStatements": false,
    "editor.insertSpaces": false,
    "editor.comments.insertSpace": false,
    "javascript.format.insertSpaceAfterCommaDelimiter": false,
    "javascript.format.insertSpaceAfterFunctionKeywordForAnonymousFunctions": false,
    "typescript.format.insertSpaceAfterCommaDelimiter": false,
    "C_Cpp.formatting": "vcFormat",
    "C_Cpp.vcFormat.space.beforeConstructorColon": false,
    "C_Cpp.vcFormat.space.beforeInheritanceColon": false,
    "prettier.useTabs": true,
    "C_Cpp.vcFormat.indent.caseContents": false,
    "css.format.spaceAroundSelectorSeparator": true,
    "less.format.spaceAroundSelectorSeparator": true,
    "scss.format.spaceAroundSelectorSeparator": true,
    "vetur.format.defaultFormatterOptions": {
        "js-beautify-html": {
            "wrap_attributes": "force-expand-multiline"
        },
        "prettyhtml": {
            "printWidth": 100,
            "singleQuote": false,
            "wrapAttributes": false,
            "sortAttributes": false
        }
    },
    "[cpp]": {
        "editor.defaultFormatter": "ms-vscode.cpptools"
    },
    "debug.javascript.defaultRuntimeExecutable": {
        "pwa-node": "node"
    },
    "C_Cpp.clang_format_sortIncludes": false,
    "C_Cpp.commentContinuationPatterns": [
        "/**"
    ],
    "editor.language.brackets": [],
    "editor.formatOnPaste": true,
    "notebook.formatOnSave.enabled": true,
    "notebook.formatOnCellExecution": true,
    "C_Cpp.vcFormat.newLine.beforeOpenBrace.function": "newLine",
    "C_Cpp.vcFormat.newLine.beforeOpenBrace.lambda": "newLine",
    "C_Cpp.vcFormat.space.afterKeywordsInControlFlowStatements": false,
    "javascript.format.insertSpaceAfterKeywordsInControlFlowStatements": false,
    "editor.gotoLocation.alternativeImplementationCommand": "editor.action.goToReferences",
    "editor.gotoLocation.alternativeReferenceCommand": "editor.action.goToReferences",
    "workbench.colorTheme": "Visual Studio Dark - C++",
    "editor.bracketPairColorization.independentColorPoolPerBracketType": true,
    "editor.defaultColorDecorators": true,
    "editor.parameterHints.cycle": false,
    "editor.renderLineHighlight": "all",
    "editor.smartSelect.selectLeadingAndTrailingWhitespace": false,
    "editor.stickyScroll.enabled": true,
    "editor.suggest.showStatusBar": true,
    "workbench.commandPalette.experimental.suggestCommands": true,
    "workbench.editor.autoLockGroups": {
        "default": true,
        "workbench.editorinputs.searchEditorInput": true,
        "workbench.editors.gettingStartedInput": true,
        "terminalEditor": false
    },
    "workbench.editor.limit.enabled": true,
    "workbench.editor.mouseBackForwardToNavigate": false,
    "explorer.copyRelativePathSeparator": "/",
    "terminal.integrated.cursorBlinking": true,
    "remote.autoForwardPorts": false,
    "security.promptForLocalFileProtocolHandling": false,
    "security.promptForRemoteFileProtocolHandling": false,
    "security.restrictUNCAccess": false,
    "C_Cpp.vcFormat.indent.gotoLabels": "none",
    "C_Cpp.vcFormat.newLine.beforeOpenBrace.block": "newLine",
    "C_Cpp.vcFormat.newLine.beforeOpenBrace.namespace": "newLine",
    "C_Cpp.vcFormat.newLine.beforeOpenBrace.type": "newLine",
    "C_Cpp.vcFormat.space.insertAfterSemicolon": true,
    "css.validate": false,
    "C_Cpp.default.compilerPath": "",
    "search.defaultViewMode": "tree",
    "search.followSymlinks": false,
    "git.autorefresh": false,
    "cmake.parseBuildDiagnostics": false,
    "editor.semanticTokenColorCustomizations": {},
    "terminal.integrated.altClickMovesCursor": false,
    "editor.gotoLocation.multipleDefinitions": "goto",
    "editor.language.colorizedBracketPairs": [],
    "workbench.tree.renderIndentGuides": "always",
    "betterAlign.alignAfterTypeEnter": true,
    "betterAlign.surroundSpace": {
        "colon": [
            0,
            1
        ],
        "assignment": [
            1,
            1
        ],
        "arrow": [
            1,
            1
        ],
        "comment": 2
    },
}

Answer 1

🕗晚上好，题主！目前：🟢[在线]
📢参考通义千问、由郭老师整理提供！
📣今日诗号：二十四桥明月夜，玉人何处教吹箫。

要同时使用 Prettier 和 Better Align 来对齐多行等式，需要调整 VSCode 设置。

以下是如何修改你的设置：

1. 打开 VSCode 设置（按 Ctrl+， 或 Cmd+,）。

2. 搜索 "better align"。

3. 取消选中 "在保存时对齐" 复选框。

4. 搜索 "prettier"。

5. 选中 "在保存时格式化" 复选框。

更新后的设置如下：

{
  "editor.defaultFormatter": "chouzz.vscode-better-align",
  "betterAlign.alignAfterTypeEnter": true,
  "betterAlign.surroundSpace": {
    "colon": [
      0,
      1
    ],
    "assignment": [
      1,
      1
    ],
    "arrow": [
      1,
      1
    ],
    "comment": 2
  },
  "prettier.formatOnSave": true
}

此设置会导致以下行为：

• Better Align 将在键入 Enter 后对齐等式。
• Prettier 将在保存时对齐的等式进行格式化。

提示：

• 确保已安装 Better Align 和 Prettier 扩展。
• 如果你仍然遇到问题，请尝试重新启动 VSCode。
• 如果 Prettier 的格式化仍然覆盖了 Better Align 的对齐，请尝试降低 Better Align 的优先级。这可以通过在 用户设置 中将 "editor.defaultFormatter" 的值从 "chouzz.vscode-better-align" 更改为 "chouzz.vscode-better-align:2" 来完成。