VS Code Tricks – How To Work Faster

Share

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

command line vscode command

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

moving thru code vscode command

Move/Select tricks

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

navigate over the words vscode command

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

move to current line vscode command

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

move over the words in the name vscode command

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

select vscode command

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

next item matching selection vscode command

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

select all items selected vscode command

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

find vscode command

Files search

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

open file by the path vscode command

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:

include exclude patter while searching vscode command

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.

exclude files directories vscode command

.editorconfig is your friend

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

keep configuration across members vscode command

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:

eslint save vscode command

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:

workspace vscode command

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:

git vscode command

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:

branch name vscode command
create new branch vscode command

You can easily check diff from your IDE:

check diff from IDE vscode command

Example of a list of files with changes:

files with changes vscode command

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:

add files and commit vscode command

Plugins – must have

Add icons next to file/directory names:

vscode-icons plugin

editorconfig support:

EditorConfig plugin vscode

Linting your code:

ESLint vscode plugin

Auto fix formatting issues in your code:

prettier vscode plugin

Snippets for React and other libraries you are using:

react standard style vscode plugin

Syntax highlighter for your tools:

styled-components vscode plugin

Highlight the typos:

code spell checker vscode plugin

Extension for build in GIT:

Gitlens vscode plugin

Work in pairs remotely:

Live Share vscode plugin

Intelisense (autocomplete for your imports):

npm intellisense vscode plugin
Patch intellisense vscode plugin

Quickly changing case on the current selection:

change-case vscode plugin

Text generators:

Lorem whatever vscode plugin

Highlight the TODO comments:

todo highlight vscode plugin

Pairs the brackets with the same color:

bracket pair colorizer vscode plugin

You can run the server for OKR’s without any setup:

live server vscode plugin

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 nver go back to the old ways.

Comments
Leave a Reply

View Comments (0)...

Related articles:

VS Code Shortcuts for Mac/Windows/Linux

How To Use Memoization in JS and React?