Sublime Text 3 (ST3) adalah versi terbaru dari salah satu editor teks yang paling sering digunakan oleh para web developer, coder, dan programer. Ini tersedia juga untuk Mac, Windows, dan Linux, dan gratis untuk diunduh dan digunakan.
Maksimalkan ST3 dengan 25 tips & trik utama ini untuk membantu proses pengembang web. Pelajari tentang paket yang harus dimiliki, shortcut ajaib, dan masih banyak lagi.
1. User Preference Settings
Secara default, ST3 menggunakan hard-tab yang panjangnya 4 karakter. Ini dapat menghasilkan kode yang sulit dibaca, karena inden tabel yang besar menggeser pekerjaan Anda ke kanan. Saya menyarankan semua pengembang menambahkan ini ke pengaturan pengguna mereka (Sublime Text 3 => Preferences => Settings - User):
{
"draw_white_space": "all",
"rulers": [80],
"tab_size": 2,
"translate_tabs_to_spaces": true
}Pengaturan ini mengubah hard-tab ke spasi, membuat indentasi hanya dua karakter, menempatkan penggaris pada tanda 80 karakter (untuk mengingatkan Anda agar konsisten menjaga kode tetap ringkas), dan menambahkan spidol spasi. Berikut ini adalah daftar lengkap opsi preferensi jika Anda ingin terus menyesuaikan ST3 environment Anda.
2. Command Palette
ST3 Command palette memungkinkan Anda menjalankan toolbar actions (misal: Menetapkan sintaks kode untuk file yang dibuka) tanpa harus mengangkat jari dari keyboard. Meskipun command palette dapat dibuka dengan mouse melalui Tool => Command Palette, cara terbaik untuk mendapatkan Command Palette prompt adalah menggunakan pintasan keyboard CTRL / ⌘-SHIFT-P....
Screenshot of the Command Palette in Sublime Text 3
3. Column & Row Workspace Panes
Apakah Anda adalah coder produktif dengan banyak file yang terbuka? ST3 editor teks luar biasa memungkinkan Anda untuk melihat file secara berdampingan, sehingga Anda tidak perlu beralih antara file HTML dan dokumen CSS-nya:
Untuk melihat dua kolom (vertikal) panes side-by-side menggunakan shortcut ALT-UP-2 (PC) atau OPTION-⌘-2 (Mac). Ganti last stroke dengan "3" atau "4" untuk melihat tiga atau empat masing-masing panes. Menggunakan "5" menghasilkan grid 4 panes.
Untuk melihat dua baris (horizontal) panes side-by-side menggunakan shortcut SHIFT-ALT-UP-2 (PC) atau SHIFT-OPTION-⌘-2 (Mac). Ganti last stroke dengan "3" untuk melihat masing-masing 3 panes.
Kolom dibagi menjadi dua dengan menggunakan fitur Grup ST3
Jika Anda ingin membagi panel lebih jauh, Anda dapat menggunakan fitur "Grup" ST3, yaitu CTRL-K, SHIFT-CTRL-UP (PC) atau ⌘-K, SHIFT-⌘-UP (Mac) untuk membuat grup baru di dalam panel.
4. Package Control
ST3 hadir dengan banyak fitur di luar yang kita bayangkan, tetapi Anda dapat memperluas fungsinya lebih jauh dengan "packages"---plugin yang ditulis oleh komunitas ST3. Cara alternatif untuk menginstal paket-paket ini adalah dengan menggunakan Package Control. Untuk menginstalnya, ikuti petunjuk pemasangan di SINI.
Jika Kontrol Paket berhasil dipasang, Anda harus dapat mencari Package Control actions di Command Palette (CTRL/⌘-SHIFT-P):
Accessing Package Control from the Command Palette
Wajibnya Sublime Text 3 Packages
Catatan: Instal paket-paket ini melalui Package Control dengan membuka Command Pallette (CTRL / ⌘-SHIFT-P), pilih "Package Control: Install Package", dan cari paket berdasarkan namanya.
5. Penyempurnaan Sidebar
Sidebar Enhancements memperluas fungsionalitas sidebar ST3 dan memudahkan Anda menjangkau file dan folder yang biasanya tidak tersedia. Anda juga dapat mengelola berkas via panel ini.
Extended functionality with Sidebar Enhancement
6. Emmet
Emmet membuat pengkodean HTML jauh lebih mudah dengan menggunakan pintasan berdasarkan pemilih CSS. Apa artinya? Lihat sendiri di GIF di bawah ini:
Emmet tidak berhenti pada HTML tags, classes, & IDs. Teks Lorem ipsum adalah sesuatu yang banyak digunakan pengembang web. Seringkali mereka akan pergi ke generator ipsum lorem, tetapi dengan Emmet, cukup ketik lorem dan tab hit. Ingin sejumlah kata pengisi (seperti 100 kata lorem ipsum)? Gunakan lorem100 sebagai gantinya.
Emmet juga meluas ke CSS. Misalnya, awalan vendor CSS selalu merepotkan, jadi Emmet memungkinkan Anda menggunakan shorthand -bdrs untuk menetapkan radius perbatasan:
7. Git
Paket Git memungkinkan Anda menjalankan perintah Git (misalnya "Git Diff" atau "Git Blame") langsung dari Palet Perintah ST3.
Tidak paham apa itu Git, atau cara menggunakannya? Simak TAUTAN INI.
8. GitGutter
GitGutter menunjukkan penambahan, perubahan, dan penghapusan yang tidak terikat di samping nomor baris ST3:
9. SASS
ST3 tidak hadir dengan dukungan sintaks dan snippet SASS asli, tetapi paket ST3 "SASS" menambahkannya. Sangat disarankan untuk pengembang front-end tingkat lanjut dan programmer Ruby on Rails:
10. CoffeeScript Lebih Baik
Juga tidak ada dukungan sintaks dan snippet untuk CoffeeScript di ST3, jadi paket ini mengisi celah itu:
11. OSX Command Line Users
Jika Anda menggunakan Mac dan terminal, Sublime juga menyertakan alat baris perintah yang akan memungkinkan Anda untuk membuka editor teks langsung dari terminal. Jalankan perintah berikut di terminal Anda untuk mengatur pintasan ini:
ln -s "/Applications/Sublime Text.app/Contents/SharedSupport/bin/subl" ~/bin/sublIf you use Homebrew or /usr/local/bin is in your $PATH, the command to run is:
ln -s "/Applications/Sublime Text.app/Contents/SharedSupport/bin/subl" /usr/local/bin/subl
Keyboard Shortcuts
Mempelajari cara pintas keyboard ST3 masuk dan keluar akan membawa Anda dari pengguna Sublim ke pakar Sublime. Berikut beberapa favorit:
12. Multiple Cursors
Beberapa kursor adalah fitur pembunuh dari Sublime Text. Ini memungkinkan Anda mengetik di banyak tempat pada saat yang sama, menghemat waktu pengembangan Anda. Untuk memicu beberapa kursor, letakkan kursor Anda pada kata yang ingin Anda soroti dan tekan CTRL / ⌘-D sampai Anda telah memilih semua kata yang Anda inginkan. Anda juga dapat membuat beberapa kursor dengan CTRL / ⌘-MOUSECLICK di semua tempat yang Anda inginkan memiliki kursor.
13. Goto Anything
Serupa dengan palet perintah, ST3 memiliki fitur Goto Anything (diucapkan "go to") yang dapat membawa Anda ke file tertentu, garis, atau definisi metode. Tampilkan bilah pencarian Goto Anything dengan CTRL / ⌘-P. Untuk beralih antar file, mulailah mengetik nama file. Karena ini adalah pencarian yang kabur, permintaan pencarian tidak harus sama persis dengan nama dan Anda tidak perlu mengetikkan seluruh jalur file:
14. Goto Line in File
Goto Anything tidak hanya membawa Anda ke file, itu juga dapat membawa Anda ke baris tertentu di dalam file. Jika Anda ingin membuka baris di file saat ini, cukup buka Goto Anything dan ketikkan tanda titik dua diikuti oleh nomor baris (misalnya: 18 untuk baris 18). Untuk masuk ke garis di file lain, ketik nama file dan kemudian titik dua dan nomor baris:
15. Goto Definition in File
Jika Anda ingin pergi ke kelas, metode, atau definisi fungsi dalam file, Goto Anything memiliki sintaks yang sama seperti pergi ke garis. Alih-alih mengganti colon, Goto Definition menggunakan @. Anda akan mendapatkan daftar semua definisi dalam file yang Anda pilih dan mengetikkan nama satu dan menekan ENTER akan membawa Anda ke definisi yang ditentukan:
16. Distraction Free Mode
Terkadang menjadi coder yang paling produktif berarti menghilangkan semua gangguan. Tidak ada aplikasi lain, jendela, tab, sidebars, dan menu. Sublime menawarkan cara mudah untuk melakukan ini melalui Mode Bebas Distraksi. Trigger it menggunakan SHIFT-F11 (PC) atau ⌘-CTRL-SHIFT-F (Mac):
17. Sembunyikan / Tampilkan Sidebar
Sidebar memang berguna untuk menampilkan file dan struktur direktori Anda, tetapi terkadang Anda memerlukan sedikit ruang jendela untuk membuat kode. Menggunakan pintasan keyboard CTRL / ⌘-K, CTRL / ⌘-B (dalam urutan ini) akan mengalihkan sidebar. Ingat bilah sisi hanya dapat dilihat jika Anda memiliki banyak file atau folder yang terbuka.
18. Cepat Komentari Kode Anda
Ini adalah kiat berguna jika Anda terus-menerus mengomentari kode Anda atau untuk menguji sementara cara menonaktifkan blok kode memengaruhi proyek Anda. Untuk mengomentari kode dengan cepat di ST3, sorot kode dan gunakan CTRL / ⌘- /. Jika Anda tidak menyorot kode apa pun, menggunakan pintasan ini akan mengomentari seluruh baris.
Memilih Teks
Kami telah melihat cara memilih kata (CTRL / ⌘-D) tetapi ada beberapa opsi pilihan yang berguna lainnya di ST3.
19. Memilih Garis Keseluruhan
Untuk memilih seluruh baris saat ini: CTRL / ⌘-L.
20. Memilih Kode yang Similarly Indented (se-Elemen)
Untuk memilih semua kode yang memiliki indentasi (se-elemen dengan kedudukan yang sama) langsung: CTRL / ⌘-SHIFT-J.
Indentasi dalam kbbi bisa diartikan se-anggota dalam satu paragraph (dimulai sejak menjorok ke dalam).
21. Memilih Segalanya Di Dalam Tag HTML
Untuk memilih semua yang ada di dalam tag HTML saat ini: CTRL / ⌘-SHIFT-A.
22. Inden dengan cepat
Pengembang tahu pentingnya indentasi karena membuat kode Anda terbaca dan lebih mudah dipahami. Jika Anda ingin meningkatkan indentasi baris saat ini, gunakan CTRL / ⌘-]. Penurunan indent menggunakan kunci braket persegi lainnya (CTRL / ⌘- [).
23. Pasting dengan Indentation
Ketika Anda menyalin / memotong kode indentasi dan ingin memiliki tingkat indentasi dipertahankan saat menempel, gunakan CTRL / ⌘-Shift-V untuk menempel dengan indentasi.
24. Beralih Garis
Pernahkah Anda menulis kode, hanya untuk menyadari bahwa garis-garis tertentu rusak? ST3 memiliki pintasan hemat waktu yang memungkinkan Anda memindahkan baris tertentu ke atas atau ke bawah dalam dokumen. CTRL-SHIFT-UP (PC) atau CTRL-⌘-UP (Mac) memindahkan satu baris ke atas, sementara CTRL-SHIFT-DOWN (PC) atau CTRL-⌘-DOWN (Mac) memindahkan satu baris ke bawah.
25. Menghapus Baris
Untuk saat-saat ketika baris kode tidak rusak, tetapi hanya perlu dihapus, ST3 memiliki cara pintas praktis untuk menghapus garis tanpa harus memilih seluruh baris. CTRL-SHIFT-K (PC dan Mac) akan menghapus baris saat ini kursor Anda aktif.
Setelah Anda menguasai Teks Sublime 3, Anda dapat fokus untuk menulis kode hebat dan menjadi programmer yang lebih baik. Terus belajar dengan kelas video online yang diajarkan oleh para ahli tentang topik dalam pengkodean, bisnis, dan desain.
Mulailah dalam pengembangan web dengan pelatihan Pengembangan Web Impersif kami.
Menjalankan Code di IdeOne Compiler Online
Ideone adalah kompilator online yang menarik ratusan ribu pengguna setiap bulan.
Tetapi apakah Anda tahu teknologi yang menggerakkan Ideone?
Kompiler favorit Anda berjalan menggunakan Sphere Engine™, teknologi eksklusif yang membawa Anda jauh lebih banyak kemungkinan daripada hanya eksekusi kode.
- Sphere Engine™ mengeksekusi kode Anda di server jarak jauh berkat API sederhana.
- Sphere Engine™ mendukung lebih dari 60 bahasa pemrograman, yang terus diperbarui dan dilengkapi dengan pustaka populer dan non-standar.
- Sphere Engine™ bekerja dalam lingkungan waktu proses yang lengkap & aman.
- Sphere Engine™ hadir dengan modul opsional dan Sistem Manajemen Konten untuk mengatur tantangan pemrograman dan kontes pemrograman.
- Sphere Engine™ digunakan secara komersial di: rekrutmen, pelatihan & sertifikasi, pendidikan, kontes pemrograman & hackathon,
Bayangkan berapa banyak hal yang dapat Anda lakukan dengan teknologi canggih ini dalam melayani perusahaan Anda! Anda dapat mencobanya secara gratis: kunjungi www.sphere-engine.com untuk melihat versi demo dalam tindakan, baca dokumentasi lengkap, dan API.