How can I get the code/components scaffolding guide lines shown in the following screenshot?
I would like to know what plugins or method/settings to use in order to get this during coding as it will enhance productivity in a large code base.
Install the Flutter extension. (Actually, the following steps might work even if you only install the Dart extension, since the following settings are all registered under the Dart extension instead of the Flutter one for some odd reason)
Put the following in your settings.json file:
"dart.previewFlutterUiGuides": true
The setting's description (at the time of this writing):
EXPERIMENTAL: Whether to enable the Flutter UI Guides preview.
And quoting from that linked documentation:
- The rendered lines may be broken/dashed depending on your editor line height. You can avoid the broken lines by adjusting your editor line height (for example
"editor.lineHeight": 15
). We’re looking for ways to avoid this (and would appreciate 👍s on this VS Code issue).- There may be a delay between modifying code and the guides updating. You may be able to reduce this delay by enabling
dart.previewFlutterUiGuidesCustomTracking
. Feedback on whether guides work better with or without custom tracking should be posted in this issue.- Enabling UI guides does not automatically turn off Closing Labels, so you may also wish to also disable
dart.closingLabels
.- You’ll need to restart VS Code (or run the Reload Window command) after changing the UI Guides settings for them to apply.
See also the following related settings to see if you want to adjust them:
dart.flutterUiGuides
: "The color of the Flutter UI Guidelines shown in the editor."dart.previewFlutterUiGuidesCustomTracking
: "EXPERIMENTAL: Whether to enable custom tracking of Flutter UI guidelines (to hide some latency of waiting for the next Flutter Outline)."Profit.
Loosely related on the point of doing Flutter development with VS Code: https://docs.flutter.dev/development/tools/vs-code.