VS Code Tricks — How To Work Faster

Mariusz Marcak
Nov 6 · 5 min read

VS Code is a free and simple source code editor with powerful developer tooling, like IntelliSense code completion and debugging.

Let’s have a look at a few tricks we can use to make our development faster and more pleasant.

As I’m working on Mac on a daily basis, I will use a cmd button, but most of the commands should work with ctrl at windows.

Command line

VS Code has a powerful command line that allows you to do many things. The ones that got my attention the most are:

  • Use commands from your extensions
  • Open preferences
  • Change theme 🙂

To use the command line, simply press cmd + shift + p

Must-know shortcuts

The most important thing that will help you work faster is to learn basic shortcuts. It can increase your development speed, as you won’t have to use your hand to handle the mouse.

Moving through your code

To navigate faster through your code use cmd + arrows:

cmd + up goes to the top of the file
cmd + down goes to the bottom of the file
cmd + (left/right) goes to the sides of the line

Move/Select tricks

Use alt + arrows (right/left) to navigate over the “words”:

Use alt + arrows (up/down) to move current line:

Use ctrl + alt + arrows (left/right) to move over the “words” in the name:

Use shift + arrows (alt + ctrl optional) to select:

Use cmd + D to select next item matching our selection:

Use cmd + shift + l to select all items matching our selection:

Case sensitivity from two tricks mentioned above depend on this setting. To open cmd + f:

Files search

Use cmd + p to open the file by the path:

Search pattern

Use cmd + shift + f to open the search menu.

You can include or exclude any pattern you want while searching for the files to limit the results:

Exclude directories

Use cmd + shift + p
then type user settings
then type exclude in setting search
then add everything you want to exclude

You can exclude files/directories from search results, sidebar visibility, etc.

.editorconfig is your friend

Using .ediconfig allows you to keep one configuration across all team members (extension required — check the list of plugins below):

Auto fix

Want to save tons of time and automatically fix some small errors? Use Auto fix on save! (if you are using Eslint/Prettier)

Simply go to user settings and search for eslint save:

Settings per workspace

We can also change the configuration per project. You don’t have to worry about project specific configuration because you can save your setting per workspace:

GIT Tricks

You can commit, push, pull, undo, stash, change branches etc from IDE.
Just simply click GIT icon on the left side of IDE:

Click three dots on to the top corner of the sidebar to see a list of available commands.

Click your branch name in the bottom left corner to change/create branch:

You can easily check diff from your IDE:

Example of a list of files with changes:

To add files and commit simply click “+” next to the changed file in the changed file list on your sidebar. You can also undo all changes on file or all changes at all.

More shortcuts

Check out also more shortcuts for Mac, Windows, and Linux.

Summary

VS Code is not only a great source code editor. It has also many available tools you can use to make your life and development easier and better.

It speeds up my work a lot since I’ve started to use them. I bet once you try and learn them, you will never go back to the old ways.

Pagepro

For CTOs and front-end developers

Mariusz Marcak

Written by

Building the most demanding web & mobile apps. Works for React (Native) Software House.

Pagepro

Pagepro

For CTOs and front-end developers

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade