VS Code Extension Pack for Front-End Development

This extension pack packages some of the most popular (and some I find very useful) VS Code extensions for front-end development (framewors' agnostic).

Extensions Included

Preview/Live Server

• Live Server - Launch a local development server with live reload feature for static & dynamic pages.

• Browser Preview - A real browser preview inside your editor that you can debug. Can be used with JavaScript libs/frameworks such as React, Vue and Angular as well.

IntelliSense / Snippets

• IntelliSense for CSS class names in HTML - CSS class name completion for the HTML class attribute based on the definitions found in your workspace.

• HTML CSS Support - CSS class and and id attribute completion.

• Auto Rename Tag - Auto rename paired HTML/XML tag.

• Auto Close Tag - Automatically add HTML/XML close tag, same as Visual Studio IDE or Sublime Text.

• npm Intellisense - Visual Studio Code plugin that autocompletes npm modules in import statements.

• Path Intellisense - VSCode has a very good auto import capability, but sometime you still need to import some files manually, and this extension helps a lot in these cases.

• JavaScript (ES6) code snippets - Code snippets for JavaScript in ES6 (ES2015+) syntax.

• Turbo Console Log - This extension make debugging much easier by automating the operation of writing meaningful log message. Two steps:

  • 1. Selecting the variable which is the subject of the debugging.
  • 2. Pressing ctrl + alt + L

Lint

• stylelint - A Visual Studio Code extension to lint CSS/SCSS/Less with stylelint.

• ESLint - Integrates ESLint JavaScript into VS Code.

Formatters

• Prettier - JavaScript formatter - format your Javascript / Typescript / CSS Recommended settings:

  • "prettier.singleQuote": true (this helps when using auto import extension or the VSCode auto import functionality).
  • "prettier.tabWidth": 2 (uses 2 spaces as default indentation). With this setting, you can continue using tabs if it is your preference
  • "prettier.useTabs": false (same as above)

• Beautify - VS Code uses js-beautify internally, but it lacks the ability to modify the style you wish to use. This extension enables running js-beautify in VS Code, and honouring any .jsbeautifyrc file in the open file's path tree to load your code styling.

• EditorConfig for VS Code - EditorConfig Support for Visual Studio Code (must have extension for VSCode).

Utilities

• Import Cost - Display import/require package size in the editor.

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

• Debugger for Chrome - Debug your JavaScript code in the Chrome browser, or any other target that supports the Chrome Debugger protocol.

TypeScript extensions

In this pack you will find extensions for JavaScript. If you enjoy using TypeScript, please check my TypeScript extension pack, it is a great complement for this package!

• TypeScript Extension Package

Other extensions recommended, but not included in this package

• Bracket Pair Colorizer - This extension allows matching brackets to be identified with colours. Great when you have nested brackets. I usually keep this extension disabled and only enable it when needed.

• Git History (git log) - allows you to view git history with graph and details

• snippet-creator - helps you creating code snippets (saves snippets in the User Snippets in VSCode)

Credit: Logo/Icon made by Freepik from www.flaticon.com

Enjoy!