DEV Community

Zubayer Himel
Zubayer Himel

Posted on

My VSCode shortcuts and extensions for development

Hello everyone, Good Day 😊

Knowing shortcuts of your editor give you an upper hand while developing. Below are the some shortcuts and extensions that I use/frequently use -

Keyboard shortcuts

Ctrl+Shift+E - Open file explorer
Ctrl+Shift+D - Open debugger
Ctrl+Shift+X - Open extensions
Ctrl+Shift+P - Open command palette
Ctrl+Shift+I - Format code (Linux)
Ctrl+Shift+K - Delete line
Ctrl+Shift+L - Select all occurrences of current selection
Ctrl+Shift+[ - Fold the selected line of code
Ctrl+Shift+] - Unfold code
Ctrl+Shift+V - This command lets you to get the preview of the .md file
Ctrl+Shift+Enter - Insert line above
Ctrl+Shift+ - Open new terminal

Ctrl+B - Toggle on/off sidebar
Ctrl+P - Go to file in the current folder
Ctrl+L - Select the current line in the cursor
Ctrl+G - Go to line number
Ctrl+R - Shows all the folder in the current directory
Ctrl+F - Find anything in the file
Ctrl+H - Replace any word
Ctrl+D - Add selection to next match
Ctrl+, - Open settings
Ctrl +k, Ctrl+T - Open themes
Ctrl+J/Ctrl+` - Quick open to current terminal

Alt+UpArrow - Shift current line above
Alt+DownArrow - Shift current line down
Alt+Click - Add new cursor

Alt+Shift+UpArrow - Copy and shift current line/selected lines to above
Alt+Shift+DownArrow - Copy and shift current line/selected lines to down
Alt+Shift+F - Format code (Windows)

Ctrl+Alt+Shift+DownArrow/ Ctrl+Alt+DownArrow - Add cursor down
Ctrl+Alt+Shift+UpArrow/ Ctrl+Alt+UpArrow - Add cursor above

You can change or make any shortcut willingly.

Extensions

Live Server

This extension is way too good when you are making a static website using html,css. After installation, all you need to open the live server. You can do this by clicking Go Live from the status bar or simply press Alt+L, Alt+O. You can terminate server by pressing Alt+L, Alt+C

Live Sass Compiler

It will compile all your code written in .scss format to .css format

ES7 React/Redux/GraphQL/React-Native snippets

It provides some cool shortcuts if you use React

Polacode

It lets you to take nice screenshots of your code. Press Ctrl+Shift+P and write polacode and hit enter. It will open a panel in the right side. Now Select your code and take screenshot.

Material Icon Theme

It provides material icons in your files.

Dracula Official

There are lots of black themes but I like this one.

These are the shortcuts and extensions I use. Any kind of suggestions would be appreciated. Thank you

Top comments (0)