PHP Development အတွက် VSCode

ကျွန်တော့်ကိုယ်ပိုင် VSCode customization နှင့် PHP Development အတွက်အသုံးဝင်တဲ့ VSCode Extension တွေကိုဖော်ပြပေးထားပါတယ်။

Posted by Set Kyar Wa Lar (universe) on 4 months ago

အခုကျွန်တော့်လက်ရှိ default code editor က VSCode။ အရင်က sublime သုံးတာတော်တော်လေးအဆင်ပြေပြီး နောက်ပိုင်း vscode ပြောင်းသုံးကြည့်တာ terminal တို့ git တို့ပါ default ပါလာတာနှင့် VSCode ကိုဘဲပြောင်းသုံးဖြစ်တော့တယ်။ တစ်ခါတစ်ခါတော့ Sublime ကိုပြောင်းသုံးဖြစ်သေးတယ်... ပိုမြန်တယ်လို့ခံစားရလို့။ ကျွန်တော်ဒီနေ့ ရေးမယ့်အကြောင်းအရာကတော့ PHP Development အတွက် VSCode ဆိုတဲ့အတိုင်းဘဲ VSCode ကို PHP Development အတွက်သုံးတဲ့အခါမှာဘာတွေ install လုပ်လဲ ဘာတွေ configure လုပ်လဲဆိုတာကျွန်တော့်အတွေ့အကြုံပေါ်မူတည်ပြီးရေးသွားမှာဘဲဖြစ်ပါတယ်။

ဟိုတစ်လောတုန်းကမှ https://laravel-livewire.com creator ကနေပြီးတော့ https://learn-vscode.com ဆိုတဲ့ website ကို lunch လုပ်လို့ subscribe လုပ်ပြီးတော့သူသုံးတဲ့အတိုင်း minimun ဖြစ်အောင်ဆိုပြီး configure လုပ်ကြည့်တာအတော်လေးအဆင်ပြေတယ်။ minium ကြိုက်တဲ့သူတွေဆို subscribe လုပ်ပြီးတော့လိုက်စမ်းကြည့်သင့်ပါတယ်လို့အကြံပြုလိုပါတယ်။

Extension တွေထဲမှာဆို PHP IntelliSense သွင်းတယ်။ Go to Definition တို့ကမစ... Hover လုပ်လိုက်တာနှင့် class ကို overview ပြပေးတာတွေပါပါတယ်... PHP IntelliSense နှစ်ခုသုံးခုရှိတဲ့ထဲကမှဒီကောင်ကိုပိုသဘောကျတယ်။

နောက်ထပ်မရှိမဖြစ် extension တစ်ခုကတော့ PHP Namespace Resolver ပါ။ ဒီကောင်သုံးပြီးတော့ Namespace တွေကို import လုပ်လို့ရတယ်။ Namespace ကို Sort by name လား sort by length လားဆိုတာကိုလည်း configure လုပ်ထားလို့ရတယ် (ကျွန်တော်ကတော့ length နှင့် sort လုပ်တာကိုပိုကြိုက်မိတယ်)။

PHP DocBlocker ကတော့ doc block ထည့်တဲ့သူတွေအတွက်ဆိုတော်တော်အဆင်ပြေလိမ့်မယ်။ အခုနောက်ပိုင်း PHP Version တွေမှာတော့ typehint လုပ်ပြီးတော့သိပ်ပြီး doc block မရေးကြတော့ဘူး။ ကျွန်တော်တော့အခုလက်ရှိ DocBlock ထည့်တုန်း။

Better PHPUnit - ဒီကောင်က test method တစ်ခုချင်းဆီပေါ်မှာ command + k, command + r လုပ်ရင် test run တယ်။ Test ရေးရင်း terminal ဖွင့်ပြီး test run ကတာထက် ဒီကောင်ကတော်တော်လေးကိုအဆင်ပြေတယ်။

Vim ကတော့ editor စဖွင့်ကတည်းက vim mode ဝင်လာတယ်။ Heavy Vim user မဟုတ်ပေမယ့် vim basic တွေတော့သုံးဖြစ်တော့ဒီကောင်ကတော်တော်လေးအဆင်ပြေပါတယ်။ Easy Vim ဆိုတဲ့ကောင်သုံးဖူးတယ်။ ဒီကောင်လောက်အဆင်မပြေဘူး။

Auto Close Tag ကတော့ အမည်အတိုင်းဘဲ auto close tag လုပ်ပေးတယ်။ Frontend ရေးတဲ့သူတွေအတွက်ပိုလိုမယ်ထင်တယ်။ ကျွန်တော့်အတွက်ကတော့ ဒီကောင်လေးကတော်တော်လေးအသုံးဝင်တယ်။

Bracket Pair Colorizer သူလည်းအမည်အတိုင်းဘဲ bracket တွေကို colorize လုပ်ပြီးတွဲပေးတာ။ Debug လုပ်ရတာပိုလွယ်တယ်... ဒီကောင်လည်း Frontend သမားတွေအတွက်ဆိုပိုအသုံးဝင်မထင်ထင်တယ်။

Theme ကိုတော့ Night Owl သုံးတယ်။ Night နှင့် Day နှစ်မျိုးလုံး mix လုပ်ပြီးသုံးတယ်။ အခုလောလောဆယ်တော့ Night... စာရေးရင်း Day ပြောင်းသုံးဖို့စဥ်းစားနေတယ်။

အခုအောက်ဖော်ပြပါ snippets ကတော့ကျွန်တော့် VSCode Setting ဘဲဖြစ်ပါတယ်။ ကျွန်တော်အစပိုင်းမှာပြောခဲ့သလိုဘဲ... UI ပိုင်းမှာတော်တော်များများက https://learn-vscode.com ကနေယူထားတာပါ...

{
  "editor.fontSize": 18,
  "editor.fontLigatures": true,
  "editor.minimap.enabled": false,
  "editor.renderLineHighlight": "none",
  "editor.fontFamily": "JetBrains Mono",
  "editor.accessibilitySupport": "off",
  "editor.quickSuggestions": {
    "comments": true
  },
  "editor.gotoLocation.multipleReferences": "goto",
  "editor.gotoLocation.multipleDefinitions": "goto",
  "editor.gotoLocation.multipleDeclarations": "goto",
  "editor.gotoLocation.multipleImplementations": "goto",
  "editor.gotoLocation.multipleTypeDefinitions": "goto",
  "editor.hideCursorInOverviewRuler": true,

  /**
  * Workbench
  **/
  "workbench.editor.showTabs": false,
  "workbench.statusBar.visible": false,
  "workbench.activityBar.visible": false,
  "workbench.sideBar.location": "right",
  "workbench.colorTheme": "Night Owl (No Italics)",

  /**
  * Terminal
  **/
  "terminal.integrated.rendererType": "dom",
  "terminal.integrated.fontFamily": "JetBrains Mono",

  /**
  * Others
  **/
  "window.zoomLevel": 0,
  "files.exclude": {
    "vendor": false,
    ".github": true,
    ".ebextensions": true,
    ".phpintel": true,
    "resources": false,
    "public": false,
  },
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[jsonc]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },

  /**
  * Extensions
  **/
  "bracketPairColorizer.forceIterationColorCycle": true,
  "gitlens.menus": {
    "editorGroup": {
      "blame": false,
      "compare": false
    },
  },
  "php.suggest.basic": true,
  "git.suggestSmartCommit": true,
  "diffEditor.ignoreTrimWhitespace": false,
  "editor.tabSize": 4,
  "editor.formatOnPaste": true,
  "editor.multiCursorModifier": "ctrlCmd",
  "editor.snippetSuggestions": "top",
  "editor.renderWhitespace": "none",
  "editor.lineNumbers": "off",
  "editor.folding": false,
  "files.trimTrailingWhitespace": true,
  "files.trimFinalNewlines": true,
  "search.exclude": {
    "**/node_modules": true,
    "**/bower_components": true,
    // Hide everything in /public, except "index.php"
    "**/public/[abcdefghjklmnopqrstuvwxyz]*": true,
    "**/public/i[abcdefghijklmopqrstuvwxyz]*": true,
    // Hide everything in /vendor, except "laravel" folder.
    "**/vendor/[abcdefghijkmnopqrstuvwxyz]*": true,
    "**/vendor/l[bcdefghijklmnopqrstuvwxyz]*": true,
    "storage": true
  },
  "breadcrumbs.enabled": false,

  "zenMode.fullScreen": false,
  "zenMode.centerLayout": false,

  "explorer.openEditors.visible": 0,
  "workbench.editor.labelFormat": "short",
}

အောက်ဖော်ပြပါကတော့ ကျွန်တော့် vscode custom keybinding ဘဲဖြစ်ပါတယ်...

[
  /**
  * Activity Bar
  **/
  {
    "key": "cmd+k cmd+e",
    "command": "workbench.view.explorer"
  },
  {
    "key": "cmd+k cmd+v",
    "command": "workbench.view.scm"
  },
  {
    "key": "cmd+k cmd+d",
    "command": "workbench.view.debug"
  },
  {
    "key": "cmd+k cmd+x",
    "command": "workbench.extensions.action.showInstalledExtensions"
  },

  /**
  * Git
  **/
  {
    "command": "git.commit",
    "when": "activeViewlet == 'workbench.view.scm'",
    "key": "cmd+enter"
  },

  /**
  * Split screen
  **/
  {
    "key": "cmd+k cmd+s",
    "command": "workbench.action.splitEditor"
  },

  /**
  * Terminal
  **/
  {
    "key": "cmd+t",
    "command": "workbench.action.terminal.toggleTerminal"
  },
  {
    "key": "cmd+t",
    "command": "workbench.action.terminal.focus",
    "when": "!terminalFocus"
  },

  /**
  * File Explorer
  **/
  {
    "key": "cmd+d",
    "command": "duplicate.execute",
    "when": "explorerViewletVisible && filesExplorerFocus && !explorerResourceIsRoot && !inputFocus"
  },
  {
    "key": "cmd+n",
    "command": "explorer.newFile",
    "when": "explorerViewletVisible && filesExplorerFocus && !inputFocus"
  },
  {
    "key": "shift+cmd+n",
    "command": "explorer.newFolder",
    "when": "explorerViewletVisible && filesExplorerFocus && !inputFocus"
  },
  {
    "key": "cmd+r",
    "command": "workbench.files.action.refreshFilesExplorer",
    "when": "explorerViewletVisible && filesExplorerFocus && !inputFocus"
  },
  {
    "key": "cmd+k cmd+k",
    "command": "workbench.action.toggleZenMode"
  }
]

Hey, I am Set Kyar Wa Lar. Software Engineer at Carro. Maintainer of Laravel Myanmar and creator of MyanmarDevJobs.