Begitu Anda mulai mengembangkan situs, alat pertama yang akan Anda gunakan adalah editor teks, baik sesederhana Notepad maupun IDE yang telah dimodifikasi sepenuhnya.
Dalam episode ini, Addy & Matt melihat koleksi plugin mereka untuk Sublime Text dan membahas bagaimana masing-masing plugin membantu alur kerja mereka.
Kontrol Paket
Untuk mendapatkan paket (atau plugin) yang dirujuk dalam episode ini, Anda harus menginstal Package Control, yang bagus dan mudah diinstal, dan Anda dapat menemukan petunjuk cara melakukannya di sini.
JSHint
JSHint adalah linter JavaScript yang memeriksa JavaScript Anda dan menandai setiap kemungkinan error atau praktik buruk dalam kode Anda.
Misalnya, jika Anda tidak sengaja salah mengetik nama variabel, seperti di bawah, JSHint akan menunjukkan bahwa fo tidak pernah ditentukan dan akan menyebabkan error.
var foo = { bar: 'Hello, World.' };
var msg = fo.bar;
Plugin JSHint menunjukkan masalah dengan menampilkan kotak kuning di sekitar teks yang relevan dan menempatkan kursor dalam sedikit kode akan menghasilkan pesan error yang ditampilkan di kiri bawah Sublime.
Masalah lain yang akan tercakup adalah:
- Variabel yang ditentukan tetapi tidak pernah digunakan
- Menghindari pembuatan fungsi di dalam loop
- Menggunakan metode perbandingan yang tepat
Untuk menginstal Paket SublimeLinter-JSHint, Anda juga harus menginstal paket SublimeLinter dan mengikuti petunjuk penginstalan di halaman Paket SublimeLinter-JSHint.
Beberapa developer mungkin juga terbantu dengan menyertakan plugin JSHint Gutter. Fungsi ini menempatkan titik kecil di {i>gutter<i} pada baris mana pun yang memiliki masalah JSHint.
JSCS
JSCS akan menandai area mana pun saat JavaScript Anda tidak mengikuti gaya coding tertentu.
Misalnya, JSCS dapat digunakan untuk menentukan apakah spasi harus digunakan setelah kata kunci, seperti 'if', atau menentukan apakah tanda kurung kurawal harus berada di baris yang sama atau baris baru dari suatu metode.
Paket SublimeLinter-JSCS menyoroti setiap masalah secara inline dengan gaya yang mirip dengan JSHint sehingga memudahkan perbaikan masalah apa pun.
Cara ini sangat membantu dalam bekerja dalam tim karena semua orang dapat mengikuti panduan gaya yang sama dan menjaga kode Anda tetap konsisten.
Bit terbaiknya adalah, dengan paket JSCS-Formatter Anda dapat secara otomatis memperbaiki masalah apa pun di halaman dengan menekan ctrl + shift + p, mengetik 'JSCS Formatter: Format this file', lalu menekan enter. Anda mempelajari lebih lanjut di postingan blog Addy.
Stabilo Warna
Penanda warna akan menambahkan warna ke latar belakang definisi warna apa pun di CSS atau Sass.
Anda dapat menentukan apakah warna akan ditampilkan sebagai garis bawah dengan latar belakang penuh saat Anda mengarahkan kursor ke atasnya atau selalu menampilkan warna di latar belakang definisi. Cukup buka 'Setelan Paket' > 'Color Highlight' > 'Setelan - Default' untuk melihat setelan awal dan ubah setelan Anda di 'Setelan - Pengguna'.
Untuk sorotan latar belakang lengkap, tambahkan kode berikut ke file 'Setelan - Pengguna':
{
"ha_style": "filled"
}
Warna Talang
Warna Gutter adalah alternatif untuk penyorot warna, bukan menampilkan warna di atas variabel warna, warna ini akan menempatkan warna di gutter garis tersebut.
Pemilih Warna
Jika Anda membutuhkan cara yang cepat dan mudah untuk memilih warna dari layar, Paket Pemilih Warna mungkin cocok untuk Anda.
Tekan ctrl + shift + c dan boom - Anda mendapatkan pemilih warna.
AutoFileName
AutoFileName adalah plugin kecil sederhana yang menyediakan daftar file yang dapat digunakan saat Anda mengetik. Cara ini sangat berguna jika Anda mencoba mengetik nama gambar atau menambahkan file CSS atau JS karena akan menghemat waktu dan yang lebih penting lagi, mengurangi risiko salah ketik.
Autoprefier
Kita semua pernah mengalami momen di mana kita lupa menambahkan properti CSS dengan awalan. Dengan Autoprefixer, Anda cukup menjalankannya di CSS dan kode ini akan menambahkan semua awalan yang Anda butuhkan.
Berarti kita harus memulai dari ini..
.container-thingy {
display: flex;
flex-direction: column;
align-items: flex-start;
}
..ke berikut ini, cukup dengan menekan ctrl + shift + p lalu mengetik
'Autoprefix CSS', lalu menekan enter.
.container-thingy {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-align-items: flex-start;
-ms-flex-align: start;
align-items: flex-start;
}
Anda juga dapat menentukan browser dan versi browser yang ingin didukung pada setelan paket. Lihat halaman Package Control untuk mengetahui info selengkapnya.
Lainnya...
Ada banyak plugin lain yang tersedia untuk Sublime Text, jadi pastikan untuk mempelajari Package Control.
Untuk saran dan tips lainnya, Anda harus melihat kumpulan slide yang bagus dari WesBos tentang pintasan keyboard dan plugin lainnya untuk Sublime Text.
WesBos juga telah menulis buku berjudul 'Sublime Text for the Power User' yang mungkin juga menarik bagi Anda orang-orang hebat :)