Flutter Stylizer is a VSCode extension that organizes your Flutter classes in an opinionated and consistent manner.
Note that as of release 0.1.1
, there is now a standalone version of
flutter-stylizer
(with identical output to this plugin) that is available here:
After 5 years, 119K installs, 4.9/5 stars, and zero sponsors, this project is now mothballed and archived. Feel free to fork the project to create your own version of the plugin and add your own customizations to your liking.
Flutter Stylizer organizes the class(es) within a *.dart
file
in the following manner (with a blank line separating these parts):
public-constructor
in configuration)named-constructors
in configuration)public-static-variables
in configuration)v0.1.8
, a new option flag affects this section; see below.)
public-instance-variables
in configuration)@override
variables are listed next, in sorted order.
public-override-variables
in configuration)private-static-variables
in configuration)private-instance-variables
in configuration)@override
methods are listed next, in sorted order.
public-override-methods
in configuration)v0.0.19
, two new option flags affect this section; see below.)
public-other-methods
in configuration)private-other-methods
is (optionally) specified, these will be sorted
separately from public-other-methods
.build
method is listed last.
build-method
in configuration)I have found that developer productivity increases when all code in large projects follows a consistent and opinionated style.
Additionally, bringing new developers into a team with a large code base is easier when the code is consistently written and therefore easier to navigate and understand.
Without tooling to enforce a consistent style, developing code is less fun. Having an automated tool to do this ugly work for you, however, makes coding a lot more enjoyable, as you don't have to worry about the rules, but can just run the plugin on file save, and the rules are automatically enforced. Note that this plugin doesn't natively support format-on-save, but you could use another extension... possibly something like this: https://marketplace.visualstudio.com/items?itemName=emeraldwalk.RunOnSave or you could use the stand-alone Go flutter-stylizer in your GitHub Actions or CI pipeline to perform this action for you.
To override the default order of the stylizer, add a section to your
VSCode User Preferences (Control/Cmd-,
) like this:
"flutterStylizer": {
"groupAndSortGetterMethods": false,
"groupAndSortVariableTypes": false,
"memberOrdering": [
"public-constructor",
"named-constructors",
"public-static-variables",
"public-instance-variables",
"public-override-variables",
"private-static-variables",
"private-instance-variables",
"public-override-methods",
"public-other-methods",
"private-other-methods",
"build-method",
],
"processEnumsLikeClasses": false,
"sortClassesWithinFile": false,
"sortOtherMethods": false,
}
And then rearrange member names as desired.
Note that as of v0.0.19
, two new option flags were added to modify the
behavior of the "public-other-methods" as requested in #18:
groupAndSortGetterMethods
(default: false
)
sortOtherMethods
(default: false
)
As of v0.1.5
, a new private-other-methods
field was added.
If not specified, private methods will continue to be grouped within
the public-other-methods
section.
As of v0.1.8
, a new option flag was added:
groupAndSortVariableTypes
(default: false
)
?
), and "normal".As of v0.1.12
, a new option flag was added:
sortClassesWithinFile
(default: false
)
As of v0.1.15
, a new option flag was added:
processEnumsLikeClasses
(default: false
)
These features are experimental and should be used with caution. Please file any bugs you find on the GitHub issue tracker.
If you want a super-fast way to process all files in a very large project, and aren't averse to the command-line terminal (:smile:) please remember to check out the stand-alone command-line companion tool: https://github.com/gmlewis/go-flutter-stylizer
If you install the Command on All Files VSCode extension, you can then run the Flutter Stylizer on all files within your project.
To do so, edit your VSCode settings.json
file and add this section:
"commandOnAllFiles.commands": {
"Format File": {
"command": "editor.action.formatDocument",
"includeFileExtensions": [
".dart"
]
},
"Flutter Stylizer": {
"command": "extension.flutterStylizer",
"includeFileExtensions": [
".dart"
]
}
}
Then run the command "Flutter Stylizer" and all .dart
files in your project
will be stylized.
Note that this command can take upwards of 20 seconds just to get going due
to the time it takes to scan your project for .dart
files.
Many thanks to @longtimedeveloper
for this
recommendation!
This plugin does not have a full-featured Dart syntax tree parser. As a result, it may come across Dart code that it doesn't handle properly. See the Known Issues section below for more details.
It is my goal to be able to use this plugin on large group projects, so every attempt has been made to make this robust. If, however, problems are found, please raise issues on the GitHub issue tracker for this repo along with a (short) example demonstrating the "before" and "after" results of running this plugin on the example code.
Even better, please submit a PR with your new "before"/"after" example coded-up as a unit test along with the code to fix the problem, and I'll try to incorporate the fix into the plugin.
Please remember to state which version of the plugin you are using and include your configuration settings!
dartfmt
tool typically makes
sane-looking code, and this is the type of code that is being targeted
by this extension.processEnumsLikeClasses
(default: false
)sortClassesWithinFile: true
.sortClassesWithinFile
(default: false
)groupAndSortVariableTypes
(default: false
)Function()
.mixin
blocks in addition to all class
blocks.private-other-methods
can optionally be added to the member ordering.flutter-stylizer
.groupAndSortGetterMethods
(default: false
)sortOtherMethods
(default: false
)"public-override-variables"
configuration property to allow
customization of @override
variables ordering, requested in #16.
You will need to add this new property to your flutterStylizer.memberOrdering
,
otherwise it will use the default built-in ordering.flutterStylizer.memberOrdering
configuration property to allow
customization of member ordering, requested in #11.dart
is the active editor.
This is accomplished with a language-based "activation event" for "flutter-stylizer".dart
as an editor language).Enjoy!
Copyright 2018 Glenn M. Lewis. All Rights Reserved.
Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.