DEV Community

KJ
KJ

Posted on

My Frontend Dev Environment

Or really, as it stands right now.

As front end developers we spend a lot of our day at the keyboard. It makes perfect sense to spend some time creating an environment that is pleasant and productive to work in.

My environment is pretty personal and tweaked to my taste. There are many different ways to build your own setup and I hope you find something you can use in this post. Note that some of the extras are specific to macOS as well as the touchbar.

My editor of choice:

Visual Studio Code

VS code is a lightweight but powerful cross platform source code editor that runs on your desktop. It also has many extensions that can make life that much easier. I quickly fell in love with the editor the more I used it.

A few extensions I use pretty regularly:

  • :emojisense: (Matt Bierner)

    Adds suggestions and autocomplete for emoji

  • Auto Rename Tag (Jun Han)

    Auto rename paired HTML/XML tag

  • Bracket Pair Colorizer (CoenraadS)

    A customizable extension for colorizing matching brackets

  • WakaTime (WakaTime)

    Metrics, insights, and time tracking automatically generated from your programming activity.

  • GitLens (Eric Amodio)

    Supercharge the Git capabilities built into Visual Studio Code

  • Polacode (P & P)

    πŸ“Έ Polaroid for your code

  • Prettier (Esben Petersen)

    VS Code plugin for prettier/prettier

  • Vetur (Pine Wu)

    Vue tooling for VS Code

  • ES7 React/Redux/GraphQL/React-Native snippets (dsznajder)

    Simple extensions for React, Redux and Graphql in JS/TS with ES7 syntax

  • GraphQL for VSCode (Kumar Harsh)

    GraphQL syntax highlighting, linting, auto-complete, and more!

  • Import Cost (Wix)

    Display import/require package size in the editor

  • Simple Icons (Laurent TrΓ©guier)

    An icon theme that tries to be simple

  • npm Intellisense (Christian Kohler)

    Visual Studio Code plugin that autocompletes npm modules in import statements

  • vscode-Spotify (shyykoserhiy)

    Use Spotify inside vscode

  • SynthWave '84 (Rob Owen)

    A Synthwave-inspired colour theme to satisfy your neon dreams

Outside of my VSCode I use these applications for other things related to web development

Photography/Design

Photographer by night and occasional designer when needed.

Information Management

If it's not written down, it didn't happen. Last year, I started transitioning from a traditional pen and paper system and went digital. I wanted a system that allowed everything to be easily accessible from any of my devices and kept me sane. Though, I still have my journal because I haven't been able to find a suitable replacement online. Any suggestions?

  • Slack

    The digital water cooler and client communication

  • Zoom

    Video conferencing and screen sharing

  • Notion

    Project management, CRM, knowledge base

  • Todoist

    Running list of everything that needs to get done at some point in time

  • Google Suite (Drive, Calendar, Photos)

    Hosts all important files to be organized in Notion, Todoist linked to Google Calendar, Auto backup photos

Other Software

  • Spotify

    Gotta have the tunez

  • OBS

    Screen recording and streaming

  • Pock

    Makes the touchbar useful again

  • Steam

    Gaming platform

  • Alfred

    Spotlight on steroids

  • Grammarly

    Grammar and spell checking

Now, this environment isn't perfect and I will always be tinkering and tweaking to make it more productive and fit my workflow.

Know something that helps you?

Comment below!

I'd love to see what you're using.

Top comments (2)

Collapse
 
michaeltharrington profile image
Michael Tharrington

Hey KJ,

This is a great share! You should consider tagging it with #productivity or #developertools. Maybe both actually.

Just a quick tip β€” more folks will likely see your post if you tag it with some tags. Just be sure that the tags accurately describe your post.

Collapse
 
tkjohnson121 profile image
KJ

Woah, how am I just now seeing this? Thanks for the tips, I'll be sure to keep them in mind moving forward.