VS Code Tips & Tricks

Flutter apps are built with Dart and this involves a lot of nesting for the UI code. Sometimes, it might be difficult to navigate within your code blocks. Here are some tips to make code navigation and selection easier.

Go inside a code block and press Ctrl + Shift + \. This selects the corresponding closing bracket. To select items inside a code block, press Shift + Alt + Right. Keep pressing to expand the selection.

To fold nested code, go inside it and press Ctrl + Shift + [. Keep pressing it to continue the fold. Pressing Ctrl + Shift + ] unfolds the code blocks.

To trace your steps, ie. moving your cursor to its previous locations step by step, hold down Alt + Left to trace backwards. This could be useful when working in a lengthy file and you forgot where you last inserted some code. Alt + Right moves your steps forward. Note that this traces your steps even to other files or previously closed tabs.

The Breadcrumb is another feature that could come in handy when navigation between files in your project. You can see it at the top of your editor, just below the open editor tabs. To focus on the breadcrumb, press Ctrl + Shift + ;. Press the down arrow key and this shows the Outline of the current file we’re working on.

To go through the levels, hold down Ctrl and use the left and right arrow keys to navigate. To enter a folder, just press the right arrow key, pressing left closes it. You could select a file and open it up.

Next, to easily switch between open tabs, press Ctrl + Tab. Sometimes, you might want to concentrate on a single file while working. You could enable and set the editor limit to one tab in the Settings to avoid distraction.

A faster and better option is to use the “Zen Mode.” Press Ctrl + K then Z to enter Zen Mode. This view reduces distraction and promotes focused work. To exit this mode, press the Esc key twice.

VS Code provides us with different editor layouts. To change your editor layout to a 2 by 2 grid, click on View > Editor Layout > Grid (2x2). You can open multiple tabs in different groups.

You could use this type of setup to separate something like the UI code from the business logic code in different editor groups. Closing the last file in a group terminates that group. To prevent this behavior and retain the grid layout, update your settings as follows:

"workbench.editor.closeEmptyGroups": false

Now close the file and you can see the layout is retained. Font Ligatures are characters formed by the combination of two or more characters. This can be useful for development to give character groups like comparison operators a more user friendly indentity.

To enable this, paste the following code inside your settings file:

...
"editor.fontFamily": "Fira Code",
"editor.fontLigatures": true

Make sure you install the Fira Code font as it supports ligatures. The link to this font is provided with this episode. Head over to strings.dart inside the utils folder. We could see that the arrow symbol has been combined into one symbol. And i could also show an example by using a simple if statement.

We can see Font ligatures provides us with more user friendly symbols. Sometimes, the debug toolbar could obstruct the open editor tabs. To docked the debug toolbar, enter the following code inside your settings file:

"debug.toolBarLocation": "docked"

This takes it away from this topRight corner into the debug view inside the activity bar. To quickly jump to a line number, press Ctrl + G then enter the line number.

Finally, to create a file with its corresponding folder structure in one go, enter the path separated by slashes like so: bloc/auth/login.dart. This creates the file and folders if they don’t already exist.