VS Code Tips & Tricks
Notes: 08. Improve Coding UX with Visual Guides
The material-icon-theme.folders.associations settings doesn’t work for Workspace settings, that’s why it is added to the User Settings.
The bracket pair colorizer now has an in-built alternative in VS Code.
You can enable it by pasting this setting into your settings.json file: "editor.bracketPairColorization.enabled": true
Flutter widgets heavily rely on composition which involves nesting widgets. In the previous section, we learnt how to locate the corresponsding bracket pair using the Ctrl + Shift + \ shortcut. In this episode we would be looking at extensions that could improve the visual experience while developing with VS Code.
The “Bracket Pair Colorizer” extension colorizes matching bracket pairs. With this, you could easily find matching pairs identified with unique colors as visual cues. To install this, head over to the extensions view and search for “bracket pair colorizer.” Select and install the version 2. This version uses a better parsing engine which renders the colors quickly.
Head back to your dart file and you can see that each matching bracket pair is colorized. So when I click on this, I can immediately see the corresponding end bracket without having to use a shortcut.
It also applies colors for square and curly braces too. It also colorizes the UI guides which visually shows you the link from the start to the end of the bracket.
Themes can also be installed from the marketplace. You have the Color and File Icon Theme groups. I use the Dark Color theme that comes with VS Code but i installed the “Material Icon Theme”. This gives my file and folder a better look and relatable feel. Go ahead and install the “Material Icon Theme.”
When you’re done, press Ctrl + Shift + P to open up the Command Palette. Search for “Theme” and select “File Icon Theme”. Moving through each one gives you a live preview of what it would look like. The same happens when you move through the color theme.
If you notice, the widgets folder in the sidebar uses the default icon for folders while others use more descriptive icons. We could easily change this in the Settings and associate another icon to the widgets folder.
Open up settings in JSON view. Paste the following code.
"material-icon-theme.folders.associations": {
"widgets": "Layout",
}
This associates any folder named widgets with the Layout icon. Save the file. And now you can see that widgets folder icon has been updated. There are other extensions like the “Indent Rainbow” and “Better Comments” which uses colors to improve user experience. Now, go ahead and try them out.