###### tags: `Tips and Tricks`

# System Setup

Setting up your computer for use as a Web Developer doesn't take much but can be difficult at the begining. There are slightly different things that you need to do if you are using a PC vs a MAC.

## VS Code
The following set ups are universal for Mac and PC's

### Folder Set up
1st thing you will want to do is deside on where you want to save your files too. The learn platform suggests Desktop, personally I like to use my documents.

Once you descide on where you want to save them create a new folder and name is Coding Dojo.

### Workspace
One of the nice things about VS Code is the ability to create a workspace. What this does is allows you to open up VS Code with the same folders on the left each time. Another benefit of this is you can eaisly open back up other files with out having to have more than one VS Code open or haivng to search them. Here are the steps to do this.

1. Click file and chose add folder to workspace
2. Search for the folder called Coding Dojo and single click it and chose add
3. Repeat this step till all the folders you wish to add to your space are added
4. Then click file and save workspace. I recommend saving this file to the desktop or your documents folder. You can name it anything you want.

The following image is what you should see once your workspace is set up.

### Extensions
For right now we only recomend installing 3 extensions in VS Code
1. Bracket Pair Colorizer - this helps to make sure that you have a opening and closing bracket by pairing each to be the same color
2. Code Runner - Gives you the ability to run JS outside of codepen
3. Code Spell Checker - If you are bad speller like I am this comes in handy as it will you what words are misspelled.

Here is a picture of the 3:

## Terminal

Other than VS Code we will be spending a lot of time using the terminal.

### Mac
Install HomeBrew
To install open the terminal that is on the mac and enter he following command:

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

### Windows

You will need to download git bash from the following url:
[Git Bash: ](https://git-scm.com/downloads)
Once that is downloaded and installed we will need to locate the version you will want to use on your pc. Here is in most cases where it will be located and what it will look like:
I would recommend creating a shortcut of this to your desktop.

### Using the terminal

The 1st few commands you will need to know for the terminal are the following:
1. pwd - This will tell you the file path of your current location
2. ls - This will list all the files that are in the furrent folder location
3. cd - This is how you will move about through the folders.
a. cd .. - Will move you up one folder
b. cd documents - will move you to the documents folder as long as that is in the current folder you are in.
4. code fileName - This will open up the file you chose in VS Code (You can also do code)
a. If the file name you are trying to open doesn't exist this will open VS Code with a file by that name open and once you save it is actually created
5. touch fileName - This will create a file in the current folder you are in.

For the following you will need to run the pwd and ls -a commands in your terminal

On a Mac you should see the following (you may not see all the same files)
On a PC you should see the following (you may not see all the same files)

#### Setting home directory
1 thing everyone wants to do in most cases is set up where their terminal defaults to open. In most cases you would want it to open up in the main folder you will save all your code into.

1. You will need to locate where you need to save it too. The commands you ran above it typically where you will need the next file to go.
2. Another step would be to make sure you know how to navigate to the folder that you want to save your code to. In my case I save to Documents. As you can see in both pictures the Documents folder is located right were the pwd command states.
3. Next you will want to run the following command

code .bashrc

What this command does is creates and opens the file in VS Code (if it gives you an error that code is not a command you can follow the same process above but in the terminal with in VS Code as I did in the picture below.)

You should now have VS Code open with a unsaved copy of .bashrc open. You will then add 1 line to that file for me I am going to my Documents folder so that is what my line will show.
If you are going to be saving to the desktop and as you saw in the terminal pictures above this also is in the root directory you will add the following line

cd ~/Desktop

Save the file and now when ever you open the terminal it should open to your root folder.
In VS Code if you set up a workspace (sometimes all the time) you will see this when you click on open terminal
Just click which ever one you are working in and it will open your terminal in that folder or just your root folder