How do I setup VSCode and Workflow as FullStack Web Developer Laravel

March 6, 2022

How do I setup VSCode and Workflow as FullStack Web Developer Laravel

Disclaimer. All of these is based on what I prefer. and I am using OSX as my main machine.

Table of Contents

Download the essentials apps

  1. iTerm2
  2. VSCode or PHPStorm
  3. Spotify & Netflix :-D

Setup iTerm2

As Engineer we will facing terminal daily, so it would be nice if we give some cosmetic into it. Lets do it:

Here is My Most Used Shortcut:

function current_branch() {
  ref=$(git symbolic-ref HEAD 2> /dev/null) || return
  echo ${ref#refs/heads/}

function current_repository() {

  ref=$(git symbolic-ref HEAD 2> /dev/null) || return
  echo $(git remote -v | cut -d':' -f 2)

# The Essentials
alias gi="git init ."
alias gs='git status'
alias gss='git status -s'
alias ga="git add ."
alias gcb='git checkout'
alias gc="git commit -v"
alias gca="git commit -v -a -m 'WIP'"
alias ggpull="git pull origin $(current_branch)"
alias gf="git fetch origin"
alias ggpush="git push origin $(current_branch)"

# The Info
alias gb='git branch'
alias gba='git branch -a'
alias glg='git log --stat --max-count=7'
alias glgg='git log --graph --max-count=7'

# helpful for track team performance
alias gstats='git shortlog -sn'

Setup VSCode


We both agree that beautiful is relative, so pick whatever you like. (me personally Regular Monokai or One Dark Pro for Dark, and Github Theme for Light one).

There are ton of beautiful options:

  • One Dark Pro
  • Dracula
  • Tokyo Night
  • Github Theme
  • Material Theme
  • etc...


You can thinking as chrome-extension, something like tools or helpers.

General Extensions

PHP Developer Extensions

VSCode Shortcut or Keybindings

    * Emmet for HTML
        "key": "cmd+m cmd+w",
        "command": "editor.emmet.action.wrapWithAbbreviation"
        "key": "cmd+m cmd+i",
        "command": "editor.emmet.action.balanceIn"
        "key": "cmd+m cmd+o",
        "command": "editor.emmet.action.balanceOut"
        "key": "cmd+m cmd+r",
        "command": "editor.emmet.action.updateTag"
        "key": "cmd+m cmd+m",
        "command": "editor.emmet.action.matchTag"
Antoni Putra Contact Me
Antoni Putra Photo

If you’re looking to get in contact with me for business inquiries or if you have a question, feel free to contact me below. I’ll try to respond as soon as I can.