TheSpider.dev Logo

Developer Productivity: Tools & Workflows That Actually Work

Om Gawande Om Gawande
December 5, 2024
6 min read
productivity tools vscode workflow development
index

After years of coding professionally and mentoring 200+ developers at Coding Ninjas, I’ve discovered that the right tools can make the difference between struggling with code and flowing with it.

Here’s my battle-tested toolkit that helps me turn caffeine into clean code efficiently.

Code Editor: VS Code Setup

Essential Extensions

These extensions are non-negotiable in my setup:

{
  "recommendations": [
    // Language Support
    "ms-vscode.vscode-typescript-next",
    "bradlc.vscode-tailwindcss",
    "ms-python.python",


    // Code Quality
    "esbenp.prettier-vscode",
    "ms-vscode.vscode-eslint",
    "streetsidesoftware.code-spell-checker",


    // Productivity
    "ms-vscode.vscode-thunder-client",
    "formulahendry.auto-rename-tag",
    "christian-kohler.path-intellisense",
    "ms-vscode.vscode-json",


    // Git Integration
    "eamodio.gitlens",
    "donjayamanne.githistory",


    // UI/UX
    "pkief.material-icon-theme",
    "zhuangtongfa.material-theme",
    "oderwat.indent-rainbow"
  ]
}

Custom Settings Configuration

My settings.json for optimal development:

{
  // Editor Configuration
  "editor.fontSize": 14,
  "editor.fontFamily": "Fira Code, Cascadia Code, Monaco, monospace",
  "editor.fontLigatures": true,
  "editor.lineHeight": 1.6,
  "editor.tabSize": 2,
  "editor.wordWrap": "on",
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true,
    "source.organizeImports": true
  },


  // File Explorer
  "explorer.confirmDelete": false,
  "explorer.confirmDragAndDrop": false,
  "files.autoSave": "afterDelay",
  "files.autoSaveDelay": 1000,


  // Terminal
  "terminal.integrated.fontSize": 13,
  "terminal.integrated.fontFamily": "Fira Code",


  // Language Specific
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

Custom Keybindings

Speed up common tasks:

[
  {
    "key": "ctrl+shift+r",
    "command": "workbench.action.reloadWindow"
  },
  {
    "key": "ctrl+shift+t",
    "command": "workbench.action.terminal.toggleTerminal"
  },
  {
    "key": "ctrl+shift+e",
    "command": "workbench.view.explorer"
  }
]

Command Line Power Tools

Git Workflow

My Git aliases that save hours:

~/.gitconfig
[alias]
  co = checkout
  br = branch
  ci = commit
  st = status
  unstage = reset HEAD --
  last = log -1 HEAD
  visual = !gitk


  # Advanced aliases
  lg = log --color --graph --pretty=format:'%Cred%h%Creset -%C(yellow)%d%Creset %s %Cgreen(%cr) %C(bold blue)<%an>%Creset' --abbrev-commit


  # Quick commit with message
  cm = commit -m


  # Push current branch
  pc = push origin HEAD


  # Pull with rebase
  pr = pull --rebase

Terminal Setup (Zsh + Oh My Zsh)

My .zshrc configuration:

Terminal window
# Oh My Zsh configuration
export ZSH="$HOME/.oh-my-zsh"
ZSH_THEME="powerlevel10k/powerlevel10k"


plugins=(
  git
  node
  npm
  yarn
  docker
  kubectl
  zsh-autosuggestions
  zsh-syntax-highlighting
)


# Custom aliases
alias ll='ls -alF'
alias la='ls -A'
alias l='ls -CF'
alias ..='cd ..'
alias ...='cd ../..'


# Development shortcuts
alias dev='npm run dev'
alias build='npm run build'
alias start='npm start'
alias test='npm test'


# Git shortcuts
alias gst='git status'
alias gco='git checkout'
alias gcm='git commit -m'
alias gps='git push'
alias gpl='git pull'


# Docker shortcuts
alias dps='docker ps'
alias di='docker images'
alias dc='docker-compose'

Browser Developer Tools

Chrome Extensions

Essential for web development:

  1. React Developer Tools - Debug React components
  2. Redux DevTools - State management debugging
  3. Lighthouse - Performance and SEO auditing
  4. Web Vitals - Core Web Vitals monitoring
  5. ColorZilla - Color picker and gradient generator

Browser Bookmarks

Quick access to development resources:

// Performance testing bookmarklet
javascript:(function(){
  console.log('Performance Timing:', performance.timing);
  console.log('Memory Usage:', navigator.memory);
})();


// Quick responsive design testing
javascript:(function(){
  var breakpoints = ['320px', '768px', '1024px', '1440px'];
  breakpoints.forEach(bp => {
    console.log(`Breakpoint ${bp}:`, window.matchMedia(`(min-width: ${bp})`).matches);
  });
})();

Development Environment

Docker Setup

My standard development environment:

Dockerfile.dev
FROM node:18-alpine


WORKDIR /app


# Install dependencies
COPY package*.json ./
RUN npm ci --only=development


# Copy source code
COPY . .


# Expose port
EXPOSE 3000


# Start development server
CMD ["npm", "run", "dev"]
docker-compose.yml
version: '3.8'
services:
  app:
    build:
      context: .
      dockerfile: Dockerfile.dev
    ports:
      - "3000:3000"
    volumes:
      - .:/app
      - /app/node_modules
    environment:
      - NODE_ENV=development


  db:
    image: postgres:14-alpine
    environment:
      POSTGRES_DB: devdb
      POSTGRES_USER: devuser
      POSTGRES_PASSWORD: devpass
    ports:
      - "5432:5432"
    volumes:
      - postgres_data:/var/lib/postgresql/data


