Must-have VS Code Extensions for Web Development

The VS Code editor is such a pleasure to work with; it is my code editor of choice when working with light C# projects or any other languages such as JavaScript or Ruby on Rails.

Below are my must-have extensions for anyone doing web development. There are many more magnificent extensions, but I feel like the following are not only useful but required to augment your web development experience with VS Code.

HTML Preview

An extension to preview HTML files while editing them in VSCode

The extension can be activated in two ways

  • Toggle Preview – ctrl+shift+v or cmd+shift+v
  • Open Preview to the Side – ctrl+k v or cmd+k v

Markdown Preview Enhanced

An extension to preview Markdown (MD) files while editing them in VSCode

The goal of this project is to bring you a wonderful markdown writing experience.

Keybindings: The cmd key for Windows is ctrl.

ShortcutsFunctionality
cmd-k vOpen preview to the Side
ctrl-shift-vOpen preview
ctrl-shift-sSync preview / Sync source
shift-enterRun Code Chunk
ctrl-shift-enterRun all Code Chunks
cmd-= or cmd-shift-=Preview zoom in
cmd– or cmd-shift-_Preview zoom out
cmd-0Preview reset zoom
escToggle sidebar TOC

Code Spell Checker

A basic spell checker that works well with camelCase code.

Functionality:

Load a TypeScript, JavaScript, Text, etc. file. Words not in the dictionary files will have a squiggly underline.

Example:

Example

GitLens – Git supercharged

GitLens increases the capabilities of Git built into Visual Studio Code. It helps you visualize code authorship at a glance through Git blame and code lens annotations, among other things.

Git Code Lens
Current line blame

ESLint

Integrate ESLint into VS code. ESLint statically analyzes your code to find problems quickly.

The setting below turns on Auto Fix for all providers including ESLint:

    "editor.codeActionsOnSave": {
        "source.fixAll": true
    }

In contrast, this configuration only turns it on for ESLint:

    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    }

You can also selectively disable ESLint via:

    "editor.codeActionsOnSave": {
        "source.fixAll": true,
        "source.fixAll.eslint": false
    }

Prettier – Code formatter

Prettier is an opinionated code formatter. It enforces a consistent style by parsing your code and re-printing it with its own rules that take the maximum line length into account, wrapping code when necessary.

Default Formatter:

To ensure that this extension is used over other extensions you may have installed, be sure to set it as the default formatter in your VS Code settings. This setting can be set for all languages or by a specific language.

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

Intellisense for CSS class names

A Visual Studio Code extension that provides CSS class name completion for the HTML class attribute based on the definitions found in your workspace or external files referenced through the link element.


That’s all, folks! I invite you to try other extensions, but make sure not to clutter your VS Code experience by installing extensions you might not need or use.

Also, remember to adjust your VS Code settings to make sure you get the most productivity and the best experience when using VS Code and these extensions.

If you know of any other VS Code extensions for web development, please feel free to share them in the comments below. Cheers.

Favorite Visual Studio Code Extensions of 2018

Visual Code is a fantastic code editor, but what really makes it powerful are the extensions available for it. In this post, I share some of my favorite VS Code extensions while using VS Code to develop web applications.

  • WakaTime – Metrics, insights, and time tracking automatically generated from your programming activity.
  • GitLens – GitLens supercharges the Git capabilities built into Visual Studio Code. It helps you to visualize code authorship at a glance via Git blame annotations and code lens, seamlessly navigate and explore Git repositories, gain valuable insights via powerful comparison commands, and so much more.
  • REST Client – REST Client allows you to send HTTP request and view the response in Visual Studio Code directly.
  • Npm Intellisense – Visual Studio Code plugin that autocompletes npm modules in import statements.
  • Code Spell Checker – A basic spell checker that works well with camelCase code.The goal of this spell checker is to help with catching common spelling errors while keeping the number of false positives low.
  • Azure Storage – The Azure Storage extension for VS Code lets you deploy static websites and browse Azure Blob Containers, File Shares, Tables, and Queues. Follow this tutorial to deploy your web apps to Azure Storage from VS Code.
  • Night Owl – A VS Code theme for the night owls out there. Works well in the daytime, too, but this theme is fine-tuned for those of us who like to code late into the night.
  • Project Manager – It helps you to easily access your projects, no matter where they are located. Don’t miss that important projects anymore. You can define your own Favorite projects, or choose for auto-detect VSCode projects, GitMercurial and SVN repositories.
  • Todo Tree – This extension quickly searches (using ripgrep) your workspace for comment tags like TODO and FIXME, and displays them in a tree view in the explorer pane. Clicking a TODO within the tree will open the file and put the cursor on the line containing the TODO.
  • Turbo Console Log – This extension make debugging much easier by automating the operation of writing meaningful log messages.

Do you know of any cool and useful VS Code extensions? Please share them in the comments.

Happy Coding!