VS Code is the hottest IDE out there, and the most asked question I get at every conference I attend is, “what VS Code extensions are you using?”. Since I got this question so much, we decided to dedicate a portion of our CFML News Podcast to VS Code Hints, Tips and Tricks. We had 34 episodes in 2019, each with a VS Code hint tip or trick, so we wanted to give you a way to see all of them in one place, so here they are.

5/7/19 – Workflow : Command + P / Ctrl + P for finding files and or function / symbols

It’s great for quickly finding files and even variables or functions in your site, its quick and easy, and once you know about it, your life will be much easier.
Added by: Gavin
Publish Date: 5/7/19

5/14/19 – Extension: Indent-Rainbow ( oderwat.indent-rainbow )

Oderwat – 570,801 downloads
Description: Makes indentation easier to read. This extension colorizes the indentation in front of your text alternating four different colors on each step. Some may find it helpful in writing code for Nim or Python.

Added by: Gavin
Publish Date: 5/14/19

https://marketplace.visualstudio.com/items?itemName=oderwat.indent-rainbow

5/28/19 – Extension: GitLens — Git supercharged – eamodio.gitlens

Eric Amodio – 20,218,439 downloads – 5 stars
Description: GitLens supercharges the Git capabilities built into Visual Studio Code. It helps you to 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.
GitLens simply helps you better understand code. Quickly glimpse into whom, why, and when a line or code block was changed. Jump back through history to gain further insights as to how and why the code evolved. Effortlessly explore the history and evolution of a codebase.
GitLens 9 is much more performant and has a lot of great updates.
Added by: Gavin

https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens

6/4/19 – Extension: Peacock – johnpapa.vscode-peacock

John Papa – 428,868 downloads – 5 stars
Description: A Visual Studio Code extension that subtly changes the workspace color of your workspace. Ideal when you have multiple VS Code instances and you want to quickly identify which is which.

Added by: Gavin
Publish Date: 6/4/19

https://marketplace.visualstudio.com/items?itemName=johnpapa.vscode-peacock&wt.mc_id=vscodepeacock-github-jopapa 

6/11/19 – Extension: RemoteFS

John Papa – 63,343 downloads – 4.5 stars
Description: A Visual Studio Code extension that allows you to edit remote files directly on the server.

Added by: Andrew
Publish Date: 6/11/19

https://marketplace.visualstudio.com/items?itemName=liximomo.remotefs

6/18/19 – Extension: Polacode – pnp.polacode

P & P – 141,858 downloads – 4.5 stars
Take screenshots of your code, your editor, your theme

Added by Eric

https://marketplace.visualstudio.com/items?itemName=pnp.polacode

6/25/19 – Go to Symbol in File & Workspace Shortcuts

Workflow: Command + Shift + O for Go to Symbol in File
Quickly jump to methods inside a file
Added By Eric

(Command +T ) default
Workflow: Go to Symbol in Workspace
Quickly jump to methods inside a workspace
Added By Eric

7/9/19 – Extension: Vetur

Vue tooling for VS Code, powered by vue-language-server.
Doc: https://vuejs.github.io/vetur
Try it out with Veturpack!

VUEJS Coding Syntax
Syntax-highlighting
Snippet
Emmet
Linting / Error Checking
Formatting
Auto Completion
Debugging

https://marketplace.visualstudio.com/items?itemName=octref.vetur

7/23/19 – CFML – Language Pack and Syntax

KamasamaK | 10,997 installs |  28,269 downloads | 5 stars |  Free
CFML language

An extension for Visual Studio Code to assist in development with CFML.

Acknowledgements
vscode-coldfusion on which the syntax highlighting is based, which was based on the next extension
sublimetext-cfml as inspiration for some of the features. “Parsing” logic (including regexes) was also used.
cfdocs as the default documentation and sample images in this README
vscode-php-docblocker as the basis for docblock completion
Features

https://marketplace.visualstudio.com/items?itemName=KamasamaK.vscode-cfml

7/30/19 Live Share ms-vsliveshare.vsliveshare

Microsoft – 10,860,671 downloads – 5 stars
Visual Studio Live Share enables you to collaboratively edit and debug with others in real time, regardless what programming languages you’re using or app types you’re building. It allows you to instantly (and securely) share your current project, and then as needed, share debugging sessions, terminal instances, localhost web apps, voice calls, and more!

https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare

8/6/19 Docker – ms-azuretools.vscode-docker

Microsoft 14,022,846 downloads

Adds syntax highlighting, commands, hover tips, and linting for Dockerfile and docker-compose files

https://marketplace.visualstudio.com/items?itemName=ms-azuretools.vscode-docker

8/13/19 ShortCuts and KeyMaps

Keyboard reference sheets
MacOS – https://go.microsoft.com/fwlink/?linkid=832143
Windows – https://go.microsoft.com/fwlink/?linkid=832145
Linux – https://go.microsoft.com/fwlink/?linkid=832144 

