VSCode中Flutter UI引导线与括号配对标识错位如何修复？

问题现象 #

预期效果 #

修复步骤 #

• 升级VSCode、Flutter插件、Dart插件到最新正式版本。这类渲染错位问题多数是插件旧版本的已知bug，升级后大概率可以直接修复。
• 调整配置避免功能冲突。打开VSCode的settings.json文件，添加以下配置：

// 关闭VSCode自带的缩进引导线，避免和Flutter UI引导线冲突
"editor.guides.indentation": false,
// 关闭VSCode自带的括号配对引导线，用Dart插件提供的配对标识
"editor.guides.bracketPairs": false,
// 开启Flutter UI引导线的自定义跟踪逻辑，提升对齐准确率
"dart.previewFlutterUiGuidesCustomTracking": true,
// 确保Flutter UI引导线功能正常开启
"dart.previewFlutterUiGuides": true

• 检查编辑器字体配置。必须使用等宽字体，非等宽字体会导致字符宽度计算异常出现错位，推荐使用JetBrains Mono、Consolas、Fira Code等常见等宽编程字体，同时不要设置过于极端的字体大小、行高数值。
• 排查第三方插件冲突。如果安装了旧版的Bracket Pair Colorizer类括号着色插件、第三方缩进线插件，请直接禁用，现在VSCode和Dart插件已经内置了相关功能，第三方插件会和原生功能冲突导致渲染异常。
• 配置修改完成后重启VSCode即可生效。

内容的提问来源于stack exchange，提问作者JuniorBOMB