DEV Community

loading...
Cover image for Top 5 VS Code Extensions you haven't tried...

Top 5 VS Code Extensions you haven't tried...

sar profile image Sar Malik ・3 min read

πŸ‘‹ Hey, I know what you're thinking... There's no way these extensions are any good if they're not popular, right? You'd be surprised at the amazing stuff being developed!

I love tinkering with VS Code to optimize productivity and trying new extensions πŸ› οΈ is one of my best growth hacks.

Here's a run down of the Top 5 VS Code extensions that you probably haven't heard of... (and yes, they're all open source, so give 'em a ⭐ on GitHub)

Fair warning, some of these extensions are work-in-progress so πŸ› bugs are expected. Scroll to the end for links...

1 - Stack Overflow View

Stack Overflow View

πŸ‘‰ Try this out > ext install 4tron.stack-overflow-view

Use Stack Overflow right inside VS Code with quick actions, and it works beautifully with your existing dark theme... EPIC! 🀯

No more opening up browser windows, googling for answers, and jumping through tabs when you can fix your code at the speed of light.

Just type > stackoverflow: search and paste in a code snippet or error message to fire up Stack Overflow results without ever leaving code. Need I say more?

2 - Debug Visualizer

Debug Visualizer REST Output in VS Code

πŸ‘‰ Try this out > ext install hediet.debug-visualizer

Debug Visualizer can do a lot of things, but my favourite feature is exploring the data returned from REST or GraphQL endpoints.

Sure, you can load a response in Postman but having a table view with filter and sort right in VS Code is super handy, especially when it comes to deeply nested objects or variables.

3 - SandDance

πŸ‘‰ Try this out > ext install msrvida.vscode-sanddance

SandDance

Working on data sci projects became a lot easier with Jupyter Notebooks.

SandDance is the next big thing, it's by far the most meaningful way of going from static csv files to understanding the data you're working with.

Stop writing queries and setting up dashboards when you can easily dump and visualize. The impact of being a data scientist is finding meaningful answers to business questions, this gets you there a lot quicker.

4 - Fabulous

Fabulous for VS Code

πŸ‘‰ Try this out > ext install Raathigeshan.fabulous

If you're into design with Figma or Sketch, it can be a lot easier to visually edit design properties with a native GUI.

Fabulous does just that on CSS, and it works on styled-components in JS too! The extension comes in handy if you have long stylesheets and want to quickly customize a few things.

5 - Parameter Hints

Parameter Hints for VS Code

πŸ‘‰ Try this out > ext install DominicVonk.parameter-hints

Inline parameter hints are subtle, but it's a neat productivity hack. JetBrains has hinting using types by default in their IDEs and this extension brings it to VS Code.

Why inline? If you type fast or don't like the tooltip covering up lines of code, then this is for you.

It's in preview and currently supports languages like JS and TypeScript but pull requests are encouraged.


πŸ› οΈ There you have it! Top 5 VS Code Extensions that are awesome for boosting your productivity and becoming a PRO coder.

GitHub logo IsaacSomething / stackoverflow-view-vscode

Visual Studio Code extension for access to Stack Overflow inside of the editor.

Stack Overflow View

MIT license made-for-VSCode made-with-svelte

Visual Studio Code extension for access to Stack Overflow inside of the editor. ["vscode":"^1.37.0"]

snippet

Configuration


Supported internationalization

  • English (default)
  • Spanish
  • Russian
  • Portuguese
  • Japanese
Please Note: Some of the translation was done by copying Stack Overflows language sites - with the integrated i18n api call - and some of it was done with Google translate - if there are any issues with translation it is unintentional.

Set your preferred sort type

  • relevance
  • votes
  • activity
  • newest

Keyboard Shortcuts


not mac : ctrl + alt + s
mac : ctrl + cmd + s





GitHub logo hediet / vscode-debug-visualizer

An extension for VS Code that visualizes data during debugging.

VS Code Debug Visualizer

See README.md for the readme of the extension.

You can get the extension in the marketplace.

See CONTRIBUTING.md for build instructions and implementation details.

GitHub logo microsoft / SandDance

Visually explore, understand, and present your data.

SandDance

Visually explore, understand, and present your data.

sanddance-animation

By using easy-to-understand views, SandDance helps you find insights about your data, which in turn help you tell stories supported by data, build cases based on evidence, test hypotheses, dig deeper into surface explanations, support decisions for purchases, or relate data into a wider, real world context.

SandDance uses unit visualizations, which apply a one-to-one mapping between rows in your database and marks on the screen Smooth animated transitions between views help you to maintain context as you interact with your data.

This new version of SandDance has been rebuilt from scratch with the goal of being modular, extensible, and embeddable into your custom applications. We are now on GitHub so that we are open and driven by the community through contributions, feature requests, and discussion.

SandDance was created by the Microsoft Research VIDA Group which explores novel technologies for visualization and…

GitHub logo Raathigesh / fabulous

🎨 CSS properties sidebar for VS Code


Fabulous introduces a CSS properties sidebar into Visual Studio Code.

