Setup WPCS 3.0 di VSCode: Kode WordPress Rapi

Pernah nggak sih, kamu nulis kode WordPress dengan semangat, tapi begitu direview, ternyata banyak banget yang melenceng dari standar? Atau plugin favoritmu malah ditolak dari repo resmi cuma gara-gara kode masih berantakan? Santai, kamu nggak sendirian. Kabar baiknya, sekarang ada WordPress Coding Standard versi 3.0 yang bikin seluruh proses jauh lebih ringan. Di artikel ini, kita bakal setup WPCS 3.0 di Visual Studio Code sekaligus menambahkan PHPCompatibilityWP. Lebih dari itu, kamu juga akan belajar trik ruleset kustom ala developer senior yang bikin kode makin rapi tanpa ganggu ritme kerjamu.

Apa yang Kamu Butuhkan?

Sebelum menyelam lebih dalam, pastikan dua senjata ini sudah terpasang di komputermu:

• Visual Studio Code — editor andalan yang sudah terinstal.
• Composer — dependency manager untuk PHP. Kalau belum, unduh dulu di getcomposer.org.

Kalau semua sudah siap, langsung saja kita mulai konfigurasinya.

Instalasi WordPress Coding Standard (WPCS 3.0)

Sekarang komponen utamanya kita pasang. Kelebihan WPCS 3.0 adalah kemampuannya mendaftarkan standar kode secara otomatis — kamu nggak perlu lagi atur path secara manual.

Buka terminal di root proyek WordPress-mu, lalu jalankan perintah ini:

composer require --dev wp-coding-standards/wpcs:"^3.0"

Nanti akan muncul prompt seperti ini:

Do you trust “dealerdirect/phpcodesniffer-composer-installer” to execute code and wish to enable it now? (writes “allow-plugins” to composer.json) [y,n,d,?]

Cukup ketik y dan tekan Enter. Setelah itu, plugin installer akan mendeteksi seluruh paket standar koding yang sudah ada di Composer dan mendaftarkannya buatmu. Praktis banget, kan? 🎉

Untuk memastikan semuanya berhasil, cek daftar standar yang sudah terpasang dengan perintah ini:

vendor/bin/phpcs -i

Hasilnya kira-kira seperti di bawah:

The installed coding standards are MySource, PEAR, PSR1, PSR2, PSR12, Squiz, Zend, Modernize, NormalizedArrays, Universal, PHPCSUtils, WordPress, WordPress-Core, WordPress-Docs and WordPress-Extra

Kamu bisa lihat berbagai varian ruleset WordPress di sini. Masing-masing punya level ketat yang berbeda—dari yang hanya core, dokumentasi, sampai extra. Info lengkapnya bisa kamu cek di tautan dokumentasi WPCS.

Tambahkan PHPCompatibilityWP

Selanjutnya, kita perlu memastikan kode kamu tetap kompatibel di berbagai versi PHP, apalagi banyak hosting masih pakai versi lawas. Di sinilah PHPCompatibilityWP berperan. Ruleset ini berdasar pada PHPCompatibility, tapi sudah disesuaikan dengan kebutuhan WordPress.

Pasang dengan perintah berikut:

composer require --dev phpcompatibility/phpcompatibility-wp:"*"

Kemudian, cek lagi daftar standar yang sudah terdaftar:

vendor/bin/phpcs -i

Sekarang akan muncul tambahan standar baru:

... PHPCompatibility, PHPCompatibilityParagonieRandomCompat, PHPCompatibilityParagonieSodiumCompat, PHPCompatibilityWP, ...

Dengan demikian, plugin-mu tidak hanya rapi sesuai standar WordPress, tapi juga aman di banyak versi PHP. Dua keuntungan dalam satu langkah.

Konfigurasi VS Code

Sekarang waktunya “menyulap” editormu agar otomatis mengecek dan merapikan kode setiap kali menyimpan file. Langkah pertama, pasang ekstensi PHP Sniffer & Beautifier buatan Samuel Hilson di VS Code. Ekstensi ini menangani proses sniffing (pengecekan) dan formatting (perapihan) sekaligus.

Setelah terpasang, buka settings.json (bisa lewat Command Palette: Preferences: Open Settings (JSON)) lalu tambahkan kode ini:

"[php]": {
    "editor.defaultFormatter": "valeryanm.vscode-phpsab",
    "editor.formatOnSave": true
}

