‫-: Jadi bagian ini dan proyek bentuk simpul sekarang
‫pada dasarnya telah selesai,
‫tetapi dalam video ini saya
‫ingin dengan cepat membahas pengaturan kode
‫VS saya dan juga bersama-sama dengan Anda mengatur ekstensi Prettier.
‫Jadi ini adalah ekstensi yang telah saya pasang di
‫kode VS saya dan tidak semuanya akan relevan
‫untuk kursus
‫ini, tetapi setiap kali ada ekstensi
‫yang relevan, saya akan menyebutkannya saat itu berguna.
‫Misalnya ini. ekstensi env di sini akan
‫berguna untuk menyoroti variabel lingkungan dalam file . n berkas.
‫Jadi mari kita cepat membahas beberapa dari mereka.
‫Misalnya ESLint berguna untuk menemukan bug dalam kode kita dan
‫sebenarnya kita akan menyiapkan ESLint dengan node
‫nanti di bagian lain.
‫Kami memiliki pratinjau gambar yang merupakan ekstensi
‫kecil yang sangat bagus untuk melihat pratinjau gambar.
‫Dan mungkin Anda telah memperhatikan bahwa ketika kami melakukan ini, misalnya, sampel
‫di sini
‫Anda melihat bahwa di sini di sisi kiri ini
‫menampilkan semua gambar yang kami sertakan dalam sebuah situs web.
‫Jadi dalam contoh ini adalah yang ini.
‫Baiklah, jadi hanya sesuatu yang kecil yang menurut saya sangat berguna.
‫Apa lagi yang kita punya di sini?
‫Kami memiliki Lebih Cantik dan ini adalah salah
‫satu yang ingin saya konfigurasikan dengan Anda di video ini,
‫tetapi untuk sekarang mari kita bahas yang
‫lain di sini.
‫Jadi Pug adalah bahasa yang akan kita gunakan
‫nanti untuk
‫membuat template dan jadi berguna untuk
‫memiliki ekstensi mempercantik ini juga.
‫Lalu saya juga memiliki TabNine, yang terkadang melakukan beberapa pelengkap
‫otomatis ajaib yang bagus.
‫Lalu saya juga punya TODO
‫Highlight, yang sangat berguna untuk
‫melakukan sulap semacam ini
‫di sini.
‫Misalnya ketika saya
‫memiliki TODO, itu akan menyorotnya dalam warna hijau
‫ini atau jika saya menulis BUG
‫seperti ini akan berubah menjadi
‫merah atau FIXME dan
‫saya memiliki semua jenis kata kunci ini di sini
‫yang harus saya temukan warna
‫yang berbeda untuk membuatnya terlihat dalam kode saya.
‫Dan itu bahkan muncul di sini di
‫bilah gulir ini.
‫Jika saya memiliki ini
‫di baris yang berbeda, maka Anda akan melihat
‫tiga warna sekarang di sini di
‫sisi ini dan ini sangat berguna.
‫Baiklah.
‫Dan tentu saja
‫tema
‫kode VS saya, yaitu
‫Oceanic Next, jadi saya mendapatkan
‫pertanyaan ini sepanjang waktu dan
‫alih-alih menanyakannya dengan baik, inilah jawabannya.
‫Baiklah.
‫Tapi sekarang
‫tentang di mana
‫itu?
‫Jadi Lebih Cantik ini
‫adalah ekstensi yang sangat bagus yang
‫dapat secara otomatis memformat kode,
‫tidak peduli apakah JavaScript
‫atau CSS atau
‫bahkan HTML.
‫Dengan ekstensi ini kita tidak perlu lagi
‫khawatir tentang format.
‫Dan itu sebenarnya sangat
‫berpendirian, sehingga mengikuti seperangkat aturan yang
‫sangat ketat dengan hanya konfigurasi kecil yang memungkinkan.
‫Tetapi dalam kasus pemformatan kode ini,
‫sebenarnya sangat menyenangkan ketika orang lain
‫mengambil keputusan ini untuk Anda.
‫Jadi itu adalah satu hal yang kurang perlu kita khawatirkan untuk dilakukan.
‫Oke, jadi kode kita akan
‫secara otomatis memformat tanpa kita harus melakukan
‫apa pun atau mengkhawatirkan gaya tertentu.
‫Oke?
‫Jadi jika Anda
‫ingin mencobanya, silakan dan instal sekarang di sini.
‫Mungkin Anda memiliki tombol instal.
‫Saya, tentu saja, sudah menginstalnya.
‫Selanjutnya apa yang perlu Anda lakukan untuk mendapatkan kekuatan penuh
‫dari ekstensi ini
‫adalah pergi ke pengaturan Anda
‫dan kemudian aktifkan Format pada Simpan.
‫Jadi tinggal
‫cari format lalu Format on Save.
‫Jadi setiap kali kita menyimpan file
‫sekarang secara otomatis akan menggunakan Prettier untuk memformat kode kita.
‫Jadi kami menginstal Prettier.
‫Kami mengaktifkan Format pada Simpan.
‫Dan sekarang kita dapat mengonfigurasi Prettier sedikit.
‫Sekali lagi,
‫seperti yang saya sebutkan itu sangat berpendirian.
‫Jadi tidak banyak hal yang bisa kita
‫ubah tetapi beberapa hal yang sebenarnya bisa kita ubah.
‫Sekarang kita dapat melakukannya di
‫sini, tepat dalam kode
‫VS,
‫tetapi yang juga dapat kita lakukan adalah mendefinisikan file konfigurasi.
‫Oke?
‫Dan saya menemukan itu sebenarnya lebih baik untuk dilakukan.
‫Jadi, alih-alih menggunakan kode VS untuk menentukan pengaturan,
‫kita dapat menggunakan konfigurasi Prettier,
‫yang
‫disebut Prettier RC.
‫Baiklah, jadi ada titik kemudian lebih
‫cantik rc.
‫Kemudian kita buka kurung kurawal
‫dan kemudian di sini kita dapat menentukan beberapa pengaturan.
‫Dan saya merasa lebih baik melakukannya seperti ini
‫karena saya dapat mengubah konfigurasi
‫dari satu proyek ke proyek lainnya.
‫Dan yang
‫lebih penting lagi, ini memudahkan banyak pengembang
‫yang tergabung dalam tim yang sama untuk menggunakan konfigurasi yang sama.
‫Oke, jadi itu bisa sangat berguna di tim.
‫Bahkan lebih berguna daripada saat Anda hanya bekerja sendiri.
‫Sekarang satu-satunya pengaturan yang benar-benar ingin saya ubah di
‫sini disebut kutipan tunggal.
‫Jadi sebenarnya Prettier sudah memiliki pelengkapan otomatis
‫ini sehingga ia tahu bahwa single akan berarti
‫kutipan tunggal.
‫Dan defaultnya salah, tetapi saya ingin menyetelnya ke true.
‫Jadi apa yang akan dilakukan adalah semua kutipan saya
‫akan berubah dari tanda kutip ganda menjadi tanda kutip tunggal, oke?
‫Jadi saya menyimpannya dan ini adalah
‫file index. js.
‫Dan sekarang mari kita lihat apakah ada tanda kutip ganda di sini
‫dan saya
‫pikir tidak karena saya cukup konsisten menggunakan tanda kutip tunggal.
‫Tapi mari kita beri tanda kutip ganda di suatu tempat di sini
‫dan sekarang saya akan
‫menyimpannya dan melihat apa yang terjadi.
‫Wah.
‫Jadi pertama-tama Anda melihat bahwa banyak hal berubah di
‫sini dan kode kami melompat-lompat di sini,
‫tetapi di sinilah saya memiliki tanda kutip tunggal di sini.
‫Jadi Anda melihat bahwa mereka kembali menjadi tanda kutip ganda.
‫Sekarang semua kode ini melompat-lompat mungkin
‫karena pada titik tertentu saya memiliki banyak baris.
‫Dan Prettier tidak mengizinkan itu.
‫Jadi jika saya memiliki sesuatu seperti ini dan
‫menyimpannya maka Prettier hanya akan mengizinkan satu baris kosong.
‫Dan sebenarnya ini adalah perubahan tersulit dari
‫semua pemformatan yang dilakukan Prettier.
‫Dan itu tidak dapat
‫dikonfigurasi sehingga sayangnya kami tidak dapat mengubahnya.
‫Karena terkadang saya suka memiliki banyak baris, tetapi
‫dengan Prettier itu tidak mungkin.
‫Saya bisa melakukan sesuatu seperti ini dan
‫kemudian itu akan berhasil tetapi itu hanya pekerjaan sekitar.
‫Tapi tetap saja dengan masalah ini saya lebih suka menggunakan Prettier.
‫Sekali lagi karena dibutuhkan pemikiran untuk memformat
‫darinya.
‫Misalnya, hal lain yang saya lakukan di sini adalah ini.
‫Jadi, setiap kali jumlah karakter tertentu dalam satu
‫baris terlampaui,
‫ia akan menemukan cara yang baik untuk memecah
‫kode menjadi beberapa baris.
‫Dan itulah yang dilakukannya di sini.
‫Mari kita lihat apa lagi yang kita miliki di sini.
‫Yah saya
‫pikir untuk mungkin selain perubahan ini kami
‫hanya mengajarkan segala sesuatunya tetap sama.
‫Oke dan mulai sekarang di semua sisa kode dalam
‫kursus
‫ini, saya akan selalu menggunakan file konfigurasi PrettierRC ini
‫dengan auto save on true.
‫Oke.
‫Hal lain yang
‫tidak saya sebutkan adalah secara otomatis menempatkan titik koma, jadi
‫jika saya melanjutkan dan menghapus yang ini,
‫dan yang ini, dan yang ini.
‫Berikan simpanan.
‫Anda melihat bahwa mereka kembali.
‫Baiklah?
‫Sekarang jika Anda ingin
‫mendapatkan gambaran umum tentang semua hal yang dapat Anda
‫konfigurasikan dengan Prettier, itu sangat sederhana jika kita menulis Prettier ke Google.
‫Jadi mereka memposisikan diri mereka sebagai pemformat kode yang berpendirian.
‫Dan seperti yang
‫saya katakan sebelumnya dan di bawah ini kami memiliki opsi
‫yang sebenarnya dapat kami konfigurasikan.
‫Jadi lebar cetak.
‫Lebar tab.
‫Jadi jika Anda salah satu dari orang-orang ini yang menggunakan
‫empat lebar, yang sebenarnya saya gunakan sampai baru-baru ini, seperti
‫satu tahun yang lalu.
‫Kalau begitu Anda dapat mengonfigurasinya menggunakan lebar tab yang Anda
‫miliki misalnya tanda kutip yang baru saja kami ubah.
‫Jadi kutipan tunggal kami nyatakan dan Anda memiliki
‫semua jenis barang.
‫Anda benar-benar dapat melihatnya di sini di sisi kanan, oke?
‫Tapi sekali lagi, itu tidak banyak konfigurasi.
‫Jadi sebagian besar hal yang Anda benar-benar tidak bisa berubah.
‫Hal lain yang bisa kita coba adalah lebar tab.
‫Jadi mari kita lihat yang ini, saya pikir defaultnya adalah 80.
‫Mari kita atur ke sesuatu seperti 120.
‫Dan saya
‫pikir ini akan mengubah potongan kode di sini, jadi kembali ke
‫apa yang kita miliki sebelumnya, semuanya
‫dalam satu baris.
‫Hanya untuk menunjukkan padamu.
‫Tapi mungkin garis kita sebenarnya lebih panjang dari itu.
‫Jadi mari kita taruh sesuatu yang sangat konyol di sini seperti 200
‫dan wah!
‫Apa yang sedang terjadi disini?
‫Ah! Jadi Anda lihat bahwa sebenarnya
‫sekarang diubah menjadi sesuatu yang lebih aneh.
‫Oke jadi saya tidak pernah melakukan semacam eksperimen.
‫Kembalikan ke 120 dan apa yang
‫terjadi di sini?
‫Biarkan saya cepat memperbaiki ini.
‫Dan itu terjadi lagi, baiklah.
‫Masukkan kembali ke 80 seperti
‫yang kita miliki dan sekarang terlihat seperti ini.
‫Oh
‫ya!
‫Oh maafkan saya.
‫Bukan itu yang ingin saya lakukan.
‫Tentu saja saya tidak ingin mengubah lebar
‫tab ketika default saya adalah dua.
‫Saya ingin mengubah lebar cetak.
‫Jadi pada dasarnya seberapa lebar satu garis bisa.
‫Oh itu benar-benar bodoh.
‫Jadi sekarang sudah kembali normal karena defaultnya adalah dua.
‫Jadi ya sekarang Anda dapat melihat bahwa itu sebenarnya kembali
‫ke satu baris di sini karena pada titik ini di sini kita berada di
‫kolom 96.
‫Seperti yang Anda lihat di sini dan batasnya adalah 120.
‫Jadi itu tidak harus membungkus baris kode ini
‫ke yang kedua.
‫Oke?
‫Tapi saya sebenarnya menyukai batas 80 ini dan
‫saya akan meletakkannya kembali di
‫sini dan menggunakannya di masa mendatang.
‫Jadi saya menyesuaikan default jadi biarkan saya menyingkirkannya.
‫Berikan simpanan.
‫Dan kita kembali seperti semula.
‫Jadi jika Anda berpikir
‫bahwa Anda menyukai ini, silakan lanjutkan dan gunakan seperti yang saya lakukan.
‫Tapi jika tidak, maka abaikan saja semua yang saya katakan
‫di video ini dan
‫terus lakukan dengan cara yang lebih normal.
‫Jadi itu juga tidak masalah.