VarunDevBlog

My VSCode configuration and extensions

Introduction

VS Code is a free and open source code editor with a massive marketplace of extensions. It comes with very cool interface, but there are plenty of powerful settings and customizations that are available for you by which you can personalize almost every minor details.

How to edit your settings

There are two ways to customize your settings:

  • UI - User Interface
  • JSON file - lets you edit the settings.json file directly, all options at one place

Editor Settings

To edit interface settings, go to settings.json

Open settings.json

  • Open the Command Palette with CMD/CTRL + SHIFT + P

  • Type Open Settings (JSON) for a JSON file

  • Type Open Settings (UI) for an interface where you can tweak with help of dropdowns and check boxes

    (you can go to the default settings format, UI or JSON, with the shortcut CTRL + ,)

Keyboard Shortcuts

You can customize the keyboard shortcuts using the keybindings.json similar to the settings.json

Open keybindings.json

  • Open the Command Palette with CMD/CTRL + SHIFT + P
  • Type Open Keyboard Shortcuts (JSON) for a JSON file
  • Type Open Keyboard Shortcuts for an interface where you can tweak with help of dropdowns and check boxes(shortcut: CTRL + K, CTRL + S)

Snippets

The following are the snippets, that help you to easily copy and paste into your VSCode

keybindings.json
[
  {
    "key": "ctrl+shift+u",
    "command": "editor.action.transformToUppercase",
    "when": "editorHasSelection && editorTextFocus && !editorReadonly"
  },
  {
    "key": "ctrl+shift+l",
    "command": "editor.action.transformToLowercase",
    "when": "editorHasSelection && editorTextFocus && !editorReadonly"
  }
]
settings.json
{
  "files.exclude": {
    "**/.git": true,
    "**/.svn": true,
    "**/.hg": true,
    "**/CVS": true,
    "**/.DS_Store": true,
    "**/_site": true,
    "**/.sass-cache": true,
    "**/.vscode": true,
    "**/*.map": true,
    "**/*.gitignore": true
  }
}