Pasti bingung instalasi Sublime Text 3 lalu paket plugin apa saja yang sering dipakai atau digunakan bagi seorang web developer. Hal ini sering penulis alami waktu berpindah dari komputer yang tidak terinstall paket/plugin yang sering penulis pakai. Untuk mempermudah kita dalam mengingat paket apa saja yang sangat penting ada di ST3 editor kita berikut daftar plugin yang “wajib ada” tersebut.
sebelum kita mulai tahap pertamanya di Sublime harus sudah terpasang package control seperti gambar diatas ya.
All Autocomplete
digunakan agar skript dan penamaan variabel,fungsi, class dan lain sebagainya dapat lebih konsisten misalnya kita pernah membuat fungsi cariBarang di suatu file, dan kita akan dapat mengetikkan dengan mudah karena sudah terbantu dengan plugin ini.
Auto Close HTML tags
Mengotomatiskan penutupan tag html misalnya kita ketikkan <p> maka plugin ini akan menuliskan secara otomatis tag penutupnya : </p>
CSS Completion
Seperti pada list sebelumnya, maka plugin ini bermanfaat menutup tag yang berhubungan dengan sintak css.
Color Picker
Pusing karena harus buka browser yang menyediakan kode warna atau buka aplikasi photoshop cuman untuk mencari kode warna. Plugin ini sangat bermanfaat karena membantu kita agar dapat menambahkan kode warna hanya dengan bantuan klik yang muncul dari dialog/windows color picker. ingat ya setelah selesai install diaktivasi dengan menekan ctrl + shift + c
HTML Attributes
Plugin ini berguna memberikan autocompletion terhadap penulisan sintak html. Misalkan saja anda menuliskan sintak <tab (masih tahap ketik) .. maka plugin ini akan memberikan suggestion untuk tag tersebut <table>. bingung nah coba sendiri deh 😉
Bracket Higlighter
Plugin ini sangat berguna apabila kita lupa dimana letak dari penutup bracker [ } ]. Symbol bracket ini sering kita pakai apabila kita menggunakan sintak if else atau sintak looping (misalnya for, while dan foreach). Bracket ini bisa jadi sumber malapetaka error debugging klo tidak ada semacam visual guide untuk menuntun kita memahami awal dan akhir sintak.
HTML Beautify atau Minify
Ingin mempercepat proses loading dari situs, salah satu triknya adalah dengan mekompresi file statis yang ada di situs kita. File tersebut misalnya adalah file styling CSS, javascript atau bahkan kita ingin mengkompresi file HTML itu sendiri. Selain fitur kompresi plugin ini juga bermanfaat untuk merapikan format perataan pada file HTML. Silahkan baca manual cara penggunaannya pada situs github mereka.
PHP codeBeautifier
Agar kode php tidak menjadi coding yang tidak beraturan atau spaggeti code maka kita sangat disarankan untuk menuliskan koding php dengan cara yang rapi atau terorganisir. Namun bagaimana jika kita terbiasa menuliskan koding dengan cara yang tidak beraturan ?. bersyukurlah ada plugin ini. Plugin ini secara otomatis akan merapikan format penulisan koding php kita.
A File Icon
Apalah artinya sebuah nama, berarti ko. Gimana coba kita nyari file yang namanya sama tapi sebenarnya jenis filenya beda. Nah untuk membantu kita kita dapat memasang plugin A File Icon. plugin ini berguna untuk memberikan visualisasi terhadap icon file yang ada di layar pilihan FOLDERS di sisi kiri tampilan ST3.
Ingat ya Jangan terlalu banyak menginstall plugin, plugin yang terlalu banyak akan menyebabkan ST3 menjadi berat dan tidak responsive.
Alignment
paket ini digunakan untuk merapikan coding atau lebih tepatnya meratakan baris tanda code anda misalnya merapikan penandaan array dan variabel contoh :
sebelum menggunakan auto align, terlihat baris nilai variabel yang tidak rapi :
$pjtbu_detail->npwp = $http->post('npwp'); $pjtbu_detail->tingkat_pendidikan_id = $http->post('tingkat_pendidikan_id'); $pjtbu_detail->tahun_lulus = $http->post('tahun_lulus'); $pjtbu_detail->nomor_registrasi_ska_skt = $http->post('nomor_registrasi_ska_skt');
setelah menggunakan auto align
cara menggunakan paket ini sangat mudah, caranya anda cukup memblok baris kode yang ingin anda rapikan di sublime kemudian tekan kombinasi kode berikut : ctrl + shift + a , Voilla kode anda otomatis rapi tanpa harus manual satu-satu meratakan
PhpFmt (https://github.com/phpfmt/fmt)
Plugin ini sangat membantu anda dalam merapikan otomatis koding php tanpa banyak setup, hanya dengan pada proses penyimpanan (save) maka kode php anda akan langsung dirapikan. Magic right…. 🙂
Tapi eits tunggu dulu anda perlu mengubah setupnya menjadi berikut pada setting Preferences -> Package Setting -> phpfmt ->Settings User :
{ "autocomplete": true, "autoimport": true, "enable_auto_align": true, "format_on_save": true, "ignore": "Parent", "indent_with_space": 4, "passes": [ "ReindentSwitchBlocks", "OrderAndRemoveUseClauses", "PSR2EmptyFunction", "StripSpaceWithinControlStructures", "ShortArray", "SpaceBetweenMethods", "AutoSemicolon" ] }
(saat ini saya hanya telah mencoba plugin ini di OS linux mint, sehingga belum tahu bagaimana pengaturan untuk di OS windows. )
SyncedSideBar
jika anda sudah mulai menjelajah vscode maka akan dimanjakan dengan fitur open folder detection. Fitur ini akan membuka otomatis folder yang filenya sedang kita buka. Hal ini sangat memudahkan kerja kita apalagi klo proyek kita MVC dimana file yang kita edit berdekatan. Alhamdulilah ya… ternyata fitur ini sudah disediakan di plugin sublime text. Hayo guys langsung tancap gas install folder ini.
Baca juga ini bro klo pengen tahu perbandingan benchmark antara vscode dengan sublime :
[insert page=’benchmark-sublime-text-3-vs-visual-code-1-13-0′ display=’link’]
dan ini juga
[insert page=’inilah-plugin-wajib-vscode’ display=’link’]
Oh iya ada lagi lho yang plugin lain yang sangat penting bagi anda yang menggunakan ftp. Berikut disampaikan plugin yang dimaksud beserta cara setupnya. yakni
[insert page=’upload-otomatis-script-menggunakan-sublimetext-3′ display=’link’]
[insert page=’memanfaatkan-realtime-error-syntax-di-sublime-text’ display=’link’]
untuk dapat memberikan code syntak error terhadap file php sebelum dijalankan di browser namun dua paket ini cukup banyak yang perlu di konfigurasi sebelum dapat digunakan. silahkan baca guys di related post untuk detail cara penggunaan dan pengaturan plugin diatas.
[text-blocks id=”189″ slug=”share-this”]