VSCode Extensions Specifically for JavaScript Development

VSCode Extensions that are indispensable in JavaScript development

CODEX

VSCode Extensions Specifically for JavaScript Development

VSCode Extensions that are indispensable in JavaScript development

Code Runner

Puts a “Play” button in your toolbar and let’s you run code files by pressing it.
https://marketplace.visualstudio.com/items?itemName=formulahendry.code-runner

Code Runner

Run code snippet or code file for multiple languages: C, C++, Java, JavaScript, PHP, Python, Perl, Perl 6, Ruby, Go, Lua, Groovy, PowerShell, BAT/CMD, BASH/SH, F# Script, F# (.NET Core), C# Script, C# (.NET Core), VBScript, TypeScript, CoffeeScript, Scala, Swift, Julia, Crystal, OCaml Script, R, AppleScript, Elixir, Visual Basic .NET, Clojure, Haxe, Objective-C, Rust, Racket, Scheme, AutoHotkey, AutoIt, Kotlin, Dart, Free Pascal, Haskell, Nim, D, Lisp, Kit, V, SCSS, Sass, CUDA, Less, Fortran, and custom command

Features

Run code file of current active Text Editor

Run code file through context menu of file explorer

Run selected code snippet in Text Editor

Run code per Shebang

Run code per filename glob

Run custom command

Stop code running

View output in Output Window

Set default language to run

Select language to run

Support REPL by running code in Integrated Terminal

Usages

To run code:

use shortcut Ctrl+Alt+N
or press F1 and then select/type Run Code,
or right click the Text Editor and then click Run Code in editor context menu
or click Run Code button in editor title menu
or click Run Code button in context menu of file explorer
To stop the running code:
use shortcut Ctrl+Alt+M
or press F1 and then select/type Stop Code Run
or right click the Output Channel and then click Stop Code Run in context menu

To select language to run, use shortcut Ctrl+Alt+J, or press F1 and then select/type Run By Language, then type or select the language to run: e.g php, javascript, bat, shellscript...

To run custom command, then use shortcut Ctrl+Alt+K, or press F1 and then select/type Run Custom Command

Color Highlight

Changes the background color of hex colors in your code to show you what color it actually is
https://marketplace.visualstudio.com/items?itemName=naumovs.color-highlight

Git Graph

Shows you a graphical representation of your git branches and commits
https://marketplace.visualstudio.com/items?itemName=mhutchie.git-graph

GitLens

Adds tons of cool features to vscode, like viewing commits inline inside the editor
https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens

Here are just some of the features that GitLens provides,

effortless revision navigation (backwards and forwards) through the history of a file
an unobtrusive current line blame annotation at the end of the line showing the commit and author who last modified the line, with more detailed blame information accessible on hover
authorship code lens showing the most recent commit and number of authors at the top of files and/or on code blocks
a status bar blame annotation showing the commit and author who last modified the current line
on-demand file annotations in the editor gutter, including
blame — shows the commit and author who last modified each line of a file
changes — highlights any local (unpublished) changes or lines changed by the most recent commit
heatmap — shows how recently lines were changed, relative to all the other changes in the file and to now (hot vs. cold)
many rich Side Bar views
a Commits view to visualize, explore, and manage Git commits
a Repositories view to visualize, explore, and manage Git repositories
a File History view to visualize, navigate, and explore the revision history of the current file or just the selected lines of the current file
a Line History view to visualize, navigate, and explore the revision history of the selected lines of the current file
a Branches view to visualize, explore, and manage Git branches
a Remotes view to visualize, explore, and manage Git remotes and remote branches
a Stashes view to visualize, explore, and manage Git stashes
a Tags view to visualize, explore, and manage Git tags
a Contributors view to visualize, navigate, and explore contributors
a Search & Compare view to search and explore commit histories by message, author, files, id, etc, or visualize comparisons between branches, tags, commits, and more
a Git Command Palette to provide guided (step-by-step) access to many common Git commands, as well as quick access to
commits — history and search
stashes
status — current branch and working tree status
a user-friendly interactive rebase editor to easily configure an interactive rebase session
terminal links — ctrl+click on autolinks in the integrated terminal to quickly jump to more details for commits, branches, tags, and more
rich remote provider integrations — GitHub, GitLab, Bitbucket, Azure DevOps
issue and pull request auto-linking
rich hover information provided for linked issues and pull requests (GitHub only)
associates pull requests with branches and commits (GitHub only)
many powerful commands for navigating and comparing revisions, and more
user-defined modes for quickly toggling between sets of settings
and so much more 😁

