Morioh
Login
Adam Daniels

Adam Daniels

4 years ago

The Best VS Code Extensions for Full Stack Developers

As a Full Stack developer, you are expected to be able to build quality web apps as quickly as possible. To accomplish this, it’s best to have the best setup that is optimized for the work you’re doing. If you’re like me, then you use Visual Studio Code (VS Code) as your editor of choice. VS Code is a very flexible, extendable editor that can be built up to your standards which is why I love it. There are a plethora of extensions from local servers to code suggestions and much, much more.

Table of Contents

  • Documentation, Version Control, & General Maintenance
    Document ThisBetter CommentsdotENVRemote DevelopmentGitLensGit GraphBeautifySettings Sync* IntelliSense
    PHP IntelliSensePath IntelliSense IntelliSense for CSS class names in HTML npm Intellisense Node.js Modules Intellisense SCSS IntelliSense* VS Code Back end Development
    REST ClientCode Runner* Node.js
    Node.js Extension Pack* PHP
    PHP Debug PHP DocBlocker php cs fixer phpcs* Python
    Python Anaconda Extension Pack Django kite Better Jinja autoDocstring Pyright* Java
    Maven for JavaLanguage Support for Java Java Test RunnerDebugger for Java Java Dependency Viewer Spring Initializr Java SupportSpring Boot Extension Pack* VS Code Front end Development
  • TypeScript
    TSLint* React
    ES7 React/Redux/React-Native/JS snippetsReact Pure To Class* Angular
    Angular 8 SnippetsAngular Language ServiceAngular ConsoleAngular Files* Vue
    VeturVue 2 SnippetsVue Peek* Good for every framework
    Debugger for ChromeLive ServerColor Picker* Readability
    My favorite VS Code Theme: Better Solarized DarkBracket Pair ColorizerIndent RainbowVS Code Icons* Just Getting Started?

In this post, I have compiled every extension that should be helpful to anyone using VS Code for Full Stack Development. I have split these extensions up like so:

  • Documentation, Version Control, & General Maintenance
  • Server Development
  • Client Development
  • Readability

Documentation, Version Control, & General Maintenance

Document This

Writing documentation can be a pain. Document This is a neat extension that will auto generate JSDoc documentation for your functions, classes, and more

Better Comments

Better Comments allows for more organized comments by adding color and notations. For example, if you add a “!” to the front of your comment then it will be bright red so you can see that it’s an alert that needs attention.

dotENV

dotEnv add syntax highlighting for .env files, and what’s not to love about that?

Remote Development

Remote Development is one of the most helpful plugins if you’re working remotely or with Windows Subsystem for Linux. This extension allows for remote work with:

  • SSH – Work with source code in any location by opening folders on a remote machine/VM using SSH. Supports connecting to x86_64 glibc-based Linux hosts.
  • Containers – Work with a sandboxed toolchain or container based application by opening any folder mounted into or inside a container.
  • WSL – Get a Linux-powered development experience from the comfort of Windows by opening any folder in the Windows Subsystem for Linux. Supports glibc-based Linux distributions.

GitLens

GitLens Demo video

GitLens is an integrated visualization of git inside of VS Code. I believe this extension is native to VS Code but it is super helpful when working with teams. GitLens adds inline blames to quickly call out the person who last broke the build. It also gives some helpful commands for diffing between commits and current work. Overall this is a very important extension to have for anyone on a team or even working on their own.

Git Graph

Git Graph does exactly what it sounds like. This extension adds an interactive graph for your git repositories. You can even perform git actions right from the graph. It’s also highly configurable so you can make it look however you want it to.

Beautify

Beautify Logo

Beautify is an extension that will quickly format javascript, JSON, CSS, Sass, and HTML files. It relies on js-beautify under the hood but also adds the ability to define a .jsbeautfyrc file which allows for custom code styling in your projects. It’s also incredibly helpful for reading messy returned API data.

Settings Sync

Settings Sync setup

If you use multiple systems or platforms then Settings Sync is a crucial extension. Setting Sync allows you to sync extensions, themes, and settings with a GitHub gist and then back to all your VS Code’s on each system. It has auto pushing and pulling so it’s a snap to keep every system up to date with your current setup.

IntelliSense

IntelliSense comes standard with VS Code, but extra extensions that add to its capabilities are always handy! All the names below are links so just click on them to be taken to the extension page. Each adds the same type of capability to IntelliSense except for their own language

PHP IntelliSense

Path IntelliSense

IntelliSense for CSS class names in HTML

npm Intellisense

Node.js Modules Intellisense

SCSS IntelliSense

VS Code Back end Development

REST Client

While working on a back end, it’s important to be able to test your API’ss. That’s exactly what Rest Client does. This extension enables a simple rest client within VS Code so that you can test your API’s from the comfort of VS Code.

Code Runner

Code runner demo

The Code Runner extension is very helpful for more than just server development as it allows you to run code within VS Code itself through quick keyboard shortcuts. You can even run snippets of code in case you aren’t entirely sure about that recursive function you just wrote. I use this a lot to confirm that small snippets are running the way I think and to check quickly.

Node.js

Node.js Extension Pack

node.js logo

The Node.js Extension Pack is a collection of helpful node.js extensions including:

PHP

PHP Debug

The PHP Debug extension adds an adapter between VS Code and XDebug. XDebug is a PHP extension that needs to be installed on your server. This allows for remote debugging of you PHP files. See this post about setting up XDebug for local debugging

PHP DocBlocker

PHP DocBlocker is a simple, dependency free PHP specific DocBlocking package. It features:

  • Completion snippet after /** above a class, function, class property
  • Continuation of DocBlock when pressing enter when in a DocBlock
  • Completion of DocBlock tags such as @param, @return, @throws
  • Inferring of param and return types from signatures
  • Configuration of template for each type of docblock completion

php cs fixer

php cs fixer is a PHP standards fixer extension. It provides simple commands that allow for quick standards fixes.

phpcs

The phpcs extension is a linter extension that provides an interface with phpcs.net. To use it, make sure you have phpcs installed on your system to properly use this extension

Python

Python

The Python extension is a go to for any python developer as it adds linting, debugging, intelllisense, formatting, and more to your VS Code setup. It is usually the first thing recommended by VS Code when you open a python file.

Anaconda Extension Pack

If you’re using anaconda as your environment manager of choice then the Anaconda Extension Pack is what you want. This pack includes:

Django

The Django extension adds syntax and snippets that should be helpful for anyone using it as their framework. Just make sure to file associations correct. It even provides an emmet configuration as well.

kite

kite is an AI-powered autocomplete that’s a bit better than microsoft’s intellisense (in my opinion at least). It provides for AI-powered autocomplete, function signatures, and documentation. It does, however, require the Kite Engine to be installed.

Better Jinja

Better Jinja is an extension that adds syntax highlighting for jinja2 including HTML, Markdown, YAML, Ruby, and LaTeX.

autoDocstring

autoDocstring is another one of those extensions that does exactly what it sounds like. This extension provides the ability to automatically generate the bones of a proper docstring.

Pyright

Pyright is a type checker for your python sources. It performs fast checking of your files while it runs in a “watch” mode. It doesn’t even require a python environment or third part package so it’s at least worth a try!

Java

Maven for Java

Maven for Java provides maven integration into VS Code. This extension provides:

  • Support to generate projects from Maven Archetype.
  • Support to generate effective POM.
  • Provide shortcuts to common goals, plugin goals and customized commands.
  • Preserve command history to fast re-run.

Language Support for Java

VS Code is definitely not known for being that great with Java, but that’s because there’s no built in language support. The Language Support for Java extension provides just that!

Java Test Runner

In Java, and any other language, we always need to make sure we pass our tests. To do this, you need to be able to run your tests! Java Test Runner allows you to do just that.

Debugger for Java

You can’t just use a text editor without being able to debug the code your writing, now can you? For Java developers, Debugger for Java is the extension for you. It provides features such as:

  • Launch/Attach
  • Breakpoints/Conditional Breakpoints/Logpoints
  • Exceptions
  • Pause & Continue
  • Step In/Out/Over
  • Variables
  • Callstacks
  • Threads
  • Debug console
  • Evaluation
  • Hot Code Replace

Java Dependency Viewer

When working with any Java project, it’s extremely helpful (almost necessary) to be able to view your dependencies as quick as possible. The Java Dependency Viewer adds a window so that you can see every dependency in seconds.

Spring Initializr Java Support

Spring is a super hot technology to use with Java. The Spring Initializr Java Support extension adds the ability to quickly start Spring Boot projects. This extension is based on Spring Initializr.

Spring Boot Extension Pack

The Spring Boot Extension Pack adds a few different extensions for use including Spring Initializr. This pack includes:

  • The Spring Boot Support extension provides:
    IDE Java tooling for developing and troubleshooting Spring Boot applications.Support for editing Spring Boot Application configuration properties files (.properties and .yml)* The Cloud Foundry Manifest YML Support extension provides support for editing Cloud Foundry deployment manifest .yml files for Spring Boot application deployment
  • The Concourse CI Pipeline Editor provides support for setting up Concourse build pipeline for the Spring Boot application
  • The Spring Initializr Java Support extension provides support for generating quickstart Spring Boot Java projects with Spring Initiailizr API.
  • The Spring Boot Dashboard extension provides an explorer in the side bar where you can view all of a workspace’s spring boot projects conveniently in one place. You can also quickly start, stop or debug a project.

VS Code Front end Development

TypeScript

TSLint

TSLint adds support for Typescript linting in VS Code. This extension uses the TypeScript TSLint language service plugin.

React

ES7 React/Redux/React-Native/JS snippets

React.js logo

ES7 snippets adds a quick way of typing in those repetitive snippets within a react project such as creating a component. With ES7 snippets, creating a component is as easy as making the file, then typing rcc and hitting enter. The extension will then create the basic react component, imports and all! There are many more snippets in there too, all just as helpful.

React Pure To Class

This extension is great for refactoring React projects. React Pure To Class replaces pure functional react components with class components.

Angular

Angular 8 Snippets

The Angular 8 Snippets extension adds 242 snippets for Angular developers to use. These snippets include HTML, Typescript, and Angular 2,4,5,6, 7 & 8 Beta. Every snippet also follows the Angular style guide.

Angular Language Service

The Angular Language Service provides inline and external templates including:

  • Completions lists
  • AOT Diagnostic messages
  • Quick info
  • Go to definition

Angular Console

The Angular Console extension integrates a UI for the Angular CLI within VS Code. Angular CLI is a command-line tool, which works great when you want to serve an application or generate a simple component. But it falls short once you start doing advanced things.

Angular Files

The Angular Files extension adds a quick scaffold template for fast creation of new angular files. It will even automatically scan your angular.json to determine which default options you have already set.

Vue

Vetur

Vetur adds exceptional Vue tooling to VS Code by utilizing the vue-language-server. This extension includes features such as:

  • Syntax-highlighting
  • Snippet
  • Emmet
  • Linting / Error Checking
  • Formatting
  • Auto Completion
  • Debugging

Vue 2 Snippets

Vue 2 Snippets is another snippets extension that adds quick snippets for Vue developers to use to get their work done quick.

Vue Peek

The Vue Peek extension extends Vue code editing with Go To Definition and Peek Definition support for components and filenames in single-file components with a <em>.vue</em> extension.

Good for every framework

Debugger for Chrome

Debugger for Chrome adds a debugger for Google Chrome (or any other target that supports the Chrome Debugger protocol) right into VS Code. It supports:

  • Setting breakpoints, including in source files when source maps are enabled
  • Stepping, including with the buttons on the Chrome page
  • The Locals pane
  • Debugging eval scripts, script tags, and scripts that are added dynamically
  • Watches
  • Console

Live Server

Live Server is exactly what it sounds like — a live server. This extension allows you to quickly fire up a local live server with hot reload for quick development of web pages. You can even add an extension to run server capabilities such as a local node.js server.

Color Picker

Color Picker demo

Color Picker enables a visual color picker in your files. No more googling “what is the hex code for Drunk-Tank Pink” and instead you can pick it visually… OK, so maybe you will have to google Drunk-Tank Pink’s hex code but I think there’s a larger problem there than forgetting the code for that.

Readability

Readability is making the reading of code easier. Obvious, I know, but this is a very important aspect to development as this is where it must be perfectly setup to read quickly and efficiently. We should be able to quickly point out and decipher class, function, and variable names just by their color.

My favorite VS Code Theme: Better Solarized Dark

Better Solarized Dark Screenshot (from extension page)

Better Solarized Dark is a fantastic clone theme of the original Solarized Dark for differentiating everything on the fly as each keyword has a distinct color, leaving variables to have a distinguishable color their own. The blue background is very easy on the eye, especially with a blue light filter applied (though it’s great without one as well). The contrast between foreground and background colors is easy on the eyes and allows for quick scanning to find exactly where that misnamed variable is.

Bracket Pair Colorizer

Bracket Pair Colorizer Screenshot

Bracket Pair Colorizer is an extension that holds a dear place in my heart. This extension makes it so that bracket pairs are colored the same, allowing for quick deciphering of whether I need another bracket or parenthesis to close. By default, (), [], and {} are all color matched but this extension allows you to define your own bracket characters to match. This means if you feel really fun, you could make it so that semicolons are color matched.

Indent Rainbow

Indent Rainbow Screenshot

Indent Rainbow is another great extension to have to increase “Read Ease.” This extension adds a color for each indent in the file making it easy and quick to distinguish what’s on the same indent level as other items. This is especially helpful for languages like Python which rely on indenting for scope.

VS Code Icons

VSCode Icons Demo video

The stock icons in VS Code aren’t that great which is where VSCode Icons comes in. This extension replaces the stock icons with a new, better looking set that is much easier on the eyes and also makes it extremely easy to decipher between file types in a flash.

#python #javascript #angular #node-js #java

The Best VS Code Extensions for Full Stack Developers
1 Likes359.70 GEEK
1.00 Comments