Beginner's guide to a developer work environment (Part 2)
Tags: tutorial, beginners, productivity
Published: 2019-06-18 19:06:34

---
title: Beginner's guide to a developer work environment (Part 2)
published: true
description: This is a more in depth look of how I actually use these tools
tags: tutorial, beginners, productivity
---

Finally getting around to writing the part 2! Sorry for the delay my friends. Here is a link to part 1 if you haven’t read that yet: https://dev.to/ikey2244/beginner-s-guide-to-a-developer-work-environment-part-1-ibk

Here is how I actually use the tools from part 1 in my day to day.  


### 1. Xcode

How often I use it: Never

Only installed this to make sure our macs are set up correctly for development. If you are doing an IOS development this is what you would interact with.

Common Workflow: None

### 2. Homebrew

How often I use it: Occasionally

You don't have to use Homebrew. It's just a nice thing to have. It makes it really easy to install applications and tools etc.

I sometimes will use Homebrew to run servers/databases in the background. For instance I might have a MongoDB database running with Homebrew. That might look something like this. 

1. Installed mongoDB
2. run command `brew services start mongodb`

that's pretty much it.

### 3. ZSH(Oh-my-zsh) 

How often I use it: Everyday

So technically I use this everyday but really if you are using you Iterm you are using ZSH. Once again ZSH just offers a nice way to interact with your terminal. Tab completion/suggestions etc.

### 2. Iterm

How often I use it: Everyday

Common commands I use daily: 

`mkdir` creates a new folder

**Example:** `mkdir code` creates a new folder called "code"

`cd` stands for "change directory". 

**Example:** You just created a new folder called "code". In order to get inside that folder you have to type `cd code` and hit enter. You then will be taken inside that directory.

`..` allows you to move up in the in the directory. 

**Example:** you are in a directory called `code/my-sick-project`. Now you just want to be inside the `code` directory. By hitting `..` you will move up in the directory and thus be in the `code` folder.

`ls` lists everything within a directory/folder.

`touch your-file-name` creates a new file. 

**Example:** `touch index.html` creates a new html file called index.html in your project.

`clear` to clear the console (just cleans up what you've done previously)

⌘ + d to add another window to terminal.

**Side note:** When you first open your terminal you will most likely see a symbol that looks like this ~ this just indicates that you are in the home directory of your computer. If you run the command `pwd` in your terminal you will see directory you are currently in. This can be helpful if you get lost.

**Common Workflow:**

1. Open Iterm
2. run command `mkdir new-project`
3. `cd` into that project by typing `cd new-project`
4. `touch index.html` to create a new index.html file in the project.
5. run command `code .` (this opens VS code. We will get to that later).


**Extras:**

Hitting ctrl + r in your terminal will pull up a search for all your previous commands you ran! It's extremely useful if you forget what command to run. let's say you only remember the first part of a command. For instance you remembered the `touch` but don't know what to do next. Hit Ctrl + r in your terminal and type `touch` this will bring up the last time you typed that command and show you what you did.

### 3. Visual Studio Code

How often I use it: Everyday

In the Iterm section I mentioned running this command `code .` By running this command in a directory VS code will open and you can start editing files. This is very useful when creating a new project!

Here is how you make that work:
1. Open VS code.
2. Press ⌘ + ⇧(shift key) + p: this opens the command palette
3. In the command palette type "shell command" it will show something like this![](https://thepracticaldev.s3.amazonaws.com/i/8i3rw5jbb9jgc0u992my.png)
4. Press enter on this option
5. That's it!

Now go into a project you created in Iterm or create a new directory(this would be good practice) and run the command `code .`VS code should open and you should see the name of your project on the left hand side in the file explorer. 

Link to further information about this: https://code.visualstudio.com/docs/setup/mac

As you can imagine programming would be really hard if you had to do everything manually. Luckily VS code gives us a ton of hotkeys and shortcuts to make our lives easier! Let's check it out.

I used to use Atom(another code editor like VS code). I still love Atom but VS code has captured my heart. Relearning hotkeys for VS code would be a pain. Fortunately VS code has an extension called "Atom Keymap" that pulls all the hotkeys from Atom and sets them for VS code. Brilliant!

You don't actually need this but if you want to use my hotkeys then you will need this extension:https://marketplace.visualstudio.com/items?itemName=ms-vscode.atom-keybindings. 


Install by going clicking on this icon. ![](https://thepracticaldev.s3.amazonaws.com/i/43b7mz46dlm4zaporg6u.png) and search for Atom Keymap. Hit install button and you should have it.

**Common hotkeys I use everyday:** 

1. copy ⌘ + c
2. paste ⌘ + v
3. cut ⌘ + x
4. delete single line of code ⌘ + ⇧(shift key) + k
5. duplicate highlighted code ⌘ + ⇧(shift key) + d
6. Hold ⌘ command key and click to have multiple cursors.https://code.visualstudio.com/docs/getstarted/tips-and-tricks#_editing-hacks
7. undo ⌘ + z 
8. redo ⌘ + ⇧
9. search for a file in your project ⌘ + p
10. ⌘ + right-arrow end of line
11. ⌘ + left-arrow beginning of line
12. ⌘ + top-arrow 1st line of code
13. ⌘ + down-arrow last line of code
14. while holding ⌘ + ⇧(shift key) + arrow key will highlight the line of code corresponding to the direction.
15. Jump between words. hold alt key while using arrows to jump to each word.

Needless to say there are a lot of hotkeys. Hopefully this list will get you up and running. For a full list checkout the documentation in the Atom Keybindings extension.

####Make it pretty
VS code out of the box is pretty ugly. Let's make it pretty!!

I really love the Palenight theme
https://marketplace.visualstudio.com/items?itemName=whizkydee.material-palenight-theme

**Install it**
1. click icon ![](https://thepracticaldev.s3.amazonaws.com/i/43b7mz46dlm4zaporg6u.png)
2. search for Palenight theme
3. Install
4. reload
5. be amazing

There are a lot of different themes. Make it your own! Being comfortable with your editor is really important.


That's all folks!! Hopefully that helped some new comers. Please let me know if you see any errors or have any critiques. I welcome all correction. :) Remember everyone is a beginner at something so don't ever feel bad about not knowing something. Ask questions and fail often. That's the only way to get better.