Kaesa Laravel Extension Pack

Berupa catatan history ekstension apa saja yang saya gunakan untuk project laravel. Anda bisa diskusi tentang ekstension yang sering Anda gunakan dalam project pada Github Discussion: https://github.com/lyrihkaesa/vscode-laravel-extension-pack/discussions .

Legen:

• ✅ Sudah ada di Ekstension Pack
• ⚠ Belum ada di Ekstension Pack (Install Terpisah)

Ekstensi Wajib Laravel Developer

• ✅ Laravel Official VS Code Extension
  Ini ekstensi official buatan core tim laravel. Jadi pakai untuk menggantikan peran extension ini:

  • ~~❌ Laravel goto view~~ ✅ Tergantikan Laravel Official VS Code Extension
  • ~~❌ laravel-jump-controller~~ ✅ Tergantikan Laravel Official VS Code Extension
  • ~~❌ Laravel Create View~~ ✅ Tergantikan Laravel Official VS Code Extension
  • ~~❌ Laravel-goto-components~~ ✅ Tergantikan Laravel Official VS Code Extension
  • ⚠ Laravel Extra Intellisense
    Belum tahu betul kegunaan ekstensi ini jadi saya disabled.
  • ⚠ Laravel Snippets
    Belum tahu betul kegunaan ekstensi ini jadi saya disabled.
  • ✅ Laravel Blade Snippets
    Ternyata tanpa ini tidak muncul Emmet html di blade template jadi masih butuh ini.
  • ✅ Laravel Blade formatter
    Dibutuhkan untuk format file .blade.php karena kalau pakai Laravel Blade Snippets hasilnya kurang bagus. Sebenarnya saya ingin mencoba Laravel Pint tepi belum paham, nanti akan di perbarui jika sudah paham.

• ✅ Laravel Blade Spacer
  

• ✅ Laravel Blade Wrapper
  Digunakan untuk wrap tag html dengan blade directive. Command CTRL + SHIFT + T. Bisa di disable jika jarang digunakan.

• ✅ DevDb

  • Ekstensi Database Client yang digunakan untuk mengelola data pada database.
  • Database yang disupport itu MySQL, SQLite, PostgreSQL
  • ❌ Pada PostgreSQL tidak bisa edit/delete data-nya. Sementara saya pakai Aplkasi Database Client yaitu DBeaver.
  • ✅ Pada MySQL bisa untuk edit/delete data-nya.
  • Ini digunakan untuk menggantikan peranan dari Database Client seperti PhpMyAdmin, HeidiSQL, dsb.

• ✅ PHP Namespace Resolver
  Saya gunakan untuk import dan expand php namespace. Alias auto import file/package PHP Class.
  

• ✅ Composer

  • Terdapat command CTRL + SHIFT + P lalu ketik Composer
  • Dapat melihat versi yang sedang dipakai serta ada sugestion CTRL + SPACE.
    Dan mungkin masih banyak lagi silahkan cek penjelasannya di README extensions tersebut.

• ✅ Tailwind CSS IntelliSense
  Yeah, karena laravel sekarang default skeleton-nya atau Starter Kit-nya menggunakan Tailwind CSS jadi ini saya butuhkan.

• ✅ PHP Intelephense
  Karena laravel menggunakan PHP, jadi ini dibutuhkan.

• ✅ PHP IntelliSense

• ✅ PHP Debug
  Butuh eksplore lebih lanjut, saya belum paham.
  Saya kurang tahu cara menggunakan ini, mungkin untuk meminimalisir debuging dengan dd(), dump().

• ✅ EditorConfig for VS Code
  Digunakan untuk kolaborasi supaya style kode-nya sama antar programmer.

• ✅ Better Pest
  Karena saya testing project laravel menggunakan package PEST, jadi mungkin saya butuh ini.

• ✅ Laravel Pint
  Karena saya menggunakan Laravel Pint maka saya perlu ekstensi ini sebagai default format file php dalam project laravel saya. Anda bisa disable ini jika anda menggunakan formatter lain.

Ekstensi Wajib untuk HTML, CSS, Javascript

• ✅ Auto Close Tag
• ✅ Auto Rename Tag
  Supaya bisa rename (ganti nama) tag html. Jadi saat rename tag pembuka, tag penutupnya juga auto ke-rename.
• ✅ HTML CSS Support
  CSS Intellisense for HTML
• ✅ IntelliSense for CSS class names in HTML
  CSS Intellisense for HTML
• ✅ Multiple cursor case preserve
  Ini saya gunakan supaya case huruf kapital dan kecil tidak berubah saat edting dengan multiple cursor CTRL + D atau ALT + RIGHT MOUSE CLICK.
• ✅ Node.js Modules Intellisense
  Ini digunakan untuk import module nodejs.
• ✅ ESLint
  Linter untuk javascript.
• ✅ JavaScript (ES6 code snippets)
• Opsional: JavaScript and TypeScript Nightly
  Pasang jika project menggunakan TypeScript.

Ekstensi Opsional Laravel

• Opsional: Inline fold
  Biasanya saya gunakan untuk menyebunyikan class TailwindCSS supaya mudah dibaca tag htmlnya.
• Opsional: Pest Snippets
  Dapat dilihat ini snippets untuk testing laravel dengan Pest.
• Opsional: IntelliPHP - AI Autocomplete for PHP
• Opsional: PHP
• Opsional: PHP Profiler
• Opsional Laravel Artisan
  Cara pakai CTRL + SHIFT + P lalu ketik Artisan. Jadi tidak perlu ketik php artisan lewat terminal. Ini jarang saya pakai karena saya lebih suka ngetik di terminal/bash.