Baris di atas mengaktifkan format otomatis setiap kali kamu simpan file PHP. Selain itu, kita perlu memberi tahu ekstensi untuk menggunakan standar WordPress:

"phpsab.standard": "WordPress"

Kamu bisa mengganti "WordPress" dengan standar lain sesuai kebutuhan. Akan tetapi, saran saya sebagai seseorang yang sudah bertahun-tahun berkutat dengan kode WordPress: jangan puas hanya dengan konfigurasi bawaan. Di bagian berikutnya, kita akan bahas jurus pro yang sesungguhnya.

Trik Pro: Custom Ruleset XML

Inilah bagian yang sering terlewat, bahkan oleh developer berpengalaman sekalipun. Secara default, standar WordPress bisa terasa terlalu ketat atau sebaliknya kurang cocok untuk gaya koding timmu. Alih-alih mengandalkan pengaturan tunggal, buatlah file ruleset XML kustom.

Keuntungannya, kamu bisa:

• Menonaktifkan aturan-aturan yang tidak relevan atau mengganggu produktivitas.
• Menyesuaikan severity (level keparahan) hanya untuk warning, tanpa menggagalkan build.
• Mengaktifkan caching agar proses sniffing jauh lebih cepat.

Lalu, ekstensi PHP Sniffer & Beautifier sudah dilengkapi fitur phpsab.autoRulesetSearch yang aktif secara default. Fitur ini otomatis mencari file seperti .phpcs.xml, phpcs.xml.dist, atau ruleset.xml di root proyekmu. Jadi, kamu tinggal membuat file dengan nama yang tepat, dan aturanmu langsung dipakai.

Berikut contoh file phpcs.xml yang sering saya gunakan di proyek nyata:

<?xml version="1.0"?>
<ruleset name="Custom WordPress Ruleset">
    <arg name="cache"/>
    <rule ref="WordPress">
        <exclude name="WordPress.CodeQuality.ControlStructures.DisallowShortTernary"/>
        <exclude name="WordPress.Security.EscapeOutput"/>
    </rule>
    <rule ref="WordPress.DB.PreparedSQL.NotPrepared">
        <severity>0</severity>
    </rule>
    <rule ref="Squiz.Commenting.FileComment">
        <exclude name="Squiz.Commenting.FileComment.Missing"/>
    </rule>
    <rule ref="Universal.Operators">
        <exclude name="Universal.Operators.DisallowShortTernary"/>
        <exclude name="Universal.Arrays.DisallowShortArraySyntax"/>
    </rule>
    <config name="testVersion" value="8.2-"/>
</ruleset>

Perhatikan beberapa poin kunci di sini:

• <arg name="cache"/> mengaktifkan cache sehingga pengecekan ulang berjalan jauh lebih ringan.
• Kita mengecualikan aturan short ternary dan escape output jika memang tidak dibutuhkan di setiap bagian proyek.
• Severity untuk prepared SQL disetel ke 0 agar hanya muncul sebagai catatan, bukan error.
• testVersion diatur ke 8.2- untuk menandai bahwa kode kita minimal untuk PHP 8.2, sehingga PHPCompatibilityWP bisa langsung melaporkan potensi masalah kompatibilitas ke versi di bawahnya.

Intinya, dengan file ruleset seperti ini, kamu tetap menjaga standar tinggi tanpa harus tersendat oleh aturan-aturan yang kurang kontekstual. Inilah praktik yang biasa dipakai di agensi WordPress kelas atas.

Kesimpulan dan Langkah Selanjutnya

Sekarang, proyek WordPress-mu sudah dilengkapi penjaga kode otomatis: WPCS 3.0 yang langsung terintegrasi, PHPCompatibilityWP untuk keamanan kompatibilitas, dan VS Code yang akan merapikan kode setiap kali kamu simpan. Bahkan lebih dari itu, kamu sudah punya template ruleset kustom yang bisa kamu sesuaikan terus-menerus.

Jadi, mulai sekarang, biasakan bekerja dengan standar ini sejak awal. Efek jangka panjangnya, kode kamu akan lebih mudah dibaca, minim bug, dan pastinya lebih mudah lolos review plugin.

Kalau ada pertanyaan seputar setup atau kamu punya ruleset favorit sendiri, langsung tulis di kolom komentar ya. Jangan lupa, subscribe newsletter mingguan kami untuk tips pengembangan WordPress yang hanya dibagikan lewat email. Happy coding!

FAQ