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
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
Add Your Comment