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
-
Useful for testing api routes
-
Simple GUI for github on your desktop
Photography/Design
Photographer by night and occasional designer when needed.
-
Collaborative design application in the browser
-
Simple editing and photo organization
-
Photo manipulation
-
Video editing
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?
-
The digital water cooler and client communication
-
Video conferencing and screen sharing
-
Project management, CRM, knowledge base
-
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
-
Gotta have the tunez
-
Screen recording and streaming
-
Makes the touchbar useful again
-
Gaming platform
-
Spotlight on steroids
-
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)
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.
Woah, how am I just now seeing this? Thanks for the tips, I'll be sure to keep them in mind moving forward.