volumes:
  postgres_data:

Package Management

NPM/Yarn Scripts

My standard package.json scripts:

{
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    "lint:fix": "next lint --fix",
    "type-check": "tsc --noEmit",
    "format": "prettier --write .",
    "format:check": "prettier --check .",
    "test": "jest",
    "test:watch": "jest --watch",
    "test:coverage": "jest --coverage",
    "analyze": "cross-env ANALYZE=true next build",
    "clean": "rm -rf .next out dist build",
    "postinstall": "husky install"
  }
}

Dependency Management

Tools I use for keeping dependencies updated:

Terminal window
# Check for outdated packages
npm outdated


# Update all dependencies
npx npm-check-updates -u


# Audit security vulnerabilities
npm audit
npm audit fix

Code Quality Tools

ESLint Configuration

My .eslintrc.js:

module.exports = {
  extends: [
    'next/core-web-vitals',
    '@typescript-eslint/recommended',
    'prettier'
  ],
  rules: {
    '@typescript-eslint/no-unused-vars': 'error',
    '@typescript-eslint/no-explicit-any': 'warn',
    'prefer-const': 'error',
    'no-var': 'error',
    'no-console': 'warn',
    'react/jsx-key': 'error',
    'react/no-unescaped-entities': 'off'
  },
  parserOptions: {
    ecmaVersion: 2022,
    sourceType: 'module'
  }
}

Prettier Configuration

My .prettierrc:

{
  "semi": false,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "es5",
  "printWidth": 80,
  "bracketSpacing": true,
  "arrowParens": "avoid",
  "endOfLine": "lf"
}

Husky + Lint-Staged

Pre-commit hooks for code quality:

package.json
{
  "lint-staged": {
    "*.{js,jsx,ts,tsx}": [
      "eslint --fix",
      "prettier --write"
    ],
    "*.{json,md,yml,yaml}": [
      "prettier --write"
    ]
  }
}
.husky/pre-commit
#!/bin/sh
. "$(dirname "$0")/_/husky.sh"


npx lint-staged
npm run type-check
npm run test

Time Management & Focus

Pomodoro Technique

I use a custom terminal-based Pomodoro timer:

Terminal window
# ~/.zshrc function
pomodoro() {
  echo "Starting 25-minute focus session..."
  sleep 1500 # 25 minutes
  osascript -e 'display notification "Time for a break!" with title "Pomodoro"'
}


break() {
  echo "Starting 5-minute break..."
  sleep 300 # 5 minutes
  osascript -e 'display notification "Back to work!" with title "Break Over"'
}

Task Management

I use a combination of:

  • GitHub Issues for project-specific tasks
  • Notion for documentation and long-term planning
  • Terminal-based todo for daily tasks
Terminal window
# Simple todo in terminal
alias todo='vim ~/Documents/todo.md'
alias todols='cat ~/Documents/todo.md'

API Development & Testing

Thunder Client (VS Code)

My go-to for API testing within VS Code. Collections I maintain:

{
  "name": "Local Development",
  "requests": [
    {
      "name": "Auth - Login",
      "method": "POST",
      "url": "http://localhost:3000/api/auth/login",
      "body": {
        "email": "test@example.com",
        "password": "password123"
      }
    }
  ]
}

Postman Alternative: HTTPie

For quick command-line API testing:

Terminal window
# GET request with auth
http GET localhost:3000/api/projects Authorization:"Bearer $TOKEN"


# POST request with JSON
echo '{"title": "New Project", "description": "Test project"}' | \
http POST localhost:3000/api/projects Authorization:"Bearer $TOKEN"

Monitoring & Analytics

Performance Monitoring

Custom performance tracking script:

lib/performance.js
export const trackPerformance = () => {
  if (typeof window !== 'undefined') {
    window.addEventListener('load', () => {
      setTimeout(() => {
        const perfData = performance.getEntriesByType('navigation')[0]
        console.log('Page Load Time:', perfData.loadEventEnd - perfData.loadEventStart)
        console.log('DOM Content Loaded:', perfData.domContentLoadedEventEnd - perfData.domContentLoadedEventStart)
      }, 0)
    })
  }
}

Productivity Metrics

Coding Time Tracking

I track my coding hours using a simple script:

Terminal window
# ~/.zshrc function
coding_start() {
  echo $(date) > ~/.coding_session_start
  echo "Coding session started at $(date)"
}


coding_end() {
  if [ -f ~/.coding_session_start ]; then
    start_time=$(cat ~/.coding_session_start)
    end_time=$(date)
    echo "Session: $start_time to $end_time" >> ~/.coding_log
    rm ~/.coding_session_start
    echo "Coding session logged!"
  fi
}


coding_stats() {
  if [ -f ~/.coding_log ]; then
    echo "Recent coding sessions:"
    tail -10 ~/.coding_log
  fi
}

The Results

Using this toolkit, I’ve achieved:

  • Reduced debugging time by 40% with better tooling
  • Increased code quality with automated linting and formatting
  • Faster development cycles with optimized workflows
  • Better collaboration with team through consistent practices

Key Takeaways

  1. Automate repetitive tasks - If you do it more than twice, script it
  2. Invest in good tooling - The right tools pay for themselves quickly
  3. Stay consistent - Use the same setup across projects
  4. Keep learning - Tools evolve, stay updated with new productivity enhancers
  5. Share knowledge - Document your setup for team consistency

Remember: A developer is only as good as their tools, and great tools enable great code. 🕷️

Want to see these tools in action? Check out my live development streams or reach out on Twitter @theSpiderDev for specific questions!

Looking for more developer resources? Visit my template collection at templates.thespider.dev to see productivity-focused development setups.