VS Code Tips & Tricks

Let explore some code editing features of VS Code that can come in handy during development. To rename all occurence of a variable, select it and press F2. This bring up an input field and you type in the new variable name. This changes every occurence to the new variable name. A list of all editing actions can be accessed by right clicking the editor.

To select an occurence of a word one after another, click on the word then press Ctrl + D. Keep pressing Ctrl + D to keep extend your selection.

If you want to select all occurence and change them at once, select the word and press Ctrl + F2. OR Ctrl + Shift + L. Then you could give it a new value and all of them would be updated at once. As side note, double clicking on a word selects it while a triple click selects the entire line.

To perform a global search ie. search in all files and folders, you press Ctrl + Shift + F and this takes you to the Search tab in the Activity Bar. We could search for the word “key”. And you can see, this lists out the entire results in our project.

We can limit this search to the library folder. Type in “lib” in the “files to include” field. This limits the search to the lib folder contained in the project’s directory. Clicking on a result item takes you to the word in the file. Sometimes, this view might be hidden, so click on the ellipsis to open it up.

To search for more than one word at a time, press Alt + R to change the search field to use Regular Expression. You could see there are three different search options and the regular expression one is currently selected.

Now, enter “key|category”. This searches for the words: key or category. To go to a symbol’s definition, hold down Ctrl then click on it. And this opens up the definition of this class inside your editor. I personally use this a lot during development to check class definitions and example snippets in the class. F12 also does the same thing.

Alternatively, if you just want to peek at the definition, select the symbol then press Alt + F12. And this opens up the peek window whereby you could easily see the class without having to navigate to a new editor.

Next is the Quick Fix shortcut. Pressing Ctrl + . displays the quick fix context menu. The contents of this menu is dependent on the location of the cursor.

The options for a Flutter widget would differ from functions you define. The Flutter options are provided by the Flutter extenstion already installed when you set up VS Code for Flutter development. And you can see we can perform various actions here like wrapping the Column with a new widget, centering it, wrapping it with a Container and also extracting it.

We could also access the Quick Fix option by clicking on the class or the symbol then you click on the bulb icon. Clicking on the widget’s class definition and pressing Ctrl + . gives us the option of converting the widget to a Stateful widget.

So we could come to the Column, click on Ctrl + . and wrap the Column with a Center widget. It wraps it with a Center widget. So I’ll undo tha.

Let’s extract the Container into a separate widget. Click on it then press Ctrl + .. Select “Extract Widget.” Name it “GroupTitle” then press Enter.

This creates a new Stateless widget and this feature could be useful for breaking down longer Widgets into smaller ones. If you add more properties to this widget, the Quick Fix action can also dd them to the Constructor without you having to type them out manually.

The Quick Fix action can also be used resolve warnings like removing unused imports. Comment the category variable by going to the line and press Ctrl + /. Do the same for where it is being used. You can see we have a warning about the import statement. Go to that line and open up the Quick Fix menu then you select “Remove unused import.” Let’s undo what we just did since that code is important.

Next, let’s create a new Stateless widget just down below. Type in stl and press Ctrl + Space. This triggers auto suggestion for the code and you can see we could select between a stful and stless widget. Select stless. This generates a snippet provided by the Flutter extension.

We would be covering snippets creation later in this course. Give the widget a name. Next, fill it up with some widgets. Make sure that each widget’s properties have trailing commas as this pushes each property to a new line when formatting. To format this document, press Alt + Shift + F. And you can see the code structure is much nicer.

I already have “Format on Save” option set to true in my settings. Formatting before saving just helps me have cleaner code when i’m not yet ready to save.

To duplicate code, go to the line or select it then press Shift + Alt + Up/Down Arrow to either duplicate up or down. To delete code, go to the line or select then press Ctrl + Shift + K. To move a line up and down press Alt + Up or Alt + Down depending on the direction you want to move the code.

Finally, VS Code provides us with multi cursor selection. You use this, hold down Alt then you click on the positions you want to place your cursor to select multiple points. To draw a selection, hold down Shift + Alt while dragging your mouse. This add multiple cursors to each of selected line.

You could also do this by changing the selection mode to “Column Selection Mode”. Click on “Selction” then select “Column Selection Mode” and this places your cursor at multiple points that you select. To disable it, click on the “Column Selection” button in the status bar.