How I Organize My Development Environment for Maximum Productivity

// My essential VS Code extensions
{
  "recommendations": [
    // Vue/Nuxt development
    "Vue.volar",                    // Vue language support
    "Vue.vscode-typescript-vue-plugin",
    
    // Code quality
    "dbaeumer.vscode-eslint",       // Linting
    "esbenp.prettier-vscode",       // Formatting
    "streetsidesoftware.code-spell-checker",
    
    // Productivity
    "usernamehw.errorlens",         // Inline errors
    "eamodio.gitlens",             // Git superpowers
    "christian-kohler.path-intellisense",
    "formulahendry.auto-rename-tag",
    
    // UI/UX
    "PKief.material-icon-theme",    // File icons
    "GitHub.github-vscode-theme",   // Theme
    "oderwat.indent-rainbow",       // Indent visualization
    
    // Utilities
    "wayou.vscode-todo-highlight",  // Highlight TODOs
    "naumovs.color-highlight",      // Color preview
    "ms-vscode.live-server"         // Live preview
  ]
}

// settings.json
{
  // Editor behavior
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "editor.tabSize": 2,
  "editor.linkedEditing": true,
  "editor.bracketPairColorization.enabled": true,
  "editor.guides.bracketPairs": true,
  
  // File handling
  "files.autoSave": "onFocusChange",
  "files.trimTrailingWhitespace": true,
  "files.insertFinalNewline": true,
  
  // Terminal
  "terminal.integrated.fontSize": 14,
  "terminal.integrated.fontFamily": "MesloLGS NF",
  
  // Git
  "git.autofetch": true,
  "git.confirmSync": false,
  "git.enableSmartCommit": true,
  
  // Language-specific
  "[vue]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

// keybindings.json
[
  {
    "key": "ctrl+shift+d",
    "command": "editor.action.copyLinesDownAction"
  },
  {
    "key": "ctrl+d",
    "command": "editor.action.deleteLines"
  },
  {
    "key": "ctrl+shift+k",
    "command": "workbench.action.terminal.kill"
  },
  {
    "key": "ctrl+shift+`",
    "command": "workbench.action.terminal.new"
  }
]

~/Development/
├── personal/           # Personal projects
│   ├── portfolio/
│   ├── blog/
│   └── experiments/
├── work/              # Work-related projects
│   ├── client-a/
│   └── client-b/
├── learning/          # Tutorials and courses
│   ├── vue-mastery/
│   └── typescript-101/
└── templates/         # Project starters
    ├── nuxt-starter/
    └── vue-component-library/

my-nuxt-app/
├── .vscode/                 # VS Code settings
│   ├── settings.json
│   └── extensions.json
├── app/
│   ├── components/
│   │   ├── common/         # Reusable components
│   │   ├── features/       # Feature-specific components
│   │   └── layouts/        # Layout components
│   ├── composables/        # Composition functions
│   ├── utils/              # Helper functions
│   └── types/              # TypeScript types
├── content/                # Content files
├── public/                 # Static assets
├── server/                 # Backend code
├── tests/                  # Test files
│   ├── unit/
│   └── e2e/
├── .env.example           # Environment template
├── .gitignore
├── docker-compose.yml
├── nuxt.config.ts
├── package.json
├── README.md
└── tsconfig.json

# ~/.zshrc
# Theme
ZSH_THEME="powerlevel10k/powerlevel10k"

# Plugins that boost productivity
plugins=(
  git
  node
  npm
  docker
  docker-compose
  vscode
  colored-man-pages
  zsh-autosuggestions
  zsh-syntax-highlighting
)

# Aliases that save time
alias gs='git status'
alias ga='git add'
alias gc='git commit -m'
alias gp='git push'
alias gl='git pull'
alias gco='git checkout'
alias gcb='git checkout -b'
alias gd='git diff'
alias gb='git branch'

# Project shortcuts
alias dev='cd ~/Development'
alias personal='cd ~/Development/personal'
alias work='cd ~/Development/work'

# Common commands
alias c='clear'
alias nrd='npm run dev'
alias nrb='npm run build'
alias prd='pnpm run dev'
alias prb='pnpm run build'

# Docker shortcuts
alias dcu='docker-compose up'
alias dcd='docker-compose down'
alias dcr='docker-compose restart'

# VS Code
alias code.='code .'

# List with colors
alias ls='ls --color=auto'
alias ll='ls -alh'

# Quick navigation
alias ..='cd ..'
alias ...='cd ../..'
alias ....='cd ../../..'

# Create and enter directory
mkcd() {
  mkdir -p "$1" && cd "$1"
}

# Create new project from template
newproject() {
  local template=$1
  local name=$2
  cp -r ~/Development/templates/$template ~/Development/personal/$name
  cd ~/Development/personal/$name
  code .
}

# Git commit with conventional commit format
gccm() {
  local type=$1
  shift
  local message="$@"
  git commit -m "$type: $message"
}

# Quick server
serve() {
  python3 -m http.server ${1:-8000}
}

## Tab Organization Rules
1. Max 10 tabs per window
2. One window per project
3. Pin frequently used tabs (localhost, docs)
4. Close tabs at end of day
5. Save sessions for active projects

✅ Good:
UserProfile.vue
LoginForm.vue
NavigationBar.vue
ProductCard.vue

❌ Bad:
userprofile.vue
login_form.vue
Nav-Bar.vue
product-card-component.vue

✅ Good:
formatDate.ts
validateEmail.ts
fetchUserData.ts

❌ Bad:
utils.ts
helpers.ts
functions.ts

// PascalCase for components
// camelCase for utilities, functions, variables
// kebab-case for file paths in URLs
// SCREAMING_SNAKE_CASE for constants

// Components
export default defineComponent({
  name: 'UserProfile'
});

// Functions
function calculateTotal(items: Item[]): number {}

// Constants
const MAX_RETRY_ATTEMPTS = 3;
const API_BASE_URL = 'https://api.example.com';

// package.json
{
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged",
      "commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
    }
  },
  "lint-staged": {
    "*.{js,ts,vue}": [
      "eslint --fix",
      "prettier --write"
    ],
    "*.{css,scss}": [
      "prettier --write"
    ]
  }
}