Are you used to keyboard shortcuts from another editor? You can install a Keymap extension that brings the keyboard shortcuts from your favorite editor to VS Code. Go to Preferences > Keymap Extensions to see the current list on the Marketplace. Some of the more popular ones:

https://marketplace.visualstudio.com/search?target=VSCode&category=Keymaps&sortBy=Downloads

You can see recommended keymap extensions in the Extensions view with Ctrl+K Ctrl+M which filters the search to @recommended:keymaps.

8/20/19 – Better Comments aaron-bond.better-comments

Aaron Bond – 973,521 Downloads

Improve your code commenting by annotating with alert, informational, TODOs, and more!
The Better Comments extension will help you create more human-friendly comments in your code.
With this extension, you will be able to categorise your annotations into:

Alerts
Queries
TODOs
Highlights
Commented out code can also be styled to make it clear the code shouldn’t be there
Any other comment styles you’d like can be specified in the settings

https://marketplace.visualstudio.com/items?itemName=aaron-bond.better-comments

8/27/19 – Import Cost wix.vscode-import-cost

Wix – 1,020,225 downloads
Only 3.5 stars though

This extension will display inline in the editor the size of the imported package. The extension utilizes webpack with babili-webpack-plugin in order to detect the imported size.

Calculates the size of imports and requires. Currently supports:

Default importing: import Func from ‘utils’;
Entire content importing: import * as Utils from ‘utils’;
Selective importing: import {Func} from ‘utils’;
Selective importing with alias: import {orig as alias} from ‘utils’;
Submodule importing: import Func from ‘utils/Func’;
Require: const Func = require(‘utils’).Func;
Supports both Javascript and Typescript

https://marketplace.visualstudio.com/items?itemName=wix.vscode-import-cost

9/3/19 – Material Icon Theme pkief.material-icon-theme

Philipp Kief – 9,283,971 downloads

Material Design Icons for Visual Studio Code
Made your folder file and languages more visually appealing and identifiable with Material Design Icons.

https://marketplace.visualstudio.com/items?itemName=PKief.material-icon-theme

9/10/19 – Cobalt2 Theme Official – wesbos.theme-cobalt2

Wes Bos – 228,845 downloads

Official theme by Wes Bos.

https://marketplace.visualstudio.com/items?itemName=wesbos.theme-cobalt2 

9/17/19 – Coding Tracker – hangxingliu.vscode-coding-tracker

Liu Yue  – 5217 downloads – 5 stars (9)
A VSCode extension that track your coding activities and generate report about your coding.
You can know how much time you spent on each projects/files/computers/languages/branches and total by this extension.

https://marketplace.visualstudio.com/items?itemName=hangxingliu.vscode-coding-tracker

Tweet from James Moberg about this extension
I wanted to track my #ColdFusion dev time using @code. @WakaTime requires paid subscription, uses Google Analytics & can be sluggish at times.
I’ve switched to CodingTracker ow.ly/z5vw50wbGqG & am using #cfml to generate exports, filtertable reports & interactive graphs.

9/.24/19 – Regex Previewer

Christof Marti – 118070 downloads

Shows the current regular expression’s matches in a side-by-side document. Global and multiline options can be added for evaluation with a side-by-side document through a status bar entry. This can be useful when the side-by-side document has multiple examples to match.

https://marketplace.visualstudio.com/items?itemName=chrmarti.regex

10/08/19 – TestBox – vscode-testbox

Ortus Solutions – 964 installs

Includes:
Jump to Spec
Code Skeleton Snippets
TestBox Snippets
ColdBox Testing Snippets

https://marketplace.visualstudio.com/items?itemName=ortus-solutions.vscode-testbox

10/15/19 – Shell Launcher – tyriar.shell-launcher

Daniel Imms – 46,445 installs – 5 stars

Easily launch multiple shell configurations in the terminal.
Since you can pass arguments, you can even set this up to run commonly used tasks as well, ie shortcuts for `box testbox watch` or `npm run watch` or `box cfformat ./ –watch`

https://marketplace.visualstudio.com/items?itemName=Tyriar.shell-launcher

10/22/19 – JSON Transform – octref.vscode-json-transform

Pine Wu – 13,404 installs – 5 stars

JMESPath is a query language for JSON. You can extract and transform elements from a JSON document. You can change the JMESPath expressions and see the results update automatically.

For the extension, the JMESPath expression is applied to the input JSON on the left, and the result of evaluating the JMESPath expression is shown in the JSON document on the right hand side.

To learn more about the patterns and try it interactively, go to JMESPath Tutorial.http://jmespath.org/tutorial.html

https://marketplace.visualstudio.com/items?itemName=octref.vscode-json-transform

10/29/19 – change-case – wmaurer.change-case

Wmaurer – 189760 installs – 5 stars

Quickly change the case (camelCase, CONSTANT_CASE, snake_case, etc) of the current selection or current word
A wrapper around node-change-case for Visual Studio Code. Quickly change the case of the current selection or current word.
If only one word is selected, the extension.changeCase.commands command gives you a preview of each option.
change-case also works with multiple cursors.
List all Change Case commands, with preview if only one word is selected

