My Frontend Dev Environment
Published: 2019-10-30 17:43:28

*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](https://code.visualstudio.com/)

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](https://marketplace.visualstudio.com/items?itemName=bierner.emojisense))

    Adds suggestions and autocomplete for emoji

- Auto Rename Tag ([Jun Han](https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag))

    Auto rename paired HTML/XML tag

- Bracket Pair Colorizer ([CoenraadS](https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer))

    A customizable extension for colorizing matching brackets

- WakaTime ([WakaTime](https://marketplace.visualstudio.com/items?itemName=WakaTime.vscode-wakatime))

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

- GitLens ([Eric Amodio](https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens))

    Supercharge the Git capabilities built into Visual Studio Code

- Polacode ([P & P](https://marketplace.visualstudio.com/items?itemName=pnp.polacode))

    📸 Polaroid for your code

- Prettier ([Esben Petersen](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode))

    VS Code plugin for prettier/prettier

- Vetur ([Pine Wu](https://marketplace.visualstudio.com/items?itemName=octref.vetur))

    Vue tooling for VS Code

- ES7 React/Redux/GraphQL/React-Native snippets ([dsznajder](https://marketplace.visualstudio.com/items?itemName=dsznajder.es7-react-js-snippets))

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

- GraphQL for VSCode ([Kumar Harsh](https://marketplace.visualstudio.com/items?itemName=Prisma.vscode-graphql))

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

- Import Cost ([Wix](https://marketplace.visualstudio.com/items?itemName=wix.vscode-import-cost))

    Display import/require package size in the editor

- Simple Icons ([Laurent Tréguier](https://marketplace.visualstudio.com/items?itemName=LaurentTreguier.vscode-simple-icons))

    An icon theme that tries to be simple

- npm Intellisense ([Christian Kohler](https://marketplace.visualstudio.com/items?itemName=christian-kohler.npm-intellisense))

    Visual Studio Code plugin that autocompletes npm modules in import statements

- vscode-Spotify ([shyykoserhiy](https://marketplace.visualstudio.com/items?itemName=shyykoserhiy.vscode-spotify))

    Use Spotify inside vscode

- SynthWave '84 ([Rob Owen](https://marketplace.visualstudio.com/items?itemName=RobbOwen.synthwave-vscode))

    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

- [Postman](https://www.getpostman.com/)

    Useful for testing api routes

- [Github Desktop](https://desktop.github.com/)

    Simple GUI for github on your desktop

# Photography/Design

Photographer by night and occasional designer when needed.

- [Figma](https://www.figma.com/)

    Collaborative design application in the browser

- [Lightroom Classic](https://www.adobe.com/products/photoshop-lightroom-classic.html)

    Simple editing and photo organization

- [Photoshop](https://www.adobe.com/products/photoshop.html)

    Photo manipulation

- [Davinci Resolve](https://www.blackmagicdesign.com/products/davinciresolve/)

    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?

- [Slack](https://slack.com/)

    The digital water cooler and client communication

- [Zoom](https://zoom.us/)

    Video conferencing and screen sharing

- [Notion](https://www.notion.so/)

    Project management, CRM, knowledge base

- [Todoist](todoist)

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

- [Google Suite](https://gsuite.google.com/) (Drive, Calendar, Photos)

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

# Other Software

- [Spotify](https://www.spotify.com/us/)

    Gotta have the tunez

- [OBS](https://obsproject.com/)

    Screen recording and streaming

- [Pock](https://pock.dev/)

    Makes the touchbar useful again

- [Steam](https://store.steampowered.com/)

    Gaming platform

- [Alfred](https://www.alfredapp.com/)

    Spotlight on steroids

- [Grammarly](https://www.grammarly.com)

    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.