VSCode

I use these extensions:

Utilities

• Auto Close Tag: Automatically add HTML/XML close tag, same as Visual Studio IDE or Sublime Text
• Auto Rename Tag: Auto rename paired HTML/XML tag
• Better Comments: Improve your code commenting by annotating with alert, informational, TODOs, and more!
• Better TOML: Better TOML Language support
• Bracket Pair Colorizer: A customizable extension for colorizing matching brackets
• DotENV: Support for dotenv file syntax
• ESLint: Integrates ESLint JavaScript into VS Code.
• Firebase: Firestore Security Rules syntax highlighting
• GitLens: Supercharge the Git capabilities built into Visual Studio Code — 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
• Gremlins Tracker: Reveals some characters that can be harmful because they are invisible or looking like legitimate ones. Inspired by Sublime Gremlins.
• Import Cost: Display import/require package size in the editor
• Intellisense for CSS class names in HTML: CSS class name completion for the HTML class attribute based on the definitions found in your workspace.
• Jest: Use Facebook's Jest With Pleasure.
• Jest Test Explorer: Run your Jest tests in the Sidebar of Visual Studio Code
• Markdown Preview Enhanced: Markdown Preview Enhanced ported to vscode
• markdownlint: Markdown linting and style checking for Visual Studio Code
• Material Design icons Intellisense
• npm Intellisense
• Path Intellisense
• Prettier
• Project Manager: Easily switch between projects
• Rainbow CSV: Highlight CSV and TSV files, Run SQL-like queries
• Random Everything: Generate random ints, floats, strings, words, etc.
• SCSS Intellisense: Advanced autocompletion and refactoring support for SCSS
• Todo Tree: Show TODO, FIXME, etc. comment tags in a tree view
• TS QuickFixes: Quick fixes for typescript
• TS

Look & feel

• Fluent Icons: Fluent product icons for Visual Studio Code
• GlassIt-VSC: VS Code Extension to set window to transparent on Windows and Linux platforms.
• Peacock: Subtly change the workspace color of your workspace. Ideal when you have multiple VS Code instances, and you want to quickly identify which is which.
• Yi Dark & Yi Light Themes

Git Bash Terminal

I use it to CRUD between folders & files. Open projects in VS Code, manage Git in projects, use VIM, etc.

I recommend you set up some aliases for the most common commands you type.

For example, I have aliases to quickly move to folders like:

alias cdhp="cd h:/projects"

Or run npm commands:

alias nr="npm run"

Screen to GIF

I'm a frontend developer, so most of my work can be screenshotted or screengiffed (I made this word up) which is really useful when working remotely. I use Screen to GIF to quickly create GIFs of parts of the UI to show how it's going or working. This tool is really helpful to have better async conversations with different teams.

Todoist

Even tho at work I use Azure I like to keep a personal to-do list to keep track of tasks I'm working on. I pay the todoist subscription which is pretty reasonable to have everything in one place. There are other free alternatives like trello, notion and more.

Notion

I use Notion only for documentation and taking notes. I find it pretty slow but haven't found any alternatives that I like.

Figma

Even tho I usually don't participate in design processes Figma is really useful to create graphics for documentation. I used to do freelance UI Design, so I'm pretty comfortable with the tool. I'd recommend anyone who is working in Frontend development to get comfortable with Figma.

Conclusion

These are all the tools I use on a daily basis. Only with these I can do my job 100% no problem. I believe that having more tools adds complexity to your day, so I try to keep it simple. I'd recommend you don't have too many tools in your belt and have a clear goal for each.

I could keep track of tasks in Notion, but I prefer to use Notion only for documentation so that it doesn't get too messy.

So, what are your tools? Leave a comment and share them!

Follow me on Twitter for more.