Setting up your development environment correctly is crucial for productivity and efficiency in web development. This comprehensive guide will walk you through setting up your MacBook with all the essential tools and configurations needed for modern web development. Whether you’re a beginner or an experienced developer, these recommendations will help you create a robust development environment.

macbook

List of essentials tools

iTerm2

I highly recommend to install iterm2 which is an alternative to Mac’s default terminal.

Few settings which I find very useful

a) New Session from previous let off: iTerm Preferences → Profiles → select your profile → General tab → Working Directory section → Reuse previous session’s directory option

b) Increase window size: iTerm Preferences → Profiles → select your profile → Window tab → Settings for New Windows → Increase values of Columns (140) and Rows (40)

c) Increase scrollback limit: iTerm Preferences → Profiles → select your profile → Terminal tab → Scrollback lines → Increase the value to say 2000

d) Open files in VS Code: iTerm Preferences → Profiles → select your profile → Advanced → Semantic History → Open with editor → VS Code

Git

Essential Git configuration:

1
2
3

git config --global user.name "Your Name"
git config --global user.email "your.email@example.com"
git config --global init.defaultBranch main

nvm & Nodejs

Use the following cURL or Wget command:

1

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.3/install.sh | bash

After installation, install the latest LTS version:

1
2

nvm install --lts
nvm use --lts

I have written a detailed blog ‘Use NVM and .nvmrc for a better Javascript development’

zsh & oh-my-zsh

As of MacOS 10.15, zsh is the default over bash

Recommended plugins:

  • zsh-autosuggestions
  • zsh-syntax-highlighting
  • git
  • docker
  • node
  • npm

VS Code

Google Chrome, Arc Browserr & Firefox

  • Google Chrome is the defacto browser now for development. React Devtools is a very useful add-on
  • Firefox defacto number two browser
  • Arc Browser is a browser that is fast, secure, and private. It is a good alternative to Google Chrome.

A Soft Murmur

Conclusion

You are all set up with your development setup. Enjoy the programming journey !

✨ Thank you for reading! If you found this guide helpful, please share it with others. Your feedback and suggestions are always welcome in the comments section.