DEV Community

loading...
Cover image for Everything I use daily as a Senior Frontend Engineer

Everything I use daily as a Senior Frontend Engineer

jordienr profile image Jordi Enric ・3 min read

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"
Enter fullscreen mode Exit fullscreen mode

Or run npm commands:

alias nr="npm run"
Enter fullscreen mode Exit fullscreen mode

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.

Discussion (3)

Collapse
panditapan profile image
Pandita

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

have you tried obsidian md? ;o

My tools at work are: VS Studio 2019 and 2015 (for opening very specific projects), GitFiend (it's cute so I like it! but it's missing a few things) and Obsidian to handle documentation, meeting notes, my thoughts, tasks, my own personal kanban and it also helps me concentrate a bit because I'm easily distracted @w@

Collapse
jordienr profile image
Jordi Enric Author

I've tried obsidian a few times and I liked it but I'm waiting for it to be officialy on iOS and be able to sync everything between my devices :)

Collapse
thisurathenuka profile image
Thisura Thenuka

Use ShareX rather than Screen to GIF. You'll be way more productive with its integrations

Forem Open with the Forem app