Features

Revision Navigation

Markdown All in One

Everything you need to help you write markdown files in VSCode
https://marketplace.visualstudio.com/items?itemName=yzhang.markdown-all-in-one

Features

Keyboard shortcuts

(Typo: multiple words)

See full key binding list in the keyboard shortcuts section

Run command “Create Table of Contents” to insert a new table of contents.
The TOC is automatically updated on file save by default. To disable, please change the toc.updateOnSave option.
The indentation type (tab or spaces) of TOC can be configured per file. Find the setting in the right bottom corner of VS Code’s status bar.
Note: Be sure to also check the list.indentationSize option.
To make TOC compatible with GitHub or GitLab, set option slugifyMode accordingly
Three ways to control which headings are present in the TOC:
Click to expand
Easily add/update/remove section numbering

In case you are seeing unexpected TOC recognition, you can add a  comment above the list.

List editing

Note: By default, this extension tries to determine indentation size for different lists according to CommonMark Spec. If you prefer to use a fixed tab size, please change the list.indentationSize setting.

Print Markdown to HTML

Commands Markdown: Print current document to HTML and Markdown: Print documents to HTML (batch mode)
Compatible with other installed Markdown plugins (e.g. Markdown Footnotes) The exported HTML should look the same as inside VSCode.
Use comment  to specify a title of the exported HTML.
Plain links to .md files will be converted to .html.
It’s recommended to print the exported HTML to PDF with browser (e.g. Chrome) if you want to share your documents with others.

GitHub Flavored Markdown

Table formatter

Note: The key binding is Ctrl + Shift + I on Linux. See Visual Studio Code Key Bindings.
Task lists

Math

Please use Markdown+Math for dedicated math support. Be sure to disable math.enabled option of this extension.

Auto completions

Tip: also support the option completion.root

Images/Files (respects option search.exclude)

Math functions (including option katex.macros)

Mocah Test Explorer

Lets you run mocha tests in the VSCode sidebar
https://marketplace.visualstudio.com/items?itemName=hbenl.vscode-mocha-test-adapter

Features

Import command

{
	"npm-intellisense.importES6": true,
	"npm-intellisense.importQuotes": "'",
	"npm-intellisense.importLinebreak": ";\r\n",
	"npm-intellisense.importDeclarationType": "const",
}

Import command (ES5)

{
	"npm-intellisense.importES6": false,
	"npm-intellisense.importQuotes": "'",
	"npm-intellisense.importLinebreak": ";\r\n",
	"npm-intellisense.importDeclarationType": "const",
}

NPM Intellisense

Autocomlpetes npm module names when you are typing require or import.
https://marketplace.visualstudio.com/items?itemName=christian-kohler.npm-intellisense

Features

Import command

{
	"npm-intellisense.importES6": true,
	"npm-intellisense.importQuotes": "'",
	"npm-intellisense.importLinebreak": ";\r\n",
	"npm-intellisense.importDeclarationType": "const",
}

Import command (ES5)

{
	"npm-intellisense.importES6": false,
	"npm-intellisense.importQuotes": "'",
	"npm-intellisense.importLinebreak": ";\r\n",
	"npm-intellisense.importDeclarationType": "const",
}

Scan devDependencies

Npm intellisense scans only dependencies by default. Set scanDevDependencies to true to enable it for devDependencies too.

{
	"npm-intellisense.scanDevDependencies": true,
}

Path Intellisense

Auto completes filesystem paths when you are typing them
https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense

Usage

Commerical Extensions

Quokka.js

A paid extension that does amazing things by showing the results of your javascript inline inside the editor window
https://marketplace.visualstudio.com/items?itemName=WallabyJs.quokka-vscode

Quokka.js Visual Studio Code Extension

Quokka.js is a developer productivity tool for rapid JavaScript / TypeScript prototyping. Runtime values are updated and displayed in your IDE next to your code, as you type.

If you found this guide helpful feel free to checkout my other articles:

A list of all of my articles to link to future posts
You should probably skip this one… seriously it’s just for internal use!bryanguner.medium.com

OR GitHub/gists where I host similar content:

bgoonz’s gists
Instantly share code, notes, and snippets. Web Developer, Electrical Engineer JavaScript | CSS | Bootstrap | Python |…gist.github.com

Or Checkout my personal Resource Site:

Web-Dev-Resource-Hub
Edit descriptionweb-dev-resource-hub.netlify.app

web-dev-hub