Fabulous supports the followings

  • πŸ’… CSS-in-JS libs which supports template literal (styled-components, emotion, linaria)
  • 🎨 CSS rules from .css files
  • 🌈 CSS rules from .scss files
  • 🌏 CSS rules from .html files - these must be in a <style> tag and the style tag must be within the <head> tag
  • πŸŒ› CSS rules from component.ts Angular component files that have inline styles within the @Component({ styles:[``] }) decorator
  • 🌟 CSS rules from .vue files that have a <style> tag in the root of the file
  • πŸ’ CSS rules from .svelte files that have a <style> tag in the root of the file

Fabulous is still in Preview. Give it a try and let us know when things don't go well.

Getting started

  • Install the Fabulous extension in VS Code
  • After opening a css, scss…

Parameter Hints

VS Marketplace Version VS Marketplace Installs VS Marketplace Rating The MIT License GitHub

Preview

Shows the parameter name of the called function

Β  Β 

Supported languages *

  • Javascript
  • Javascript React
  • Typescript
  • Typescript React
  • PHP

Β  * Feel free to contribute

Β  Β 

Settings

Name Description Default
parameterHints.enabled Enable Parameter Hints true
parameterHints.hintingType Enable Parameter Hints Type variableAndType
parameterHints.languages Enable Parameter Hints only for the selected languages all
parameterHints.padding Padding 1 4
parameterHints.margin Margin 0 1

Β  Β 

Colors

The background and foreground colors can be customized under workbench.colorCustomizations like this:

// settings.json
{
    // ...
    "workbench.colorCustomizations": {
        "parameterHints.hintBackground": "#37415180",
        "parameterHints.hintForeground": "#9CA3AF"
    },
}
Enter fullscreen mode Exit fullscreen mode
Name Description
parameterHints.hintForeground Specifies the foreground color for the hint
parameterHints.hintBackground Specifies the background color for the hint

Β  Β 

Commands

Name Description
parameterHints.toggle Hide / Show Hints

Β  Β 

Credits

Dash-AST
TypeScript
php-parser




🐦 Know a developer that would love to try these amazing open source extensions? Share it with them!

Discussion (8)

pic
Editor guide
Collapse
klvenky profile image
Venkatesh KL

After seeing so many click bait articles with vscode extensions tag, finally I've seen something that stands to the title. Amazing article. Really the extensions look interesting& not so popular. Will give them a try and give you my feedback.

Collapse
robole profile image
Rob OLeary • Edited

Im surprised there isnt more extensions using public APIs like the Stack Overflow one. It can save you from context switching.

GitHub logo robole / vscode-snippets-ranger

View all of your snippets in one purty place!

Snippets Ranger

Extension file size in bytes Visual Studio Marketplace Version Extension file size in bytes Visual Studio Marketplace Rating Visual Studio Marketplace Downloads Visual Studio Marketplace Installs Built with

Did you know that Visual Studio Code has built-in snippets for JavaScript, Markdown, and other languages? They are not listed in the docs, so where in tarnations can you find out what they are?

Snippets Ranger to rescue! 🀠

demo gif

There are sticky headings to ensure you can browse through long snippet lists without losing context. πŸ¦ŽπŸ”

view source screenshot

You can view the source snippet file. This makes it simple to edit your user snippets.

Commands

The following commands can be run from the Command Palette (Ctrl+Shift+P):

  1. Snippets Ranger: Show me that dur Range, Partner.

Performance

To gather and render approx 6000 snippets sourced from 18 different files, it takes 4.5 seconds on a modestly-specced 4-year old laptop running Ubuntu 18.

Features Under Consideration

  1. Add "create new snippet" command which enables quickly adding a new snippet. It copies the selected text, opens the snippet file for that…

This is worth checking out also! I wrote it recently πŸ™‚

Collapse
yaireo profile image
Yair Even Or

What does it matter if you open a tab in vscode or open a tab in the browser. A tab is a tab. If you work with multiple screens it's even easier to have 1 for code, 1 browser and 1 for devtools

Collapse
robole profile image
Rob OLeary

A VS Code extension is an opportunity to offer a different/improved UX. It offers theming, commands, and shortcuts that are not available in a browser. For visually impaired users, you can provide a high contrast theme. That matters

Thread Thread
yaireo profile image
Yair Even Or

A visually impaired would almost certainly have a browser extension or a tampermokey script which already converts websites to high-contrast since obviously that type of user is using the web and will encounter sight issues where he goes, so that type of user already have that problem solved and does not need a "special" vscode extension. it is only helpful if you have a single screen, and even so, not that helpful IMO since the same operation to open stackoverflow in vscode would take the exact same time as to open it in a browser. (requires only 2 clicks from vscode: 1 - open browser, 2 - stackoverflow bookmark)

Collapse
dino_kaca profile image
Dino Kacavenda

Good job, I see a lot of these Top N Visual Code extensions, and this is the first time I have seen some new ones and not the generic list that I always see

Collapse
itsnitinr profile image
Nitin Ranganath

These are some really cool extensions. Thanks for sharing!

Collapse
hb profile image
Henry Boisdequin

These are great! I would also recommend Error Lens.