Setting up Mac for Web Development
Tags: webdev, macbook, settingup, basics
Published: 2021-06-19 15:21:51

You'll need to install the following:

- Homebrew - Package manager for OS X. You'll be able to get it here [Brew Site](https://brew.sh/) <br/><br/>

- Run the following commands: <br/><br/>

- `brew update` - Updates <br/><br/>

- `brew cask install iterm2` - [Iterm2](https://iterm2.com/) is macOS terminal replacement. Looks beautiful and is customizable <br/><br/>

- `brew install git` - Well, you know why! <br/><br/>

- `brew install --cask rectangle` - Run this if you are going to need multiple windows opened at the same time. This [tool](https://rectangleapp.com/) helps in moving and resizing windows in macOS using keyboard shortcuts or snap areas <br/><br/>

- `brew install --cask alfred` - This a replacement for spotlight. You can customize and make [Alfred](https://www.alfredapp.com/) do a lot of things. Take a look at their site and you'll be blown away. <br/><br/>

- Now you are going to need a friendly shell to help you in development. Install **fish**. It stands for *friendly interactive shell*. To install this, run `brew install fish` <br/><br/>

- Now change your default shell to **fish**. To do this, add the line  `/usr/local/bin/fish`  to  `/etc/shells` <br/><br/>
    
-   Change your default shell with  `chsh  -s  /usr/local/bin/fish` <br/><br/>

- Fish ships with the **fish_config** command, which launches a graphical user interface (GUI) where you can choose different colors and prompt configurations <br/><br/>

![UI after running fish_config command](https://opensource.com/sites/default/files/uploads/fish-colors.png)

- Now you'll need a editor to code. Download VS Code from [here](https://code.visualstudio.com/) <br/><br/>

- Open VS Code and enable code prompt by pressing Command + Shift + P or F1 then type `Shell` in command palette now you are able to find this option like `Shell Command : Install code in PATH` from suggested list in command palette. Select that option. This will enable you to open VS Code directly from terminal <br/><br/>

![VS Code](https://i.stack.imgur.com/Ng886.png)

- Next you need a good font. Install font **Fira Code**. You'll find instructions [here](https://github.com/tonsky/FiraCode). This font contains a set of ligatures for common programming multi-character combinations. In simple words, multi-character symbols look more legible <br/><br/>

- After you install this font, update it in VS Code and in Iterm2 to make everything look prettier <br/><br/>

- VS Code extensions: Install these to make your life easier. [**GitLens**](https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens), **[JavaScript Code Snippets](https://marketplace.visualstudio.com/items?itemName=xabikos.JavaScriptSnippets)**,  **[Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)** , [**Peacock**](https://marketplace.visualstudio.com/items?itemName=johnpapa.vscode-peacock), [**TODO Highlight**](https://marketplace.visualstudio.com/items?itemName=wayou.vscode-todo-highlight), **[VS Code Icons](https://marketplace.visualstudio.com/items?itemName=vscode-icons-team.vscode-icons)**.  There are more but you might get overwhelmed. Start with these and eventually fellow developers will suggest you more extensions <br/><br/>

- Basic setup is done. Now you check if you have [Chrome](https://www.google.com/intl/en_in/chrome/) / [Firefox](https://www.mozilla.org/en-US/firefox/new/) installed. What's the point of web development when there's no browser? 😝 <br/><br/>

- Now run `brew install node` to install node.js <br/><br/>

Phew! that was a long list. Now, install your favourite framework and start developing 👾👾👾