Setting Up a Modern Development Environment
How-To·8 min read

Setting Up a Modern Development Environment

VS CodeTerminalGitProductivity

Setting Up a Modern Development Environment

A comprehensive guide to configuring VS Code, terminal tools, and productivity workflows.

Introduction

Your development environment is your home. Make it comfortable. Make it efficient. Make it yours.

This guide covers setting up a modern development workflow that's both powerful and enjoyable to use.

Terminal Setup

Choose Your Shell

I recommend **zsh** with **oh-my-zsh** for maximum customization:

# Install oh-my-zsh
sh -c "$(curl -fsSL https://raw.githubusercontent.com/ohmyzsh/ohmyzsh/master/tools/install.sh)"

Essential Plugins

- `git` - Git aliases and helpers - `zsh-autosuggestions` - Command suggestions - `zsh-syntax-highlighting` - Syntax highlighting - `fzf` - Fuzzy finder

VS Code Configuration

Must-Have Extensions

1. **ESLint** - Code quality 2. **Prettier** - Code formatting 3. **GitLens** - Git superpowers 4. **Error Lens** - Inline errors 5. **Auto Rename Tag** - HTML/JSX tag editing

Settings Sync

Enable Settings Sync to keep your config across machines. It's built into VS Code now!

Git Configuration

Better diff output git config --global diff.algorithm histogram

Rebase by default on pull git config --global pull.rebase true ```

Productivity Tools

Task Running

Use `tasks.json` in VS Code for common operations:

- Build commands - Test runners - Development servers

Snippets

Create custom snippets for repetitive code. Time saved compounds quickly.

Conclusion

Your environment evolves with you. Start with these basics, then customize based on your workflow. The best setup is the one that gets out of your way and lets you focus on building.