/ Tools

VSCode Extensions

I love anything from Jet Brains, and I use Web Storm and PyCharm. However, whenever I want to use a light code editor, I use Visual Studio Code.

VS Code does not have the same capabilities as the others, but it has some extensions that would add those capabilities and ease up the development process.

IntelliSense

IntelliSense is a general term for a variety of code editing features including code completion, parameter info, quick info, and member lists. IntelliSense features are sometimes called by other names such as "code completion", "content assist", and "code hinting."

VS Code IntelliSense is provided for JavaScript, TypeScript, JSON, HTML, CSS, Less, and Sass out of the box. VS Code supports word based completions for any programming language but can also be configured to have richer IntelliSense by installing a language extension.

See the list of all the features that IntelliSense provides.

npm Intellisense

npm Intellisense autocompletes npm modules in import statements.

Project Manager

Manage your projects right inside Visual Studio Code. Easily access and switch between them. You can define your own Favorite projects, and auto-detect VSCode projects, Git and SVN repositories.

Quokka

Quokka is a rapid prototyping playground for JavaScript and TypeScript. It provides a rapid prototyping playground in your editor, with access to your project's files, inline reporting, code coverage and rich output formatting.

Quokka is not restricted to the VS Code, but it could be found for Atom and JetBrains IDEs.

VSCode Faker

VSCode Faker generates fake data inside VS Code. Fake data is based on Faker.js.

Fake data you can generate:

  • address
  • commerce
  • company
  • database
  • date
  • finance
  • hacker
  • image
  • internet
  • lorem
  • name
  • phone
  • random
  • system

Settings Sync

Key features:

  1. Use your GitHub account token and Gist.
  2. Can create Anonymous Gist without using your GitHub account token.
  3. Easy to Upload and Download on one click.
  4. Show a summary page at the end with details about config and extensions effected.
  5. Auto Download Latest Settings on Startup.
  6. Auto upload Settings on file change.
  7. Share the Gist with other users and let them download your settings.
  8. Supports GitHub Enterprise

It syncs:

  1. All extensions and complete User Folder that Contains
  2. Settings File
  3. Keybinding File
  4. Launch File
  5. Snippets Folder
  6. VSCode Extensions Settings
  7. Workspaces

REST Client

REST Client allows you to send HTTP request and view the response in Visual Studio Code directly.

Main Features:

  • Send/Cancel/Rerun HTTP request in editor and view response in a separate pane with syntax highlight
  • Send CURL command in editor and copy HTTP request as CURL command
  • Auto save and view/clear request history
  • Support MULTIPLE requests in the same file (separated by ### delimiter)
  • View image response directly in pane
  • Save raw response and response body only to local disk
  • Customize font(size/family/weight) in response preview
  • Preview response with expected parts(headers only, body only, full response and both request and response)
  • Authentication support for:
    • Basic Auth
    • Digest Auth
    • SSL Client Certificates
  • Environments and custom/global system variables support
    • Use custom/global variables in any place of request(URL, Headers, Body)
    • Support both environment and file custom variables
    • Auto completion and hover support for both environment and file custom variables
    • Go to definition and find all references support ONLY for file custom variables
    • Provide system dynamic variables {{$guid}}, {{$randomInt min max}} and {{$timestamp}}
    • Easily create/update/delete environments and custom variables in setting file
    • Support environment switch
    • Support shared environment to provide variables that available in all environments
  • Generate code snippets for HTTP request in languages like Python, Javascript and more!
  • Remember Cookies for subsequent requests
  • Proxy support
  • Send SOAP requests, as well as snippet support to build SOAP envelope easily
  • HTTP language support
    • .http and .rest file extensions support
    • Syntax highlight (Request and Response)
    • Auto completion for method, url, header, custom/global variables, mime types and so on
    • Comments (line starts with # or //) support
    • Support json and xml body indentation, comment shortcut and auto closing brackets
    • Code snippets for operations like GET and POST
    • Support navigate to symbol definitions(request and file level custom variable) in open http file
    • CodeLens support to add an actionable link to send request
    • Fold/Unfold for request block

Beautify

Beautify javascript, JSON, CSS, Sass, and HTML in Visual Studio Code.

VS Code uses js-beautify internally, but it lacks the ability to modify the style you wish to use. This extension enables running js-beautify in VS Code, AND honouring any .jsbeautifyrc file in the open file's path tree to load your code styling. Run with F1 Beautify (to beautify a selection) or F1 Beautify file.

Code Runner

Run code snippet or code file for multiple languages: C, C++, Java, JavaScript, PHP, Python, Perl, 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, AutoHotkey, AutoIt, Kotlin, Dart, Free Pascal, Haskell, Nim, D, and custom command.

VSCodeVim

It enables the following features along some others:

  • Keybindings and command combinations (c3w, daw, 2dd, etc)
  • Modes: normal, insert, command-line, visual, visual line, visual block
  • Command remapping (jj to <Esc>, : to command panel, etc.)
  • Incremental search with / and ?
  • Marks
  • Popular vim plugin features built-in (easymotion, surround, commentary)
  • Multi-cursor support, run vim commands everywhere!

TODO Highlight

Sometimes you will forget to review the TODOs added while coding till publish the code to production. So I've been long for an extension to highlight them and remind me know there're notes or things not done yet.

Dracula Theme

The list is not complete without one of my favorite themes.

Anas Shekhamis

Anas Shekhamis

A software engineer who specializes in architecting and developing web applications. On a daily basis, I use Python, JavaScript, Ruby, and PHP to design and implement API's and build web applications.

Read More
VSCode Extensions
Share this