Begitu Anda mulai mengembangkan situs, alat pertama yang akan Anda gunakan adalah editor teks, baik itu sederhana seperti {i>notepad<i} atau versi penuh IDE.
Dalam episode ini, Addy & Matt melihat koleksi plugin mereka untuk Sublime Text dan diskusikan bagaimana masing-masing alat membantu alur kerja mereka.
Kontrol Paket
Untuk mendapatkan paket (atau plugin) yang dirujuk dalam episode, Anda harus menginstal Package Control, ini bagus dan sederhana dan Anda dapat menemukan petunjuk tentang cara melakukannya di sini.
JSHint
JSHint adalah linter JavaScript yang memeriksa JavaScript Anda dan menyoroti setiap kemungkinan kesalahan atau praktik buruk dalam kode Anda.
Misalnya, jika Anda secara 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 dan menempatkan kursor di bit kode tersebut akan menyebabkan error yang ditampilkan di kiri bawah Sublime.
Masalah lain yang akan terdeteksi 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 penginstalannya petunjuk di halaman Paket SublimeLinter-JSHint.
Beberapa developer mungkin akan merasa terbantu jika menyertakan Gutter JSHint plugin. Perintah ini menempatkan titik kecil di {i>gutter<i} dari setiap baris dengan masalah JSHint.
JSCS
JSCS akan menandai tempat di mana JavaScript Anda tidak mengikuti gaya pengkodean tertentu.
Misalnya, JSCS dapat digunakan untuk menentukan apakah spasi 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 menyorot masalah apa pun yang sebaris dengan gaya yang mirip dengan JSHint sehingga memudahkan untuk memperbaiki masalah.
Hal ini sangat membantu saat bekerja di karena semua orang dapat mengikuti panduan gaya yang sama dan menjaga kode Anda tetap konsisten.
Bagian 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'
dan menekan enter. Anda mempelajari lebih lanjut di postingan blog Addy.
Penyorot Warna
Penanda warna akan menambahkan warna ke latar belakang definisi warna di CSS atau Sass.
Anda dapat menentukan apakah gambar ditampilkan sebagai garis bawah dengan latar belakang penuh ketika Anda mengarahkan kursor ke atasnya atau selalu menampilkan warna pada latar belakang definisi. Cukup buka 'Setelan Paket' > 'Penanda Warna' > 'Setelan - Default' untuk melihat setelan awal dan mengubah setelan dalam 'Setelan - Pengguna'.
Untuk penyorotan latar belakang penuh tambahkan berikut ini ke kolom 'Setelan - Pengguna' file:
{
"ha_style": "filled"
}
Warna Gutter
Warna Gutter adalah alternatif untuk penyorot warna, alih-alih menunjukkan warna di atas variabel warna, ia menempatkan warna di {i>gutter <i}dari garis tersebut.
Pemilih Warna
Jika Anda membutuhkan cara cepat dan mudah untuk memilih warna dari layar Anda lalu Color Picker Package mungkin tepat untuk Anda.
Tekan ctrl + shift + c dan bunyi - Anda punya pemilih warna.
AutoFileName
AutoFileName adalah sebuah {i>plugin<i} kecil sederhana yang memberi Anda daftar file yang mungkin saat Anda mengetik. Ini sangat berguna jika Anda mencoba mengetik nama gambar atau tambahkan file CSS atau JS karena akan menghemat waktu Anda dan yang lebih penting lagi, mengurangi risiko salah ketik.
Awalan otomatis
Kita semua pernah menyadari momen di mana kita lupa untuk tambahkan properti CSS berawalan. Dengan Awalan otomatis Anda cukup menjalankannya di CSS Anda dan itu akan tambahkan semua awalan yang Anda butuhkan.
Artinya kita beralih dari ini..
.container-thingy {
display: flex;
flex-direction: column;
align-items: flex-start;
}
..ke yang berikut, hanya dengan menekan ctrl + shift + p dan mengetik
'CSS awalan otomatis' dan menekan tombol 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 Anda inginkan yang perlu didukung dalam pengaturan paket. Lihat halaman Kontrol Paket 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 lihat dek slide bagus dari WesBos pintasan keyboard dan plugin lainnya untuk Sublime Text.
WesBos juga telah menulis buku berjudul 'Sublime Text for the Power User' yang mungkin menarik bagi Anda, orang-orang hebat :)