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
### Back and Forth
- Adds backwards and forwards buttons to the toolbar in VSCode
- https://marketplace.visualstudio.com/items?itemName=nick-rudenko.back-n-forth
------------------------------------------------------------------------
### Bracket Pair Colorizer 2
- Colors matching brackets so it’s easier to tell which brackets match.
- https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer-2
------------------------------------------------------------------------
### Babel Javascript
- A better syntax highlighter for JavaScript code
- https://marketplace.visualstudio.com/items?itemName=mgmcdermott.vscode-language-babel
------------------------------------------------------------------------
### 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
### Table of contents
- 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.combgoonz — Overview Web Developer, Electrical Engineer JavaScript | CSS | Bootstrap | Python | React | Node.js | Express | Sequelize…github.com
### Or Checkout my personal Resource Site:
Web-Dev-Resource-Hub Edit descriptionweb-dev-resource-hub.netlify.app
By Bryan Guner on [March 23, 2021](https://medium.com/p/ea91305cbd4a).
Canonical link
Exported from [Medium](https://medium.com) on September 23, 2021.
