Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Tools

Sublime Text 2: Langkah Pertama

by
Difficulty:IntermediateLength:LongLanguages:

Indonesian (Bahasa Indonesia) translation by Johari Triana (you can also view the original English article)

Dalam waktu kurang dari satu tahun, editor kode Sublime Text 2 - tersedia untuk Mac, Windows, dan Linux - telah meroket untuk menjadi editor pilihan bagi sejumlah besar pengembang. Bagaimana bisa? Yah, ini adalah editor yang canggih, dengan kecepatan sangat cepat, komunitas plugin yang sangat bersemangat, konfigurasi mudah, mode Vintage (Vim), banyak kursor - daftarnya terus berlanjut.

Jika Anda belum beralih, dari rasa loyalitas kepada editor pilihan Anda saat ini, beri saya dua puluh menit, dan saya akan meyakinkan Anda!

Harap perhatikan bahwa artikel ini, untuk kemudahan dan keterbacaan, akan secara eksklusif menggunakan binding keyboard khusus Mac. Lihat di sini untuk versi Windows/Linux yang sama.


1 - Banyak Kursor

Mari kita mulai dengan fitur yang akan mengejutkan Anda: banyak kursor. Catatan hati-hati: setelah Anda mengalami fleksibilitas memiliki beberapa kursor di ujung jari Anda, Anda tidak akan dapat kembali ke cara lama.

Bayangkan Anda perlu mengubah setiap kemunculan kata, myMethod, menjadi newMethod. Secara tradisional, Anda dapat melakukan pencarian dan penggantian; Namun, di Sublime, itu jauh lebih mudah. Cukup tempatkan kursor di dalam kata, dan ketik Control + Command + g. Dengan penekanan tombol ini saja, kini Anda telah memilih setiap kemunculan myMethod, dan memiliki beberapa kursor di ujung jari Anda. Ubah teks, dan saksikan semuanya diperbarui! Rahang terjatuh, kan?

Atau, Anda dapat menekan Command + d berulang kali untuk secara bertahap memilih setiap kemunculan kata tambahan.


2 - Palet Perintah

Palet perintah Sublime adalah pengiriman Tuhan untuk mereka yang lebih suka menyentuh sesedikit mungkin mouse (lebih lanjut tentang itu sebentar lagi). Palet ini memungkinkan Anda untuk menjalankan perintah yang tak terhitung jumlahnya, seperti mengubah jenis sintaksis untuk dokumen saat ini, memasang plugin, dan mencari snippet, untuk beberapa nama.

Misalnya, untuk mengubah penyorotan sintaks saat ini untuk dokumen saat ini dari, katakanlah, HTML, ke CSS, tekan Command + Shift + p, dan ketik "css." Opsi "Set Syntax: CSS" sekarang akan ditampilkan. Tekan enter, dan Anda selesai! Perhatikan bahwa Anda dapat memanfaatkan pencarian fuzzy di sini; dengan demikian, Anda tidak perlu mengetikkan seluruh kata.

Hafalkan perintah keyboard ini dan sering menggunakannya.


3 - Package Control

Dibuat oleh Will Bond, Package Control adalah manajer paket yang kuat yang memungkinkan Anda, dari langsung di dalam editor kode, menginstal paket apa pun (atau plugin) yang dapat Anda bayangkan. Perlu Pengodean Zen? Instal dalam tiga detik. Bagaimana dengan dukungan Prefixr, atau penyorotan sintaksis CoffeeScript? Hanya perlu beberapa kali penekanan tombol untuk pengaturan. Tidak ada lagi menjelajahi web untuk plugin yang tepat, dan kemudian meneliti di mana menginstalnya.

Untuk menginstal Package Control, kunjungi situs Will Bond, salin snippet  kode yang disediakan, kembali ke Sublime Text, tekan Control + `, dan paste snippet itu dan mulai ulang. Kamu sudah selesai!

Mari kita instal Zen Coding. Buka palet perintah (Command + Shift + p) dan ketik, "install." Setelah Anda menekan Enter, Sublime akan memberikan daftar semua berbagai plugin yang tersedia untuk diinstal. Cari Zen untuk memunculkan "Zen Coding," dan tekan Enter untuk menginstalnya. Yap - semudah itu! Untuk mengonfirmasi bahwa itu berfungsi, dalam file HTML kosong, ketik ul>li*4 + Tab. Tada!


4 - Tema TextMate

Kemungkinan pembaca Mac Anda saat ini menggunakan TextMate. Untungnya, Sublime Text menawarkan dukungan penuh untuk tema TextMate. Ini berarti, ya, skema warna khusus Anda dapat dimigrasi ke Sublime Text tanpa satu ons konfigurasi. Cukup masukkan ke direktori "Packages" Anda apa adanya.


5 - Nettuts + Fetch

Berapa kali Anda mengunduh secara manual, misalnya, HTML5 Boilerplate, atau jQuery library? Itu sia-sia; bukankah lebih mudah jika kita dapat menjalankan penekanan tombol cepat dan langsung mengunduhnya ke proyek saat ini? Tentu saja! Nettuts+Fetch adalah solusinya.

Instal melalui Package Control, lalu cari "Fetch: Manage Remote Files." Ini akan menampilkan dua objek masing-masing untuk mengambil file dan paket tunggal; dua telah disediakan untuk Anda.

Untuk mengujinya, buat file baru, cari "Fetch" di palet perintah, pilih "Single File -> jQuery," dan saksikan versi terbaru dari perpustakaan ditambahkan secara instan. Selanjutnya, coba instal seluruh paket, dan kagum.


6 - Simbol Goto

Kunjungi kelas atau daftar fungsi apa pun yang Anda miliki, ketik Command + r, dan Anda akan disajikan daftar semua simbol di halaman. Perhatikan bagaimana kita menggunakan simbol @ untuk melihat metode.

Sebagai contoh, jika Anda melihat kelas PHP, Command + r akan mencantumkan semua nama metode. Anda kemudian dapat menggunakan pencarian fuzzy untuk langsung pindah ke metode yang diinginkan.

Ketika kami menggabungkan ini dengan kemampuan pengalihan file instan Sublime, perintah ini menjadi sangat membantu. Bayangkan Anda perlu mengedit style.css, dan, khususnya, kelas .box di dalam file itu; ketik Command + p, style@box, dan Anda di sana!


7 - Prefixr

Prefixr adalah layanan web yang secara otomatis menerapkan prefiks vendor CSS yang diperlukan untuk stylesheet Anda, sehingga Anda tidak harus mengingat vendor mana yang digunakan untuk properti CSS3 yang diberikan. Plugin Prefixr membawa fungsi ini langsung ke editor Anda!

Setelah Anda menginstal plugin melalui Package Control, pilih konten stylesheet Anda, dan picu plugin dengan mengetikkan Control + Command + x. Voila! File Anda telah langsung diperbarui. Gunakan sintaksis resmi, dan biarkan Prefixr mengetahui persyaratan khusus vendor.


8 - Advanced New File

Semakin sedikit Anda menyentuh mouse, semakin baik. Sayangnya, secara default, membuat file baru di Sublime Text bisa memakan waktu lebih lama dari yang kita inginkan. Plugin "Advanced New File", yang dapat, seperti biasa, diinstal melalui Package Control, memperbaikinya.

Setelah diinstal, ketik Command + Option + n, dan Anda akan melihat panel baru muncul di bagian bawah.

Apa yang fantastis tentang plugin ini adalah Anda juga dapat membuat file di dalam folder yang belum ada. Mungkin Anda perlu membuat file scripts.js baru, tetapi Anda belum membuat direktori js. Tidak apa-apa; plugin akan tahu untuk membuat folder jika belum ada. Cukup ketikkan path lengkap ke file baru yang diinginkan, dan Anda siap melakukannya.

Mari kita membuat file jQuery.js baru di dalam direktori js/libs yang belum dibuat; Option + Command + n, js/libs/jquery.js, simpan, Command + Shift + p, "Fetch", "Single File", "jQuery." Kami sekarang, dalam hitungan detik, telah membuat pohon direktori, dan mengunduh versi terbaru perpustakaan.


9 - Mode Vintage

Jika mereka ingin melakukannya, pengguna Vim dapat dengan mudah bermigrasi ke Sublime Text, berkat mode Vintage opsional. Untuk mengaktifkannya, edit file "Preferensi Default" di dalam menu Preferensi, gulir ke bawah, dan hapus item "Vintage" dari array ignored_packages.

Sekarang, tekan Escape, dan Anda dalam mode perintah! Anda akan menemukan bahwa keybindings Vi Sublime cukup akurat!


10 - Snippet Native

Setiap snippets di Sublime Text merujuk ke satu file, dan memungkinkan untuk penyelesaian tab dan nilai default. Untuk membuat snippet baru, pilih "Tools -> New Snippet". Di file baru ini, Anda bisa, di dalam tag <content> , masukan snippet Anda. Anda juga memiliki kemampuan untuk memilih tab trigger dan scope, yang memastikan bahwa snippet hanya dapat diakses dari dalam jenis file tertentu.

Simpan file dengan ekstensi .sublime-snippet, dan ujilah!


11 - Snippet Berversi

Walaupun snippet native Sublime menyelesaikan pekerjaan, untuk snippet yang lebih besar, saya lebih suka memanfaatkan GitHub Gists dan version control.

Mulailah dengan menginstal plugin "Gist" melalui Package Control. Ini sekarang akan memberi kita beberapa opsi baru di palet perintah.

Saat Anda mencoba membuat Gist baru, Anda harus terlebih dahulu menyediakan plugin dengan kredensial GitHub Anda. Saya sarankan Anda membuat akun khusus untuk snippet Anda. Setelah Anda melakukannya, setel kredensial, dan coba lagi. Setelah Anda membuat beberapa snippet, Anda dapat mencantumkannya melalui palet perintah, dengan memilih "Gist: Open Gist."

Bagian terbaiknya adalah, ketika Anda fork snippet yang ada melalui gist.github.com, mereka akan secara otomatis tersedia di Sublime Text - ditambah, version control gratis untuk snippet Anda!


12 - Sistem Build

Sistem build Sublime memungkinkan kita untuk menerapkan keybindings, yang dapat disalurkan melalui program eksternal, seperti CoffeeScript, Sass, Grunt, dan banyak lagi. Ini berarti, daripada beralih ke Terminal untuk menjalankan perintah build Anda, Anda dapat melakukan hal yang sama dari langsung di dalam editor.

Mari kita gunakan CoffeeScript sebagai contoh, karena ini cukup populer akhir-akhir ini. Mulailah dengan membuat file coffeescript.sublime-build di dalam direktori "Packages/" Anda. Selanjutnya, rekatkan kode berikut dalam:

Meskipun ada beberapa opsi yang tersedia bagi kami, kami akan tetap menggunakan ketiga opsi ini untuk saat ini. cmd menentukan perintah yang harus dieksekusi, bersama dengan argumen dan flag. Dalam hal ini, kami menjalankan file saat ini melalui perintah kompilasi CoffeeScript. Kedua, path hanya diperlukan jika CoffeeScript tidak diinstal di path dasar Anda.

Setelah Anda menyimpan file, opsional baru akan tersedia melalui "Tools -> Build System." Pilih "CoffeeScript," dan, sekarang, ketika Anda menjalankan perintah "build" dengan Command + b, file CoffeeScript saat ini akan dikompilasi!

Addy Osmani memiliki artikel yang fantastis tentang kemampuan build Sublime Text.


13 - Penyuntingan Bebas Gangguan

Terkadang, kita perlu menyaring semua bulu tambahan yang menghalangi pengkodean kita. Gunakan "Distraction Free Mode" untuk menghapus layar, kecuali kode. Opsi ini tersedia, melalui menu View. Pilih "Enter Distraction Free Mode," atau gunakan pintasan keyboard Mac, Control + Shift + Command + F.


14 - View Bird-Eye

Salah satu fitur menonjol Sublime adalah sidebar uniknya yang menawarkan pandangan sekilas tentang file saat ini. Ini bisa sangat membantu untuk file besar, karena memungkinkan kita untuk memindai file dalam hitungan detik, tanpa harus menggulir halaman secara manual.


15 - Banyak Kolom

Lebih suka mengedit banyak file dalam jendela yang sama? Sublime menawarkan beberapa tampilan terpisah, termasuk baris dan kolom. Jelajahi View -> Layout untuk melihat pilihan yang tersedia, dan pastikan untuk menghafal perintah keyboard, karena Anda akan sering menggunakan fitur ini!


16 - Pewarnaan CSS Langsung

Plugin "Live CSS" sederhana, tetapi bermanfaat. Ini akan secara otomatis mengatur latar belakang nilai warna apa pun di stylesheet Anda sama dengan apa yang Anda tentukan. Tentu saja, ini kenyamanan kecil, tetapi, bagaimanapun, ini bisa berguna!


17 - Placeholder

Selama pengembangan, berkali-kali, kami belum memiliki konten final untuk aplikasi web. Dalam kasus ini, kami biasanya menggunakan teks dan gambar placeholder. Saat mempertimbangkan seberapa sering kita melakukan ini, bukankah pintar untuk membuat beberapa snippet placeholder? Yah, plugin placeholder melakukan hal ini!

Apakah Anda memerlukan gambar sementara, beberapa paragraf "lorem ipsum", atau bahkan daftar definisi dengan teks tiruan, plugin ini akan sempurna untuk pekerjaan itu.


18 - Panduan Indentasi

Kenyamanan yang sangat jarang, ditemukan di Notepad++, adalah panduan indentasi. Terkadang, saat meramban file besar, akan sulit untuk mencocokkan indentasi tanpa sedikit pun bantuan.

Panduan indentasi Sublime menyediakan visual bertitik membantu untuk memperbaikinya.


19 - Konfigurasi Yang Mudah

Sublime Text kadang-kadang dikritik karena tidak menawarkan antarmuka yang mencolok untuk pengaturan opsi konfigurasi. Ironisnya, menurut pendapat penulis ini, fakta bahwa Sublime benar-benar menampilkan objek JavaScript yang dapat diedit adalah salah satu kekuatan terbesarnya. Ini membuat proses penyesuaian pengaturan Sublime tepat untuk kebutuhan Anda sesederhana mungkin secara manusiawi.

Misalnya, untuk menonaktifkan "Panduan Indent," buka file pengaturan "Default", cari draw_indent_guides (dengan Command + i), dan tetapkan nilainya ke false. Mudah! Pastikan untuk meninjau semua pengaturan yang tersedia.


20 - Pengalihan File dalam Milidetik

Jika Anda masih merujuk ke sidebar secara manual untuk mencari file yang diinginkan, Anda salah melakukannya. Perpindahan file instan Sublime luar biasa, dan lebih cepat dari yang pernah Anda alami dalam editor.

Ketik Command + p untuk memunculkan daftar semua file dalam proyek saat ini. Anda sekarang dapat menggunakan pencarian fuzzy untuk memilih file yang ingin Anda alihkan. Butuh daftar semua file JavaScript? Ketik .js. Anda akan menemukan bahwa, saat Anda mengetik penelusuran, luhur teks akan, dengan kecepatan kilat, beralih ke file teratas yang cocok dengan kueri penelusuran Anda.

Ini adalah metode yang disukai untuk menavigasi ke file baru. sidebar adalah pilihan terakhir.


21 - Key Binding

Sublime memberi kita kemampuan untuk dengan mudah mengatur key binding untuk memicu perintah apa pun. Sementara banyak binding sudah dibangun, jika Anda mau, Anda dapat memodifikasinya sesuai kebutuhan Anda.

Pertimbangkan binding untuk memindahkan file ke jendela lain, saat bekerja dengan banyak kolom. Secara default, kita perlu menekan Control + Shift + 2; Namun, ini bisa agak sulit untuk diingat. Sebagai gantinya, mari kita remap ini ke Option + 2.

Meskipun kami dapat mengedit file key binding default, ini adalah praktik yang buruk, karena fakta bahwa setiap pembaruan Sublime akan mereset kustomisasi Anda. Daripada, yang terbaik adalah mengedit file User Key Binding.

Jangan khawatir; jika ini tampak membingungkan, cari file keybindings default untuk pengaturan yang perlu Anda ubah, dan kemudian salin dan tempel ke file keybindings pengguna Anda, dan perbarui "key" yang sesuai.


22 - Pencarian Langsung

Ketika kita perlu mencari file, kita sering menggunakan panel "Search and Replace", yang membutuhkan waktu. Sebagai gantinya, tekan Command + i untuk melakukan pencarian langsung pada file saat ini. Anda akan kagum dengan seberapa cepat metode ini.


23 - Melipat kode

Secara alami, Sublime Text menyediakan dukungan untuk melipat kode multi-level. Katakanlah Anda sedang mengerjakan stylesheet, dan ingin menyembunyikan semua properti; baik pilih "Edit -> Cold Folding -> Fold All", atau tekan Command + k + 1.

Bagus! Untuk membuka semua blok, tekan Command + k + j.

Keybinding mungkin membutuhkan waktu untuk dihafal, tapi itu sepadan dengan usaha.


24 - Versi Pengembangan

Jangan lupa bahwa Sublime Text 2 sedang dikembangkan secara aktif. Saya mendorong Anda untuk menggunakan versi pengembangan, tersedia di sublimetext.com/dev. Jangan khawatir; meskipun versi pengembangan, Anda akan jarang menemukan bug.


25 - Alignment Instan

Plugin Alignment, oleh Will Bond, akan langsung menyesuaikan kode Anda untuk membuat kode yang lebih indah. Paling umum, ini digunakan untuk memastikan bahwa tanda sama dengan, =, untuk barisan penetapan variabel.

Diinstal melalui Package Control, plugin Alignment dapat diaktifkan dengan memilih bagian kode yang berlaku, dan menekan Control + Shift + a.

Akibatnya, plugin akan menerjemahkan:

Ke:

Sederhana, tetapi membantu!


Gagasan Penutup

Jelas, ada banyak lagi rahasia dan trik dalam Sublime Text 2 tetapi daftar ini akan membantu Anda memulai! Jika Anda ingin mempelajari lebih lanjut tentang editor yang fantastis ini, pastikan untuk merujuk ke kursus kami yang akan datang: "Alur Kerja Sempurna dalam Sublime Text 2."

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.