VS Code Tips & Tricks

Adding a new dependency to your Flutter project requires about six (6) steps: you head over to https://pub.dev, search for the package, open it up, click on the “installing” tab, you copy the package text with it’s version number and you head back to your project and paste it in the pubspec.yaml file.

Now, what if I told you we could do all that without having to leave VS Code. Pubspec Assist to the rescue.

Inside VS Code, search for pubspec assit and install it. Open up your pubspec.yaml file. Note that this is required for the extension to work. Open up the Command Palette and search for “pubspec assist.”

Select it. Next enter the package name which you intend installing. Here enter “http”. This brings out a list of http related packages. Select “http” and voila!!! You have the latest version of the http package added to the dependencies without having to leave VS Code.

Next, let’s manage our import statements. For this, we would be using “dart-import” extension. Install this extension. This extension simply converts the import statements in a dart file to relative imports.

Open up a dart file. You can see they are all currently absolute imports. Relative imports could be beneficial if we chanage the project’s folder name. We don’t have to update files with the new folder name since they are relative. Also, dart guidelines also suggest you use relative imports for files inside your lib folder since relative imports are shorter.

Open the Command Palette and search for “Fix Imports” and select it. And you can see the imports are now relative. Note that the imports it fixes are the ones from our project’s folder. It leaves external packages like material, http and others as they are.

It also calls a VS Code command: “Organize Imports”. This orders the import statements and removes all unused imports. You can go ahead and implement this for other dart files.