Forem: Sar Malik

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

Sar Malik — Sun, 17 Jan 2021 00:04:25 +0000

👋 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

👉 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

👉 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

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

👉 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

👉 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.

IsaacSomething / stackoverflow-view-vscode

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

No longer maintained :(

If i have time i will try to update this, but i just dont have any. Sorry

Stack Overflow View

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

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

View on GitHub

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.

View on GitHub

microsoft / SandDance

Visually explore, understand, and present your data.

SandDance

Visually explore, understand, and present your data.

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…

View on GitHub

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…

View on GitHub

DominicVonk / VSCode-Parameter-Hints

Parameter Hints

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"
    },
}

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

View on GitHub

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

How to run VS Code as a Container for Remote Development

Sar Malik — Wed, 30 Dec 2020 20:02:06 +0000

Launch your own Code Server container with preloaded dev tools (SDKs, npm packages, CLIs etc) for an efficient and securely accessible Web IDE in your homelab or private cloud!

Why VS Code in a Container?

Remote development has taken the world by storm, it's not just a trend but here to stay as a new way that delivers on the promise of work-life balance.

Teams need to adapt rapidly and deploy out infrastructure which enables developer productivity and one of the best ways we've found is - speed to onboarding.

Getting up and running is simple as scaling containers with all the tooling and personalized preferences ready to go. Writing code has never been easier, anywhere and on any device powered by your own cloud.

Getting Started

We've provided the full code samples used in this guide, checkout our Github repository to get started.

👉 Clone the repo
📜 Create an .env file
🔒 Generate SSL certificates
🐳 vi dockerfile with your own scripts
🚀 Launch the stack with docker-compose up!

Clone the repo on a host server with docker or podman configured. It's recommended to attach mount points for storing your codebase isolated from the container runtime for redundancy and failover management.

$ git clone https://github.com/DigitalTransformation/vs-code-container-with-ssl.git

Next, we'll setup the required environment variables and data paths using the included .env.template replicated as .env (note: it's excluded by default in .gitignore).

Persistent storage for extensions and vscode settings can also be enabled by mapping HOST_* variables for convenience against container restarts and rebuilds. Otherwise you'll be quite unhappy to see all the preferences wiped out!

The popular vs code extension settings-sync is also another great way to backup preferences onto private gists but does require reinstalling extensions on every new image build.

Here's an example of what you'll need to define in .env:

VIRTUAL_HOST=10.0.0.1
VIRTUAL_PORT=8555

HOST_CONFIG_PATH=./config
HOST_LOG_PATH=./logs

HOST_CODE_PATH=/mnt/codebase
CODE_PATH=/code

TZ=America/New_York
PASSWORD=<PASSWORD>
SUDO_PASSWORD=<SUDO_PASSWORD>

Nginx is used to reroute traffic from [::]:80 to upstream HTTPS port [::]:8443 with self-signed SSL certificates. Checkout and run the generate_certs.sh script to emit the required certificates with signing key using openssl.

Place both the nginx.conf and certs under the paths defined in code-server.yaml.

listen [::]:443 ssl default_server;
        ssl_certificate /etc/nginx/certs/ssl.crt;
        ssl_certificate_key /etc/nginx/certs/ssl.key;
        ssl_protocols TLSv1.1 TLSv1.2;
        ssl_prefer_server_ciphers on;
        ssl_ciphers ECDH+AESGCM:ECDH+AES256:ECDH+AES128:DHE+AES128:!ADH:!AECDH:!MD5;

Finally, deploy the container stack on the docker host using the command docker-compose -f code-server.yaml up. It may take 15-20 minutes depending on your hardware and network bandwidth for the initial build. The dockerfile pre-configures a number of devtools and updates the base image packages.

To comply with Docker CIS, resource limits are defined on each of the containers but can be customized to your hardware in the compose code-server.yaml file.

Pre-Installed Dev Tools

Here's a quick overview of what the dockerfile does to extend the linuxserver/code-server base image. This allows containers to be rapidly deployed and scaled up for usage on dev teams with tooling ready to go.

The output image includes SDKs for cloud native app development workloads such as React, Node, C#, AWS and Azure Cloud CLIs.

* AWS CLI Tools
    * aws-shell
    * amplify cli
* Azure CLI
* Netlify CLI
* NPM packages
    * yarn (upstream)
    * gatsby-cli
    * gulp
    * create-react-app
* .NET Core SDK and Runtime
    * 5.0.0
    * 3.1.0
    * 2.1.0
* Python global env
    * python3 python3-pip python3-dev
* Ubuntu apt packages
    * Networking
        * wget
        * apt-transport-https
        * libssl-dev libffi-dev
    * Tools
        * ranger
        * tree
        * unzip
        * ansible
        * vim
        * htop
        * iputils-ping
    * OS/Misc
        * systemd
        * build-essential
        * ffmpeg
        * youtube-dl
        * chromium-browser
    * Default shell --> zsh/oh-my-zsh
        * zsh-syntax-highlighting
        * zsh-autosuggestions
        * zsh-completions
        * history-search-multi-word

Refer to the Dockerfile for image layers. Our build image size was well over 6.5GB but can be as minimal as your requirements for dev tools.

Remote Debugging

By default the dockerfile and code-server.yaml are set to expose port ranges 5000-5010 and 8000-8010 commonly used for web app development. Customize this for your workload such as React, Gatsby, Angular, Django, etc. to allow for remote debugging HTTP instances that are running inside the container.

To allow external access on node frameworks that depend http-server (instantiated with npm or yarn) you may need to also update your package.json and bind the runtime to the host ip instead of localhost.

Here are a few common examples:

{
    "scripts": {
        "ng:start": "ng serve --host 0.0.0.0",
        "npm:start": "http-server --host 0.0.0.0",
        "gatsby:start": "gatsby develop --host 0.0.0.0"
    }
}

Alternatively, if you'd prefer not to expose ports, check out the vscode-browser-preview extension which enables chromium based inspection and debugging within the container itself.

Security Considerations

As the base image extends ubuntu:18.04, additional steps have been taken to add security measures with hosts file, fail2ban and clamav packages preloaded. These are precautionary against attacks but insufficient against (un)known breaches.

Log Analytics

It's strongly recommended to configure a remote syslog daemon for log analytics with auditd enabled, here's our guide on using solutions such as Graylog2.

Ports

There's a wide range of tcp ports exposed and mapped directly to the host for remote debugging apps running inside the container. By default, only the code-server is allocated on ports 8443 and localhost:8080.

$ netstat -tnlp

Active Internet connections (only servers)
Proto Recv-Q Send-Q Local Address           Foreign Address         State       PID/Program name    
tcp        0      0 0.0.0.0:8443            0.0.0.0:*               LISTEN      299/node            
tcp        0      0 127.0.0.1:8080          0.0.0.0:*               LISTEN      -

For dev workloads outside of a homelab or private cloud behind firewalls, using an nginx reverse proxy with HTTPS and auth redirects is vital to preventing sensitive code exposure.

What's next?

Deploying VS Code Server in a container is a great way to provide for flexible development infrastructure in your home lab or for your team.

Paired with VPN access and all your custom settings, Web IDEs make for the future of remote coding. It's rapidly scalable, gets you to coding a lot quicker, and on any device.

Be sure to checkout the Github repository where we've provided the full code samples that can be used to deploy your own code-server in minutes.

I've been using it as my primary development environment and after tweaking vscode settings and extensions, there's no going back. The speedup of compiling code on a dedicated server alone is worth the change.

Let me know if you like this homelab setup and what you think!