Laravel Livewire Stater Kit

• ✅ Alpine.js IntelliSense by P. C. Bowers
  Ekstensi ini berfungsi sebagai:

  • IntelliSense
  • Snipptes
  • Syntax Highlight

  Extension ini gabungan antara dua ekstensi:

  • adrianwilczynski/Alpine.js IntelliSense
  • Alpine.js Sytax Highlight

  Saya sudah uji coba, bagusnya punya P. C. Bowers karena snippets-nya banyak.

• ✅ Livewire Language Support
  Jika anda menggunakan livewire wajib install ekstensi ini.

Laravel Vue Stater Kit

• Vue
  Syntax Highlight untuk Vue
• Vue - Official
• Vue 3 Snippets

Laravel React Stater Kit

• ES7+ React/Redux/React-Native snippets

Opsional Ekstensi lainnya

Dibawah ini ekstensi yang saya pakai.

• P1: Sering saya gunakan.
• P2: Kadang-kadang saya gunakan.
• P3: Jarang saya gunakan.
• P4: DEPRECATED alias sudah tidak direkomendasikan digunakan.

Daftar Ekstensi:

• P1: GitHub Theme
  Supaya terbiasa dengan tampilan github saja, saat debug langsung lewat github.

• P1: Material Icon Theme Saya suka icon-nya.

  • ~~P4: VSCode Gread Icons~~
    Uninstalled, karena saya sudah tidak pakai ini lagi.
  • ~~vscode-icons~~
    Uninstalled, karena saya sudah tidak pakai ini lagi.

• P1: Postman
  Buat testing API yang saya buat tanpa harus buka aplikasi postman.

  • P4: REST Client
    Alternatif dari Postman.

• P1: Markdown Shortcuts
  Yeah biar bisa pakai shortcut keyboard saat menulis file markdown, misal CTRL + B untuk bold/tebal, dbs.

• P1: GitHub Markdown Preview
  Karna saya sering membaca markdown lewat github setidaknya saya ingin tampilan preview di VSCode sama dengan di Github.

  • Markdown Preview Github Styling
  • Markdown Checkboxes
  • Markdown Emoji
  • Markdown Footnotes
  • Markdown yaml Preamble
  • Markdown Preview Mermaid Support

• P1: Prettier - Code formatter
  Format kode supaya konsisten, tapi sepertinya sudah ada EditorConfig, saya kurang paham dah.

• P1: Codeium
  Mirip dengan Github Copilot.

• P1: Docker

• P1: GitHub Action

• P1: GitHub Pull Requests

• P1: Live Share
  Ekstensi yang saya gunakan untuk ngoding bareng temen (peer programming). Untuk mempermudah dalam mengubah kode tanpa harus memberikan perintah suara ke temen saat share screen. Jadi saya langsung saja ngetik kodingannya langsung tanpa harus minta temen untuk ubah kodenya, saya sendiri yang ubah kodenya tapi source codenya ada di temen.

  • P4: Live Share Audio
    Ini sudah tidak digunakan lagi karena saya bisa memanfaatkan platform lain seperti discord, zoom, google meet, dll.

• P2: Figma for VS Code

• P2: Live Preview
  Jarang saya pakai untuk project laravel.

• P2: Live Server
  Mirip dengan Live Preview, seperti biasa saya jarang pakai untuk project laravel.

• P3: Git History

• P3: GitLens

P4: Ekstensi yang Saya Disabled atau Jarang Dipakai

• P4: advanced-new-file
• P4: Better Comments
• P4: Browse Lite
• P4: Database Client
  • P4: Database Client JDBC
• P4: DotENV
  Saya kurang tahu tentang ekstensi ini bisa bekerja atau tidak, yang pasti saat saya pakai entah kenapa syntax hightlight file .env saya tidak banyak berubah, apakah sudah digantikan dengan theme vscode.
• P4: file-tree-generator
• P4: OpenAPI (Swagger) Editor

P4: Ekstensi untuk React mungkin

• P4: JavaScript Booster
• P4: JS CodeFormer
• P4: JS Refacor
• P4: Paste JSON as Code

P4: Other

• P4: XML
• P4: YAML
• P4: Path Intellisense
• P4: Peacock
• P4: LCOV.info language support
• P4: Learn Yaml
• P4: npm intellisense
• P4: PhpStrom Parameter Hints in VSCode
• P4: PostCSS Language Support
• P4: Search node_modules
• P4: SQL Formatter
• ~~P4: Syntax Highligh Theme~~
  Sudah tidak saya gunakan lagi karena setiap bahasa pemprograman biasanya sudah ada ekstension sendiri yang menangani highlight.
• P4: TODO Highlight
• P4: PlantUML

P4: Markdown

• P4: Markdown All in One
• P4: Markdown Preview Enhanced
• P4: markdownlint

P4 Remote by Microsotf

• P4: WSL
• P4: Remote - SSH
• P4: Remote - SSH: Editing Configuation Files
• P4: Remote Explorer

Cara Deploy Eksntesion ke Marketplace

Cek apakah vsce sudah terpasang.

vsce --version

Jika belum terpasang karena pindah versi nodejs menggunakan nvm. Silahkan jalankan perintah berikut:

npm install -g @vscode/vsce

Jika sudah silahkan publish

vsce publish