1. Clearer folder structure
After creating a new flutter project, there are too many files. But we can construct these files in VSCode with very simple steps:
-
Open the command palette (Ctrl/Cmd + Shift + P)
-
Type "Preferences: Open Settings (JSON)"
-
Add the following lines of code to settings.json:
{
"explorer.fileNesting.enabled":true,
"explorer.fileNesting.expand": false,
"explorer.fileNesting.patterns": {
"pubspec.yaml": "pubspec.lock,pubspec_overrides.yaml,.packages,.flutter-plugins,.flutter-plugins-dependencies,.metadata",
"*.dart": "${capture}.g.dart",
},
"editor.codeActionsOnSave": {"source.fixAll": true},
"editor.formatOnSave": true,
}
As you can see, many files that we rarely use are now hidden in pubspec.yaml. Of course, you can expand pubspec.yam land to access these files.
2. Automatic Fix linters
It is very annoying to solve all the lining problems one by one. Even if you use e.g. the "Add const keyword" dialog, doing this every time is very time consuming in the long run. That's why we're going to create a way to automatically add these little things when saving the file.
"editor.codeActionsOnSave": {"source.fixAll": true},
3.Awesome Flutter Snippets
I know, I know, I said I'm not going to add an extension to this tip, but this extension is essential for every Flutter developer. It provides so many different Flutter snippets that you can use out of the box to speed up your development. It provides more than 40 code snippets for each use case and supports complex widgets:
4. Easier formatting
In the second tip, we discussed how to automatically add things like the const keyword. Now, we want to format the file as soon as we save it. To do this, add the following line of code to settings.json:
"editor.formatOnSave": true,