My Top Five FrontEnd VSCode Plugins

Tim Apple - Sep 29 '19 - - Dev Community

I have been using Microsofts Visusal Studio Code everyday for the past few months. I have installed it multiple times on Linux and Windows. There are five plugins I always install immediately. I thought I would share them here.

  • Remote-WSL - extension lets you use the Windows Subsystem for Linux (WSL) as your full-time development environment right from VS Code. If you haven't set up the subsystem, here are some instructions.
  • Front-end extension pack - This is actually a cluster of stuff in one bundle makes life much easier than searching each one out.
    • Preview Live Server
    • Browser Preview
    • IntelliSense for CSS class names in HTML
    • HTML CSS Support
    • Auto Rename Tag
    • Auto Close Tag
    • npm Intellisense
    • Path Intellisense
    • JavaScript (ES6) code snippets
    • Turbo Console Log
    • stylelint
    • ESLint
    • Prettier - JavaScript formatter
    • Beautify
    • EditorConfig for VS Code
    • Import Cost
    • Code Spell Checker
    • Debugger for Chrome
    • TypeScript Extension Package
    • Bracket Pair Colorizer
    • Git History (git log)
    • snippet-creator
  • Live Share Extension Pack - This extension pack includes everything you need to start collaboratively editing and debugging in real time.
    • Live Share
    • Live Share Audio
    • Live Share Chat
    • Peacock
  • Gitlens - Supercharges the Git capabilities built into Visual Studio Code.
  • CSS Flexbox Cheatsheet - VS Code extension that lets you open a flexbox cheatsheet directly in the editor.

I haven't found a need to install anything else besides these and maybe I have tried a few themes.

Also note, you have to install them twice if your using WSL (Windows Subsystem for Linux).

Enjoy

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .