Skip to content

1. VS Code Configuration

Extensions

Core Extensions

  1. Azure Tools Most common tools required for interacting with Azure Resources azure-tools-ext.png

  2. Azure Account For common sign-in and subscription management azure-account-ext.png

  3. GitLens Allows you to see who, why, and how lines of code have changed over time. git-lens-ext.png

  4. HashiCorp Terraform For terraform syntax highlighting and autocompletion hashicorp-terraform-ext.png

  1. Settings Sync To allow you to upload your VS Code settings and sync between different machines. Saves time to reconfigure VS Code everytime you have a new machine. settings-sync-ext.png

Additional extensions

  1. TODO Highlight Makes TODOs stand out much more. Shift + CMD + P to open palette and type "TODO List highlighted" so you can retrieve all highlighted content. By default, "TODO:" and "FIXME:" will be highlighted. todo-highlight-ext.png

  2. Bookmarks To add bookmarks to any line of code. Right click on the line and click on "Bookmark: Toggle". bookmark-ext.png

  3. Bracket Pair Colorizer Gives the opening and closing brackets matching colors, making it much easier to know which brackets belong together. bracket-pair-ext.png

  4. Colorize Instantly visualizes CSS colors in your CSS/SASS/Less/... files. This makes it very easy to see at a glance which colors you’re using where. colorize-ext.png

  5. Markdown PDF Write it in Markdown, export a PDF as output. Really useful to export or share README files in other format. Open the .md file and right-click anywhere inside and choose "Markdown PDF: Export (PDF)" or select other options for exporting in other formats. markdown-pdf-ext.png

Icon themes

  1. vscode-icons has default windows-style folder icons: vscode-icons-ext.png
  1. VSCode Great Icons has default macOS-style folder icons: vscode-great-icons-ext.jpg

Both will make it easier to differentiate between different files at a glance.

VSCode Themes


  1. One Dark Pro:

one-dark-pro.jpg


  1. One Dark Theme:

one-dark-theme.png


  1. Atom One Light Theme:

atom-one-light-theme.png


  1. Monokai One Dark Vivid:

monokai-one-dark-vivid.png


  1. One Monokai Theme

one-monokai-theme.png


Useful tips and Shortcuts

Shortcuts

Command Description
CTRL + / Toggle line comment
SHIFT + CTRL + A Toggle block comment
CTRL + ` Show/Hide terminal
CTRL + \ Split editor
CTRL + W Close editor in focus
ALT + Click Insert cursor
CTRL + ] Indent selected text
CTRL + [ Outdent selected text
CTRL + = Zoom in layout
CTRL + - Zoom out layout
CTRL + SHIFT + TAB Open previous file

More VSCode windows shortcuts download here

Tips

  1. Documenting your code in a markdown file (README.md)? Right click on the file and select 'Open Preview' to see how it looks without even leaving VSCode

  2. Use the extension Markdown PDF to convert your markdown file to a pdf and easily share it with anyone. If you are using HTML img tags with absolute paths for images, for Markdown PDF will not be able to retrieve those images to generate a PDF. You will see broken image icons everywhere in your file. To resolve that you can either use HTML img tags with relative paths (but then these will not be displayed in DevOps portal), or you can install the grip tool, which creates a localserver for you to open in your browser. You can then use the browser print utility to print in pdf. This option will work with absolute paths. π To install grip, simply:

$ pip install grip

On OS X, you can also install with Homebrew:

$ brew install grip