VSCode extensions I use as a Frontend Developer

Cover image

I've used many editors and IDEs: Notepad++, Gedit, Vim, Sublime Text, Atom, Eclipse, Webstorm, PyCharm, Brackets, etc. But none of them provide a better experience than VSCode for me, regardless of what language or framework I'm programming in. The only exceptions I've found so far are Visual Studio for .NET and IntelliJ IDEA for Java.

Here are the must-have extensions I always install in a new setup for a frontend project.

  1. Auto Rename Tag - Jun Han: Auto rename paired HTML/XML tag.
  2. Better Comments - Aaron Bond: Highlighting for different types of comments.
  3. Draw.io Integration - Henning Dieterichs: Draw and edit architecture diagrams like regular files.
  4. ESLint - Dirk Baeumer: Integrates ESLint into VSCode.
  5. GitLens - Eric Amodio: Visualize code authorship at a glance.
  6. GraphQL - Orsen Kucher: Adds syntax highlighting and language features for graphql projects.
  7. Jest - Orta: Wallaby.js alternative to help debug jest tests in VSCode.
  8. MDX - unified: Language support for MDX.
  9. Playwright Test for VSCode - Microsoft: Run Playwright Test tests in Visual Studio Code.
  10. Prettier - Prettier: Opinionated code formatter.
  11. Pretty TypeScript Errors - yoavbls: Make TypeScript errors prettier and more human-readable.
  12. Tailwind CSS IntelliSense - Tailwind Labs: Intelligent Tailwind CSS tooling for VS Code.
  13. Version Lens - pflannery: Shows the latest version for each package using code lens.
  14. WakaTime - WakaTime: Metrics, insights, and time tracking for your programming activity.

Have questions? Discuss on Twitter

Last Updated -