Setting Up Your Dev Environment
Tags: tooling, setup, vibes
Published: 2021-07-03 03:37:51

---
title: Setting Up Your Dev Environment
published: true
description: a list of tools and extensions for configuring your development environment
tags: tooling, setup, vibes
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vz39pvae5exo4nmqryrx.jpg
---

I've compiled a list of sites, tools, and extensions I've enjoyed using for anyone looking to get started on their own development journey.

### Learning

Developing software means learning to learn. Visualization and teaching are the most direct ways to create new neural pathways. Create projects you'd want to use to flex your new skills and sprinkle [fun](https://media.giphy.com/media/26ufl1ASleVkA7wIg/giphy.mp4) into whatever you're doing. Jim Kwik's [Limitless](https://www.indiebound.org/book/9781401958237) is worth a read to kickstart your learning journey.

Tutorials

- [freeCodeCamp](https://www.freecodecamp.org/)
- [Level Up](https://www.leveluptutorials.com/)

Reading & Listening

- [dev.to](https://dev.to/)
- [CodeNewbie](https://www.codenewbie.org/)
- [Syntax FM](https://syntax.fm/)

### Playing & Prototyping

Sites for when I want to play around or prototype an idea and not have to deal with environment config:

- [Glitch](https://glitch.com/)
- [Replit](https://replit.com/)
- [CodeSandbox](https://codesandbox.io/)

### Terminal

I use the default mac terminal since I enjoy the winky sass the icon serves me and it does everything I want :) shout out to [iterm2](https://iterm2.com/) as a more fully featured option. I use [zsh](https://www.zsh.org/) with [oh my zsh](https://ohmyz.sh/)

Xcode CLI tools: `xcode-select —-install`

[Homebrew](https://brew.sh/) to download system packages

### Source Control

[Git](https://git-scm.com/) is installed with the Xcode CLI tools which is my source control for code changes. [Github](https://github.com/) is where I push those changes to collaborate with others. I use [Gitlab](https://about.gitlab.com/) at work which is also fantastic and offers free private repos. Github is a better place to start on IMO since the open source community is centered around it. You can learn so much from looking at / working on open source software so def have fun with that :)

### Text Editor

[VS Code](https://code.visualstudio.com/) is fantastic. I love the git tooling where I can clearly review all my changes before committing them and all of the fun extensions that are available.

Extensions:

- [Material Theme](https://marketplace.visualstudio.com/items?itemName=Equinusocio.vsc-material-theme)
- [Material Icons](https://marketplace.visualstudio.com/items?itemName=PKief.material-icon-theme)
- [EsLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)
- [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)
- [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer)
- [Bracket Pair Colorizer](https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer)
- [Import Cost](https://marketplace.visualstudio.com/items?itemName=wix.vscode-import-cost)

### Browsers

You'll want to get familiar with the dev tools in your browser of choice and have multiple browsers to QA your apps on. Get extensions for viewing JSON, React / Vue Dev Tool extensions, and an ad blocker while you're at it ;)

- [Firefox Developer Edition](https://www.mozilla.org/en-US/firefox/developer/)
- [Chrome](https://www.google.com/chrome/)

### Servers

[Netlify](https://www.netlify.com/) is the truth for hosting static sites and a cute place to get started. It has a massive free tier and helpful tooling through a pleasent interface.

Once you want to start playing around with storing content in a database and creating an API to access it you'll want to explore cloud services such as [AWS](https://aws.amazon.com/), [Heroku](https://www.heroku.com/home), or [DigitalOcean](https://www.digitalocean.com/)

have fun!