如何在VS Code中为Flutter启用类似JetBrains的inlay hints功能

前置依赖 #

首先确认已在VS Code扩展面板安装官方发布的Dart和Flutter扩展，所有Dart/Flutter代码的内嵌提示能力由这两个扩展结合Dart分析服务提供，VS Code本身仅负责提示内容的渲染。 #

配置步骤 #

1. 打开VS Code的settings.json配置文件（可通过命令面板输入Preferences: Open User Settings (JSON)打开）
2. 先添加全局Inlay Hints总开关配置：

"editor.inlayHints.enabled": "on"

该配置项可选值说明：

• on：始终显示内嵌提示
• off：始终关闭内嵌提示
• onUnlessPressed：默认显示，按住对应快捷键时临时隐藏
• offUnlessPressed：默认隐藏，按住对应快捷键时临时显示

3. 添加Dart/Flutter专属的内嵌提示规则配置，替换之前添加的不匹配的配置项：

"dart.inlayHints.enabled": true,
"dart.inlayHints.parameterNames": true,
"dart.inlayHints.localVariableTypes": true,
"dart.inlayHints.suggestedArgumentNames": true,
"dart.inlayHints.suggestedReturnTypes": true,
"dart.inlayHints.suggestedVariableTypes": true,
// 可选样式调整
"editor.inlayHints.fontSize": 12,
"editor.inlayHints.padding": true

4. 保存settings.json配置后，按Ctrl+Shift+P（macOS系统按Cmd+Shift+P）打开命令面板，执行Dart: Restart Analysis Server命令重启Dart分析服务，等待项目重新分析完成即可看到和JetBrains编辑器效果一致的内嵌提示。

不生效排查项 #

• 检查Dart/Flutter扩展版本是否不低于v3.40，低于该版本的扩展没有完整的Inlay Hints支持，直接更新扩展到最新版本即可。
• 检查当前项目下的.vscode/settings.json文件是否存在同名配置项且值为false，工作区配置优先级高于用户全局配置，会覆盖全局设置。
• 若重启分析服务仍无效果，在命令面板执行Developer: Reload Window重载整个VS Code窗口即可。

内容的提问来源于stack exchange，提问作者Raka M.A