# ~/.gitmessage
# <type>: <subject>
#
# <body>
#
# <footer>

# Types:
# feat:     New feature
# fix:      Bug fix
# docs:     Documentation only changes
# style:    Code style changes (formatting, etc)
# refactor: Code refactoring
# test:     Adding or updating tests
# chore:    Maintenance tasks

git config --global commit.template ~/.gitmessage

# Project Name

Brief description of what this project does.

## 🚀 Quick Start

\`\`\`bash
# Clone the repository
git clone https://github.com/username/project.git

# Install dependencies
npm install

# Start development server
npm run dev
\`\`\`

## 📁 Project Structure

\`\`\`
src/
├── components/    # Reusable components
├── pages/        # Page components
└── utils/        # Utility functions
\`\`\`

## 🛠️ Tech Stack

- **Framework:** Nuxt 3
- **Language:** TypeScript
- **Styling:** Tailwind CSS
- **State:** Pinia

## 📝 Available Scripts

- \`npm run dev\` - Start development server
- \`npm run build\` - Build for production
- \`npm run test\` - Run tests

## 🤝 Contributing

1. Fork the repository
2. Create your feature branch
3. Commit your changes
4. Push to the branch
5. Open a Pull Request

## 📄 License

MIT

/**
 * Fetches user data from the API
 * @param userId - The unique identifier for the user
 * @returns Promise containing user data
 * @throws {Error} If user is not found or network request fails
 * @example
 * ```ts
 * const user = await fetchUser('123');
 * console.log(user.name);
 * ```
 */
async function fetchUser(userId: string): Promise<User> {
  // Implementation
}

// TODO: Implement error handling
// FIXME: This breaks when user is null
// HACK: Temporary solution until API is fixed
// NOTE: This logic matches the mobile app
// OPTIMIZE: Consider caching this result

// With VS Code extension, these are highlighted!

<!-- TODO.md -->
# TODO

## High Priority
- [ ] Fix authentication bug
- [ ] Add error boundaries
- [ ] Write tests for API layer

## Medium Priority
- [ ] Refactor user service
- [ ] Update documentation
- [ ] Optimize image loading

## Low Priority
- [ ] Add dark mode
- [ ] Improve accessibility
- [ ] Add animations

## Done ✅
- [x] Set up CI/CD
- [x] Configure ESLint

# .env.example (committed to repo)
# Database
DATABASE_URL=postgresql://localhost:5432/myapp

# API Keys (get from dashboard)
API_KEY=your_api_key_here
SECRET_KEY=your_secret_key_here

# App Config
NODE_ENV=development
PORT=3000

# .env (not committed, in .gitignore)
DATABASE_URL=postgresql://localhost:5432/myapp_dev
API_KEY=actual_api_key_123abc
SECRET_KEY=actual_secret_xyz789
NODE_ENV=development
PORT=3000

// ~/env.ts
export const env = {
  API_KEY: process.env.API_KEY!,
  DATABASE_URL: process.env.DATABASE_URL!,
  NODE_ENV: process.env.NODE_ENV as 'development' | 'production',
} as const;

// Validate at startup
Object.entries(env).forEach(([key, value]) => {
  if (!value) {
    throw new Error(`Missing environment variable: ${key}`);
  }
});

# Daily automated backups
~/Development/personal     # Personal projects
~/Development/work         # Work projects
~/.zshrc                   # Shell config
~/.gitconfig               # Git config
~/.ssh                     # SSH keys (encrypted)

# Weekly backups
~/Documents
~/Desktop

# 1. Start the day fresh
cd ~/Development/work/current-project
git switch main
git pull

# 2. Check what's new
git log --since="yesterday" --oneline

# 3. Start dev environment
docker-compose up -d
npm run dev

# 4. Open VS Code
code .

# 1. Commit work
git add .
git commit -m "wip: feature progress"

# 2. Push to remote (safety net)
git push

# 3. Close dev environment
docker-compose down

# 4. Close all terminals and tabs