Kaesa Laravel Extension Pack

Berupa catatan history ekstension apa saja yang saya gunakan untuk project laravel.

Ekstensi Wajib Laravel

Laravel Official VS Code Extension

Ini ekstensi official buatan core tim laravel. Jadi pakai untuk menggantikan peran extension ini:

• Laravel Blade Snippets
  Ternyata tanpa ini tidak muncul Emmet html di blade template jadi masih butuh ini.
• Laravel Snippets
• ~~Laravel goto view~~
• ~~laravel-jump-controller~~
• Laravel Extra Intellisense
  Belum tahu apa saja yang kubutuhkan untuk ekstensi ini jadi saya disabled.
• ~~Laravel-goto-components~~
• ~~Laravel Blade formatter~~ Mungkin beberapa snippets masih berguna. Tapi saya disabled.
• ~~Laravel Create View~~

Laravel Blade Spacer

Laravel Blade Wrapper

Digunakan untuk wrap tag html dengan blade directive. Command CTRL + SHIFT + T.

DevDb

Ekstensi ini digunakan untuk menampilkan data yang ada di database, sayang-nya untuk PostgreSQL tidak bisa edit/delete data-nya. Untuk pengguna MySQL bisa untuk edit/delete data atau record-nya.

Tailwind CSS IntelliSense

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

EditorConfig for VS Code

Digunakan untuk kolaborasi supaya style kode-nya sama antar programmer.

Better Pest

• Butuh eksplore lebih lanjut, saya belum paham.

Ini digunakan untuk testing.

PHP Intelephense

Karena laravel menggunakan PHP, jadi ini dibutuhkan.

PHP Debug

• Butuh eksplore lebih lanjut, saya belum paham.

Saya kurang tahu cara menggunakan ini, mungkin untuk meminimalisir debuging dengan dd(), dump().

PHP Namespace Resolver

Saya gunakan untuk import dan expand php namespace.

PHP IntelliSense

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 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 butuh 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: Composer

Cara pakai CTRL + SHIFT + P lalu ketik Composer.

Opsional: IntelliPHP - AI Autocomplete for PHP

Opsional: PHP

Opsional: PHP Profiler

Opsional Laravel Artisan

Cara pakai CTRL + SHIFT + P lalu ketik Artisan.

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 Microsot

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

Cara Deploy Eksntesion ke Marketplac

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