Includes:
camel: Convert to a string with the separators denoted by having the next letter capitalised
constant: Convert to an upper case, underscore separated string
dot: Convert to a lower case, period separated string
kebab: Convert to a lower case, dash separated string (alias for param case)
lower: Convert to a string in lower case
lowerFirst: Convert to a string with the first character lower cased
no: Convert the string without any casing (lower case, space separated)
param: Convert to a lower case, dash separated string
pascal: Convert to a string denoted in the same fashion as camelCase, but with the first letter also capitalised
path: Convert to a lower case, slash separated string
sentence: Convert to a lower case, space separated string
snake: Convert to a lower case, underscore separated string
swap: Convert to a string with every character case reversed
title: Convert to a space separated string with the first character of every word upper cased
upper: Convert to a string in upper case
upperFirst:  Convert to a string with the first character upper cased

https://marketplace.visualstudio.com/items?itemName=wmaurer.change-case

11/5/19 – Project Manager – alefragnani.project-manager

Alessandro Fragnani – 735,147 – 5 stars

It helps you to easily access your projects, no matter where they are located. Don’t miss that important projects anymore. You can define your own Favorite projects, or choose for auto-detect VSCode projects, Git, Mercurial and SVN repositories or any folder.

Since version 8 you have a dedicated Side Bar for your projects!

https://marketplace.visualstudio.com/items?itemName=alefragnani.project-manager

11/12/19 – Spelling Checker for Visual Studio Code

Street Side Software – 849,821 installs – 4.5+ stars
A basic spell checker that works well with camelCase code.
The goal of this spell checker is to help catch common spelling errors while keeping the number of false positives low.

https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker

11/19/19 – File Utils

Steffen Leistner – 101,610 installs – 5 stars

A convenient way of creating, duplicating, moving, renaming, deleting files and directories.
Inspired by Sidebar Enhancements for Sublime.

https://marketplace.visualstudio.com/items?itemName=sleistner.vscode-fileutils

11/26/19 – EditorConfig

EditorConfig 1,573,663 downloads – 5 stars

This plugin attempts to override user/workspace settings with settings found in .editorconfig files. No additional or vscode-specific files are required. As with any EditorConfig plugin, if root=true is not specified, EditorConfig will continue to look for an .editorconfig file outside of the project.

https://marketplace.visualstudio.com/items?itemName=EditorConfig.EditorConfig

12/3/19 Headwind – heybourn.headwind

Ryan Heybourn – 495 downloads

Headwind is an opinionated Tailwind CSS class sorter for Visual Studio Code. It enforces consistent ordering of classes by parsing your code and reprinting class tags to follow a given order.

https://marketplace.visualstudio.com/items?itemName=heybourn.headwind

12/10/19 Color Picker for VS Code

anseki – 412,923 installs

Helper with GUI to generate color codes such as CSS color notations.
And, a command Convert Color to change the color notation.

A dialog box is shown by pressing Alt + C P keys or command Pick Color. If a cursor is positioned on a string that is color notation at that time, that string is selected as target for editing.

https://marketplace.visualstudio.com/items?itemName=anseki.vscode-color

12/17/19 – Shades of Purple

Ahmad Awais – 688,851 installs – 5 stars

Shades of Purple (SOP)
A professional theme with hand-picked & bold shades of purple for your VS Code editor and terminal. One of the excellent most downloaded and top rated VSCode Themes on the marketplace.

Author has a VS Code Power User Course: https://vscode.pro/

https://marketplace.visualstudio.com/items?itemName=ahmadawais.shades-of-purple

12/23/19 Visual Studio Online – ms-vsonline.vsonline

Microsoft – 22,010 Installs – 5 stars

Visual Studio Online provides cloud-powered development environments for any activity – whether it’s a long-term project, or a short-term task like reviewing a pull request. You can work with these environments from Visual Studio Code, Visual Studio (sign up for the Private Preview), or a browser-based editor that’s accessible anywhere! You can even connect your own self-hosted environments to Visual Studio Online at no cost.

Additionally, Visual Studio Online brings many of the benefits of DevOps, like repeatability and reliability, which have typically been reserved for production workloads, to development environments. However, Visual Studio Online is also personaliazable to allow developers to leverage the tools, processes and configurations that they have come to love and rely on – truly the best of both worlds!

Learn more at online.visualstudio.com.

https://code.visualstudio.com/docs/remote/vsonline

12/31/19 – gitflow – vector-of-bool

42,021 installs – 4.5 stars

This extension provides integration and support for gitflow. It is based on this gitflow implementation and intends to be fully compatible with it.

https://marketplace.visualstudio.com/items?itemName=vector-of-bool.gitflow

Get more VS Code Hints Tips and Tricks every week on our Podcast

Listen on the Web or in your Podcast Player: https://cfmlnews.modernizeordie.io/
Subscribe to us on YouTube: https://www.youtube.com/playlist?list=PLNE-ZbNnndB98oRT8THamdCUiyDQL1uEj