Get the most out of your Visual Studio Code with these gem features
Do you use Visual Studio Code? Great! Now, let’s make your experience easier.
There are a lot of code editors out there but only a few packs as many features as Visual Studio Code. I’ve already talked about why I think it’s the best code editor out there currently (2020). If you haven’t, you can read the article here.
Use these features to boost your productivity while coding with VSCode:
1. Multi-cursor editing
I first saw this feature in Sublime Text and it blew my mind. It’s super helpful and once you start using it, you’re not going back to normal 😉.
To achieve this, you simply use the middle-click (wheel click) to click and drag to highlight multiple lines, or use the keyboard shortcut shift+option+command and up or down to highlight the line(s) above or below. Alternatively, you can look up the shortcut by searching in Preferences/Keyboard Shortcuts for cursorColumnSelectUp.
There is another way of adding keywords to your multi-cursor editing is done with adding keyword occurrences to your highlight and then start editing. Just highlight a keyword that you want to edit with all it’s occurrences and hit command+d or ctrl+d to start adding the next occurrence to your highlight, keep hitting the same shortcut to add more. Then, you can edit them all. If you are are trying to rename a variable with this, you should probably use F2 to refactor the variable.
2. Sort lines
It’s one of these features that you need to improve maintainability by sorting a bunch of switch cases alphabetically or Markdown table rows. See the example below:
To do this, highlight the lines you want to sort and toggle the command palette and type sort. You can sort the lines either Ascending or Descending.
3. Text transform
This feature lets you do text transformations on the text you highlight. The transformations allowed at the time of writing this article are UPPERCASE, lowercase, or Title Case. This is not only used when working with text since some of you are already using an internationalization utility to render text. It’s also used to quickly write variables that are in camel case. Just highlight the multiple keywords, toggle the command palette and type transform.
4. Duplicate lines
This is probably the simplest feature, basically, instead of highlighting a line of code, copying it and pasting it multiple times to duplicate it, you can just use a shortcut that saves you time. The shortcut is shift+option+up or down to duplicate the line up or down. You can look up the equivalent shortcut in Windows by searching for Copy Line Up.
5. Search solution with regular expression
I think it’s safe to say that all code editors offer search functionality that will scan your whole project for a keyword or a phrase. However, only a few of them offer a regular expression search. Basically, you can use regular expression to search for something, and you can even replace the bits you want to replace leaving some parts untouched. This is a lifesaver, especially when refactoring your code. For example, you want to replace all CSS transform to use a mixin called transform that adds support to all browsers:
@mixin transform($props) {
-webkit-transform: $props;
-moz-transform: $props;
-o-transform: $props;
-ms-transform: $props;
transform: $props;
}Given that you import and made the mixins available globally, now, instead of trying to find all instances and replacing them one by one, you can open the search from the activity bar, and type the following in the search field:
transform: .+?;And type the following in the replace field:
@include transform($1);The .+? is similar to .* in regular expression. Therefore the search will be looking for anything that starts with transform: , and ends with a semicolon. The $1 is a variable that stores anything found using .+? so that you can inject it back. Bear in mind, that if you are using multiple .+? you can inject them all when using $1 , $2 and so on.
6. Emmet
This is not a new feature in code editors, I’m only mentioning it here for those who don’t know that it exists. In short, emmet allows you to pull snippets quickly and even construct templates. This feature is usually installed as an extension, but in VSCode, it’s built-in.
7. Wrap elements with abbreviation
So, you’ve written HTML and found out later that you need to have a bunch of elements nested inside other elements. It’s an easy problem to solve, however, it can be quicker and easier, thanks to VSCode. Just highlight the lines you want to wrap, toggle the command palette, and type wrap. Select wrap with abbreviation and start writing with emmet. See the example below:
That’s it! If you know more cool features of Visual Studio Code please share them in the comment section below.
