automatic add comma after close parenthesis

[liudonghua123]

Thank you for taking the time to file an issue!

This tracker is for issues related to:

• Analyzer

If you aren't sure, file the issue here and we'll find the right home for it.
In your issue, please include:

• Dart SDK Version (dart --version) 2.9.0
• Whether you are using Windows, MacOSX, or Linux (if applicable), yes, Windows
• Whether you are using Chrome, Safari, Firefox, Edge (if applicable), yes, Chrome

I use vscode to develop flutter apps a lot. In order to make code format better and look nice, I always manually add comma after each close parenthesis. Could we add a options in Analyzer settings to support automatic add comma after close parenthesis if applicable. This would reduce the boring repetitive work.

[srawlins]

@DanTup for a VS Code user, would this be something that Dart Code would need to implement? I think this would be IDE-specific rather than an analysis server feature.

@liudonghua123 Can you give an example? I'm not sure why a close parenthesis would be the signal to insert a comma...

[liudonghua123]

@srawlins For example, with a comma after each close parenthesis. The formatted code would like this.

And if I removed some optional comma. The formatted code would like this.

The indent of the code is not as nice as previous one which add a comma after each close parenthesis.

[srawlins]

CC @munificent who has spent a lot of time thinking of the ergonomics of authoring Flutter widgets.

I see that in your examples, commas happen to follow parentheses, but they are unrelated. If you declared AroundRecommend(key: ValueKey(1)) in a field or local variable above, then there would be no parentheses nested in the call to Padding(). Your example has many instantiated objects, but I think the commas simply relate to the end of a list element or a function argument.

Bear with me, but I think this solution would provide what you are looking for:

When you open a class body with {, your editor will provide a paired } on the line below, so that you don't have to type it. What if the IDE provided a comma immediately following your cursor, while editing Flutter widgets, during the following actions (CC @DanTup again on this idea):

• When you are editing a literal list, set, or map ([] or {}, like the value passed to children:), or providing arguments to a function, like a constructor like Padding() or AnimatedSwitcher(), each time you type a comma, the editor inserts a comma immediately after your cursor. This sounds weird, but you basically want every value wrapped on the left and right with a comma.
• Additionally, when you open a list or function call, the editor could place a comma immediately to the right of the cursor (as well as the right parenthesis). I'm not keen on this one, because of one-line function calls and lists (for example, SizedBox(height: 10) rather than SizedBox(\n height: 10,\n)).

Also, there is a request to the formatter to auto-insert trailing commas: dart-lang/dart_style#753

[DanTup]

@srawlins

@DanTup for a VS Code user, would this be something that Dart Code would need to implement? I think this would be IDE-specific rather than an analysis server feature.

I think it may need work on both the client and server - the VS Code extension doesn't have a real AST so it can't (reliably) make decisions about the code being typed.

However - I'm not sure even with that knowledge that a feature that alters what you're typing could be done well. In VS Code all extension code runs asynchronously from the editor (in another process). That means if you're typing quickly, the document may have been modified before the extension code has run (or between it generating edits and getting them back to the editor) and weird things could happen. There's a way to handle keypress synchronously but it causes serious performance issues because all extensions are sharing a single nodejs thread (and in the case of Codespaces/Gitpod/etc. that thread may be on a remote machine from the editor UI).

Additionally, when you open a list or function call, the editor could place a comma immediately to the right of the cursor (as well as the right parenthesis)

This is something that cross my mind before - as part of code completion. Eg. if you picked MyWidget() and we inserted MyWidget(,) (we can do this as part of the completion to avoid any latency/race issues) and put your cursor before the comma. You would leave that comma at the end as you type your arguments. Eg. you type a, b, c and now you have MyWidget(a, b, c,)?

Also, there is a request to the formatter to auto-insert trailing commas: dart-lang/dart_style#753

Part of me wonders why - if the commas can be auto-added reliably by a fix/format operation, why the formatter couldn't just format that way anyway? My understanding was that using the commas was to allow the user to choose where to put them to get the best formatting - but if there's a fix to automatically insert them, that removes the ability the customise them - at which point it seems like the formatter could format that way without them?

Inserting them during save/format/etc. does feel like the most reliable way to me though - it avoids all the gotchas mentioned above, and VS Code has support for format-on-type, so it's already doing some consolidating of edits made by a formatter as the user is typing.

[srawlins]

I think this may take the form of a dart fix item. There is an experimental linter rule, https://dart-lang.github.io/linter/lints/require_trailing_commas.html, which could have a quick fix.

[bwilkerson]

I suspect that tall-style in the formatter has negated the need for this support, so I'm going to close this issue.