DEV Community

Tim Apple for Vets Who Code

Posted on • Updated on

My Top Five FrontEnd VSCode Plugins

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

Top comments (2)

Collapse
 
dzhavat profile image
Dzhavat Ushev

That's a really nice list. I'm using most of the extensions as well. Will check out the rest.

Thanks for mentioning "CSS Flexbox cheatsheet". If you have any feedback or suggestions for improvements, please share them. (I'm its author)

Collapse
 
heytimapple profile image
Tim Apple

Thanks, css flexbox cheatsheet has helped me out a ton.