the text "Full stack edition" on top the vs code logo

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

Just Getting Started?

If you’re just getting started in full stack development and want to learn more, check out this book! It’ll get you started up quick with Nodejs and Express:

Web Development with Node and Express: Leveraging the JavaScript Stack

Or if you want to learn more about PHP, MySQL, and JavaScript, check this one out:

Learning PHP, MySQL & JavaScript: With jQuery, CSS & HTML5 (Learning PHP, MYSQL, Javascript, CSS & HTML5)

If your are just getting started in full stack development or microservices and feel lost, check out my post on microservices here. Ever hear about Next.js? Well you should have if you haven’t! Check out what it is here. Finally, if you’re looking to create your own website, check out this article about using AWS S3 and Route53 to create your own static website.

Stay up to date on my recent posts
Get the latest content first.
We respect your privacy.

Note: Every header is also a link to the extension. All Links will open in new tabs so you can scroll through and check out every one that seems interesting

Documentation, Version Control, & General Maintenance Extension

Document This

Demo

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

Annotated code

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

Example

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

Remote Development

Remote SSH

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

VS Code GitLens Preview
GitLens Demo video

This isn’t as much an extension as it is a shoutout. GitLens is an integrated visualization of git inside of VS Code. This extension 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

Recording of 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.

GitHub Pull Requests

Demo

When dealing with open source projects or when working with a team, you are bound to work with pull requests. The GitHub Pull Requests extension adds the functionality to check out pull requests right from VS Code. Just authenticate and connect VS Code to GitHub and you’re good to go!

Beautify

Beautify logo
Beautify Logo

Need to quickly format javascript, JSON, CSS, Sass, or HTML files? Beautify is an extension that will do just that. 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. Personal note: I recently switched to Prettier and now prefer/recommend Prettier over beautify as it covers more languages than beautify. I’ll leave beautify in this list as a tribute however 🙂

Prettier

Similar to beatify, Prettier is a code formatter but supports a much larger selection of languages and frameworks. Prettier also supports a configuration file in the form of a .prettierrc and supports languages including:

Settings Sync

VS Code settings sync screenshot
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.

Bookmarks

Toggle

Bookmarks is a no brainer to have. This extension adds in bookmarks that you can use to move around your code base much faster. Need to remember a spot for later? Add a bookmark! Add as many as you need and check all of your book marks using simple commands.

IntelliSense Extension

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

Visual Studio IntelliCode

IntelliCode is slightly different than the other IntelliSense extensions. IntelliCode adds AI-assisted autocomplete for Python, TypeScript/JavaScript, and Java.


VS Code Back End Development Extension

REST Client

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

VS Code code runner usage
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

The Node.js Extension Pack

node.js logo
node.js logo

Instead of listing each Node extension on it’s own, there is a fantastic extension pack containing all the necessities — the Node.js Extension Pack is a collection of helpful node.js extensions including:

PHP

PHP Debug

Demo GIF

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

Microsoft Python Extension for Visual Studio Code

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

Django

Syntax with Gruvbox

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

completions

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

IDE

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

autoDocstring

Auto Generate Docstrings

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

Screenshot

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

 screencast

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

Run/debug JUnit test

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

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

Screenshot

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.GitLensThe 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 Extension

TypeScript

TSLint

Source Action context menu

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

Demo

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

Angular

Angular 8 Snippets

ngComponentSnippet

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

demo

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

Another snippets extension, this time for my Vue devs out there, is Vue 2 Snippets. This extension adds quick snippets for the Vue framework to get your work done quicker.

Vue Peek

Demo

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 .vue extension.

Extension Good for Every Framework

Debugger for Chrome

Demo

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

VS Code Live Server Demo

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

VS Code color picker demo
Color Picker demo

Visually select colors with the Color Picker extension. 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 Extension

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

VS Code Better Solarized Dark ScreenShot
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.

A Great Font with Ligatures: Fira Code

Fira Code is a simple monospaced font but adds ligatures to VS Code. This turns common symbols such as -> into much nicer, flowier symbols!

Bracket Pair Colorizer

VS Code bracket pair colorizer Screenshot
Bracket Pair Colorizer Screenshot

An extension that holds a dear place in my heart is Bracket Pair Colorizer. 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

VS Code indent rainbow screenshot
Indent Rainbow Screenshot

Another great extension to have to increase readability is Indent Rainbow. 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

VS Code icons video
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.

Stay up to date on my recent posts
Get the latest content first.
We respect your privacy.