My VSCode shortcuts, settings, and extensions for productivity.
Tags: vscode, productivity, javascript, web
Published: 2019-08-22 13:06:26

##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](https://marketplace.visualstudio.com/vscode).


Click on the editor then in your keyboard perform this command __CTRL+P__ then type __settings.json__.

![Starting Settings](https://thepracticaldev.s3.amazonaws.com/i/riwek3zndhs11dbtxwt5.png)

__editor.tabSize__ - indicates the number of spaces when pressing the tab key.
![editor.tabSize](https://thepracticaldev.s3.amazonaws.com/i/cr8hcsq40b544pzhwvur.png)
__editor.fontSize__ - obviously the size of the font :smile:.

__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__. <code>true</code> indicates to hide the folder or file otherwise <code>false</code>to indicate to not hide.

_Ex._
<code>src: true</code> - __hides the src folder in the current workspace__.
<code>src/**.js:true</code> - __hides all files that have an extension of _js_ inside the src folder__.
<code>package\*.json:true</code> - __hides all file that has a _package_ name on it and has an extension of _json_.__
<code>san?.js:True</code> - __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](https://thepracticaldev.s3.amazonaws.com/i/8a32dtmsz5nakm2j2yjt.png)


__With Font Ligatures__.
![With Font Ligatures](https://thepracticaldev.s3.amazonaws.com/i/0gjxxvqrcf9okbt5ib0g.png)

It's cool, right?.

Download Fira Code Font [here](https://www.fontsquirrel.com/fonts/fira-code).
Extract and then install the font after that.
![Updated settings.json](https://thepracticaldev.s3.amazonaws.com/i/sgb8k8figry0az1g1rbv.png)

__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](https://thepracticaldev.s3.amazonaws.com/i/uioexsbqg3n9igshptgo.gif)
__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](https://thepracticaldev.s3.amazonaws.com/i/bvv3vr1a4cirh6g3awps.gif)
__CTRL+K CTRL+U__ - Uncomment a block of code

__CTRL+,__ - Go to user settings
![user settings and keyboard shortcuts](https://thepracticaldev.s3.amazonaws.com/i/5pgz42l4m3f0bp7eknm5.gif)
__Ctrl+K CTRL+S__ - Go to keyboard shortcuts

__Ctrl+F__ - Find
__Ctrl+H__ - Replace
![Find,Replace and Replace All](https://thepracticaldev.s3.amazonaws.com/i/ytbf5srd20chjahk41ca.gif)
__Ctrl+Shift+Enter__ - Replace All

__ALT+Enter__ - Select all occurrences of Find match
![Alt+Enter](https://thepracticaldev.s3.amazonaws.com/i/6n1p0lycv2ckw9xuzzc5.gif)


&nbsp;
__ALT__ - Show definition
![Alt and F12](https://thepracticaldev.s3.amazonaws.com/i/5jnmgxq5f5ne1v047z1c.gif)
__F12__ - Goto definition


__CTRL+=__  - Zoom In
![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/ztdbuodgy3u9hp4ctvgb.gif)
__CTRL+-__  - Zoom Out

&nbsp;



__Shift+UpArrow__ - select all code one line up
![Shift UpArrow and DownArrow](https://thepracticaldev.s3.amazonaws.com/i/vv4pmy9wu3dnepoahn2z.gif)
__Shift+DownArrow__ - select all code one line down


__ALT+UpArrow__ - Move the selected code one line up
![Alt UpArrow and DownArrow](https://thepracticaldev.s3.amazonaws.com/i/1d3fayebzzjo5yw0ln3w.gif)
__ALT+DownArrow__ - Move the selected code one line down


__ALT+SHIFT+UpArrow__ - Copy the selected code one line up
![ALT+SHIFT UpArrow And DownArrow](https://thepracticaldev.s3.amazonaws.com/i/vkahsfy3x2w06fm71kki.gif)
__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](https://thepracticaldev.s3.amazonaws.com/i/uhupfcjwejawdx8073xc.gif)


&nbsp;
__CTRL+SHIFT+V__ - Preview Markdown
![Preview md](https://thepracticaldev.s3.amazonaws.com/i/rxxw2lz344h1q2olys45.gif)

##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](https://thepracticaldev.s3.amazonaws.com/i/xx24t6irnqla6jio0lk8.png)

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](https://thepracticaldev.s3.amazonaws.com/i/60qzko1f8t4rfs0nxh09.png)

You must have __git__ installed in your computer to add does two last commands.
You can find all the __when__ possible values [here](https://code.visualstudio.com/docs/getstarted/keybindings#_when-clause-contexts).
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](https://marketplace.visualstudio.com/items?itemName=steoates.autoimport)
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](https://thepracticaldev.s3.amazonaws.com/i/zyw54gp4r6ubl6pvubxd.gif)

###2. [Auto Rename Tag](https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag)
Auto rename paired HTML/XML tag. This works in JSX too.
![Auto Rename Preview](https://thepracticaldev.s3.amazonaws.com/i/2cld36flw90u0ez53t40.gif)


###3. [Bracket Pair Colorizer](https://marketplace.visualstudio.com/items?itemName=CoenraadS.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](https://thepracticaldev.s3.amazonaws.com/i/wivzfqx5adv4twtunxvc.gif)

###4. [Code Time](https://marketplace.visualstudio.com/items?itemName=softwaredotcom.swdc-vscode)
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](https://thepracticaldev.s3.amazonaws.com/i/v4wtyj2uep4z1dk4zo8l.gif)



###5. [CSS Peek](https://marketplace.visualstudio.com/items?itemName=pranaygp.vscode-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](https://thepracticaldev.s3.amazonaws.com/i/nrye7twdjolwz6dxmnin.gif)



###6. [DotENV](https://marketplace.visualstudio.com/items?itemName=mikestead.dotenv)
Highlights key, value pairs in __.env__ files.


###7. [Highlight Matching Tag](https://marketplace.visualstudio.com/items?itemName=vincaslt.highlight-matching-tag)
Highlights matching closing or opening tag.
![Highlight Matching Tag Preview](https://thepracticaldev.s3.amazonaws.com/i/x10i7yphykrlkz1rq385.gif)

###8. [IntelliSense for CSS class names in HTML](https://marketplace.visualstudio.com/items?itemName=Zignd.html-css-class-completion)
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](https://thepracticaldev.s3.amazonaws.com/i/y7d2qfs434roroc9a4cb.gif)


###9. [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer)
Launch a development local Server with live reload feature for static & dynamic pages.

###10. [Material Icon Theme](https://marketplace.visualstudio.com/items?itemName=PKief.material-icon-theme)
Material Design Icons for Visual Studio Code

###11. [Material Theme](https://marketplace.visualstudio.com/items?itemName=Equinusocio.vsc-material-theme)
The most epic theme now for Visual Studio Code

###12 [One Dark Pro](https://marketplace.visualstudio.com/items?itemName=zhuangtongfa.Material-theme)
Atom's iconic One Dark theme for Visual Studio Code

###13 [dark-plus-syntax](https://marketplace.visualstudio.com/items?itemName=dunstontc.dark-plus-syntax)
VS Code's default dark theme, but just a little bit better.

###14 [Noctis](https://marketplace.visualstudio.com/items?itemName=liviuschera.noctis)
Noctis is a collection of light & dark themes with a well-balanced blend of warm and cold colors

###15 [Python](https://marketplace.visualstudio.com/items?itemName=ms-python.python)
Linting, Debugging (multi-threaded, remote), Intellisense, code formatting, refactoring, unit tests, snippets, and more.


###16 [ES7 React/Redux/GraphQL/React-Native snippets](https://marketplace.visualstudio.com/items?itemName=dsznajder.es7-react-js-snippets)
Simple extensions for React, Redux and Graphql in JS/TS with ES7 syntax

###17 [Vetur](https://marketplace.visualstudio.com/items?itemName=octref.vetur)
Vue tooling for VS Code

###18 [Polacode-2019](https://marketplace.visualstudio.com/items?itemName=jeff-hykin.polacode-2019)
Take a picture of your code.

###19 [Chronicler](https://marketplace.visualstudio.com/items?itemName=arcsine.chronicler)
Take a video of yourself coding while coding.
![Chronicler Preview](https://thepracticaldev.s3.amazonaws.com/i/05x1klxxhn1waa51xhgq.gif)

###20 [TSLint](https://marketplace.visualstudio.com/items?itemName=ms-vscode.vscode-typescript-tslint-plugin)
TSLint support for Visual Studio Code

###21 [GitLens — Git supercharged](https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens)
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](https://marketplace.visualstudio.com/items?itemName=dracula-theme.theme-dracula)
Official Dracula Theme. A dark theme for many editors, shells, and more. If you like python. You'll love this.


###23 [Import Cost](https://marketplace.visualstudio.com/items?itemName=wix.vscode-import-cost)
Display import/require package size in the editor

###24 [Log File Highlighter](https://marketplace.visualstudio.com/items?itemName=emilast.LogFileHighlighter)
If you want to easily read a log file then you need this.
![Log File Highlighter Preview](https://thepracticaldev.s3.amazonaws.com/i/91tvftwipccjawo4jj2w.gif)

###25 [Slack Theme](https://marketplace.visualstudio.com/items?itemName=felipe-mendes.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.)
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](https://marketplace.visualstudio.com/items?itemName=msjsdiag.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](https://marketplace.visualstudio.com/items?itemName=formulahendry.code-runner)
Run your code snippet in one command.


##Thanks guys for reading this post.
# Have a Nice Day :smiley:!.