DEV Community

Cover image for My VSCode shortcuts, settings, and extensions for productivity.
Mark Abeto
Mark Abeto

Posted on • Edited on

My VSCode shortcuts, settings, and extensions for productivity.

Hi Guys Good Day!

I've used a lot of IDE's and Code Editors since I started coding from college to my first job, Python's IDLE, PyCharm, Notepad++, Visual Studio and Android Studio and VS Code. But I felt more satisfied and happy when I used VS Code in my first job due to the reason its light, fast and has many useful extensions.

Click on the editor then in your keyboard perform this command CTRL+P then type settings.json.

Starting Settings

editor.tabSize - indicates the number of spaces when pressing the tab key.
editor.tabSize
editor.fontSize - obviously the size of the font 😄.

editor.formatOnSave - this formats the file contents when saving the file or the shortcut CTRL+S.

editor.detectIndentation - we must set this to false so it does not override our editor.tabSize setting.

files.exclude - files or folders to include or exclude in files explorer. You can use glob patterns. true indicates to hide the folder or file otherwise falseto indicate to not hide.

Ex.
src: true - hides the src folder in the current workspace.
src/**.js:true - hides all files that have an extension of js inside the src folder.
package*.json:true - hides all file that has a package name on it and has an extension of json.
san?.js:True - hides all files that that starts with san and have any single character after it and has an extension of js. Matches sand.js and sane.js but not sandy.js.

emmet.includeLanguages - enables emmet abbreviations in languages that are not supported by default.

javascript.updateImportsOnFileMove.enabled - updates import statements when file name is changed for js files.

typescript.updateImportsOnFileMove.enabled - updates import statements when file name is changed for ts files.

Enabling Font Ligatures in VSCode

So what are font ligatures, basically a font ligature is when two or more symbols, letters or characters are joined to form a new character.

Without Font Ligatures.
Without Font Ligatures

With Font Ligatures.
With Font Ligatures

It's cool, right?.

Download Fira Code Font here.
Extract and then install the font after that.
Updated settings.json

editor.fontFamily - Specify the fonts to be used in the editor.
editor.enableFontLigatures - enables font ligatures or not.

Keyboard Shortcuts

CTRL+SHIFT+P - show the command palette
CTRL+k CTRL+T - show the lists of themes
CTRL+T - Finding a class, function or variable in all files.
CTRL+K Z - Toggle Zen Mode
Zen Mode and Select Line
CTRL+L - Select the current line in the cursor.
CTRL+R - Reload window
CTRL+` - Toggle the terminal window
CTRL+SHIFT+` - Create a new terminal instance
CTRL+P - Find a specific file in your current folder
CTRL+K CTRL+Z - Comment a block of code
Comment-Uncomment
CTRL+K CTRL+U - Uncomment a block of code

CTRL+, - Go to user settings
user settings and keyboard shortcuts
Ctrl+K CTRL+S - Go to keyboard shortcuts

Ctrl+F - Find
Ctrl+H - Replace
Find,Replace and Replace All
Ctrl+Shift+Enter - Replace All

ALT+Enter - Select all occurrences of Find match
Alt+Enter

 
ALT - Show definition
Alt and F12
F12 - Goto definition

CTRL+= - Zoom In
Alt Text
CTRL+- - Zoom Out

 

Shift+UpArrow - select all code one line up
Shift UpArrow and DownArrow
Shift+DownArrow - select all code one line down

ALT+UpArrow - Move the selected code one line up
Alt UpArrow and DownArrow
ALT+DownArrow - Move the selected code one line down

ALT+SHIFT+UpArrow - Copy the selected code one line up
ALT+SHIFT UpArrow And DownArrow
ALT+SHIFT+DownArrow - Copy the selected code one line down

CTRL+B - Toggle Sidebar
CTRL+SHIFT+X - Show Extensions
CTRL+SHIFT+G - Show Source Control
CTRL+SHIFT+E - Show File Explorer
CTRL+SHIFT+D - Show Debug
SideBars

 
CTRL+SHIFT+V - Preview Markdown
Preview md

Editing or Adding new Keyboard Shortcuts

Ok, let's edit and add some keyboard shortcuts.

Click on the editor then in your keyboard perform this command CTRL+P then type keybindings.json.

Keybindings.json

Ok, I'm gonna change my Reload Window command from CTRL+R to CTRL+E
and I'm gonna add two new commands Git Commit and Git Init.
updated keybindings.json

You must have git installed in your computer to add does two last commands.
You can find all the when possible values here.
There's a lot of commands in VSCode that you can edit or change.
All the commands that are available in your editor. Do this command
Ctrl+K CTRL+S. But watch out, if you add or edit a new command with a new keybinding that keybinding must not exist in the current commands.

Extensions that I use

1. Auto Import

Automatically finds, parses and provides code actions and code completion for all available imports. Works with Typescript and TSX. This extension finds the file path for you isn't that amazing.

Auto Import Preview

2. Auto Rename Tag

Auto rename paired HTML/XML tag. This works in JSX too.
Auto Rename Preview

3. Bracket Pair Colorizer

A customizable extension for colorizing matching brackets. If you have a problem in finding the end pair of a bracket or a curly brace then this extension is perfect for you.
Bracket Pair Colorizer Preview

4. Code Time

Code Time is an open-source plugin that provides programming metrics right in Visual Studio Code. Find out the amount of time you spent coding in a day and a week and what languages that you spent your time most.
Code Time Review

5. CSS Peek

Allow peeking to CSS ID and class strings as definitions from HTML files to respective CSS. Allows peek and goto definition.
Alt Text

6. DotENV

Highlights key, value pairs in .env files.

7. Highlight Matching Tag

Highlights matching closing or opening tag.
Highlight Matching Tag Preview

8. IntelliSense for CSS class names in HTML

CSS class name completion for the HTML class attribute based on the definitions found in your workspace. If you sometimes forgot your CSS classes then this extension is perfect for you.
IntelliSense for CSS class names in HTML Preview

9. Live Server

Launch a development local Server with live reload feature for static & dynamic pages.

10. Material Icon Theme

Material Design Icons for Visual Studio Code

11. Material Theme

The most epic theme now for Visual Studio Code

12 One Dark Pro

Atom's iconic One Dark theme for Visual Studio Code

13 dark-plus-syntax

VS Code's default dark theme, but just a little bit better.

14 Noctis

Noctis is a collection of light & dark themes with a well-balanced blend of warm and cold colors

15 Python

Linting, Debugging (multi-threaded, remote), Intellisense, code formatting, refactoring, unit tests, snippets, and more.

16 ES7 React/Redux/GraphQL/React-Native snippets

Simple extensions for React, Redux and Graphql in JS/TS with ES7 syntax

17 Vetur

Vue tooling for VS Code

18 Polacode-2019

Take a picture of your code.

19 Chronicler

Take a video of yourself coding while coding.
Chronicler Preview

20 TSLint

TSLint support for Visual Studio Code

21 GitLens — Git supercharged

Supercharge the Git capabilities built into Visual Studio Code — Visualize code authorship at a glance via Git blame annotations and code lens, seamlessly navigate and explore Git repositories, gain valuable insights via powerful comparison commands, and so much more

22 Dracula Official

Official Dracula Theme. A dark theme for many editors, shells, and more. If you like python. You'll love this.

23 Import Cost

Display import/require package size in the editor

24 Log File Highlighter

If you want to easily read a log file then you need this.
Log File Highlighter Preview

25 Slack Theme

Color scheme inspired by Slack's default themes

26 Docker

Adds syntax highlighting, commands, hover tips, and linting for Dockerfile and docker-compose files. I haven't used docker but I heard that it's a great technology and I hope in the future that I will use it.

27 Debugger for Chrome

Do you want to debug your React code in VSCode then get this extension. Debug your JavaScript code in the Chrome browser or any other target that supports the Chrome Debugger protocol.

28 Code Runner

Run your code snippet in one command.

Thanks guys for reading this post.

Have a Nice Day 😃!.

Top comments (36)

Collapse
 
labibllaca profile image
labibllaca

A really good article here Mark, thank you.
Is it possible to add more commands in the keybindings.json file like the snippet below?

...
{
"key":"altGr+/",
"command":"openTerminal + whoamI"
}

Additionally i dont know hows the right name of the right alt-key :D

Collapse
 
macmacky profile image
Mark Abeto • Edited

Thanks, I appreciate that you like it. Of course, you can add as much as you like but remember that your new command must have a different key binding not included in the default keybinding settings CTRL+K CTRK+S.

Collapse
 
labibllaca profile image
labibllaca

All right thank you. Is it possible to apply 2 commands with a shortcut though ?

Thread Thread
 
macmacky profile image
Mark Abeto

Hi! Ok, I tried using one key binding for two commands.

Sample.json

So, when I pressed CTRL+B the toggle sidebar command works but the toggle terminal does not. Basically, It prioritizes the last command you put in your settings.

Thread Thread
 
labibllaca profile image
labibllaca

Hi Mark thanks for your response. All right I got it.
What I was looked for isn't possible in vs code apparantly.
I was hoping with a shortcut to open the terminal and then to apply an command on the terminal.
Like an combination of to shortcut into one.

Have a great day.

Thread Thread
 
macmacky profile image
Mark Abeto • Edited

😃 That's some advanced shit man! Maybe the VSCode devs will apply that in the future just wait. Have a Nice Day too!

Thread Thread
 
labibllaca profile image
labibllaca

hehehehe I see....maybe there is a workaround I need to find. Something like linux in its terminal has where more commands could be executed from one line devided by a semicolon.

Greeting,
Labi

Thread Thread
 
macmacky profile image
Mark Abeto

Ok, If I find some workarounds about the problem that you want to solve I will tell you about it but for now Good Luck Labi!.

Thread Thread
 
labibllaca profile image
labibllaca • Edited

Yeah, thanks for man. Same here, if I find something usefull I'd share it here too.

Collapse
 
jasonre42705235 profile image
Jason Rees

Hey Mark, Nice and Interesting I can see that you have mention all the shortcuts and brief explain about Vs Code. This will definitely help to all the developers/Coders. I have also one of the best article in which you can see the top essential extension of VS Code. To increase your productivity.

codersera.com/blog/top-essential-e...

Collapse
 
macmacky profile image
Mark Abeto

Thanks, Jason. Glad you like it. Ok, I'm gonna check that out rn.

Collapse
 
nilkanthjp profile image
Nilkanth Patel

Of all these, I think (somewhat surprisingly) the most valuable to me is Fira Code. Am I betraying my inner designer? I love how clean it makes my code look though with all the ligatures. Best fixed-width font out there!

Collapse
 
pavelloz profile image
Paweł Kowalski • Edited

Font ligatures are cool. And hurt readability, hence productivity, as well.

Collapse
 
shaunagordon profile image
Shauna Gordon

I suspect that's highly subjective.

I've used Fira Code with ligatures for years now and don't find it to harm either readability or productivity, in no small part because the new ligature fonts were designed with readability in mind.

If you don't find it readable, then choose a different font, or turn off ligatures (an option when using Fira Code; I don't know about the other ligature fonts, since I don't use them).

Collapse
 
macmacky profile image
Mark Abeto

I couldn't have said it better myself.

Collapse
 
tdotholla profile image
Kiel • Edited

I love the Fira Code ligatures because it replaces multiple symbols with single symbols (i.e. === to the triple dash, or !== to the 'not equal sign') but i see the pain of making the brain relearn the symbols for a few weeks..

but ooh it's so fun to write and so pretty to read....
it's like authoring a story instead of 'writing code'....

Collapse
 
macmacky profile image
Mark Abeto

😃 I know right but if you keep using it. It will be a lot easier in time and the symbols are cool af right.

Collapse
 
macmacky profile image
Mark Abeto

Hi Pawel! I think it entirely depends on the user. I really like Fira Code and I don't think it hurts productivity.

Collapse
 
oburejin profile image
oburejin

Why do you have so much themes? Is it for different projects?

Collapse
 
macmacky profile image
Mark Abeto • Edited

Honestly, I have more than 10 themes. I'm trying to find the right one that makes me comfortable. Yea, sometimes I use a different theme in a different project. But mostly I use dark-plus-syntax.

Collapse
 
oburejin profile image
oburejin

Oh, good luck with finding “the one”, not an easy task :)

Collapse
 
ecaepp profile image
ecaepp

You should checkout the extensions Rainbow brackets and rainbow indent. They are both nice editions to vs code.

Collapse
 
arberbr profile image
Arber Braja

Thank you for this exhausting collection of info. Im finding it easier to check the shortcuts here then on the original doc.

Also, im using extensions but i see some one one im gonna install asap.

Collapse
 
macmacky profile image
Mark Abeto

Thanks, man. Glad you like it!.

Collapse
 
mujeebishaque profile image
Mujeeb Ishaque

I read the full write-up. It's succinct and very interesting. Thanks for posting.

Collapse
 
macmacky profile image
Mark Abeto

Thanks, man! I really appreciate that you like it.

Collapse
 
codesomething profile image
Code Something • Edited

That's a really comprehensive / informative article, thanks for the post! I actually discovered some extensions from your post that I'm using right now. My previous favorite was vscode keyboard shortcuts tutorial.

Collapse
 
alyson profile image
aly quey

Thanks for the awesome information. :)

Collapse
 
macmacky profile image
Mark Abeto • Edited

No problem aly! Glad you like it.