‫-: Sebelum melanjutkan ke
‫bagian berikutnya dan mongoDB, saya ingin menunjukkan kepada
‫Anda cara mengatur eslint bersama dengan kode vs yang
‫lebih cantik untuk meningkatkan kualitas kode kami.
‫Sekarang jika Anda tidak menggunakan
‫kode vs, atau jika Anda sudah memiliki
‫semacam linter dalam alur kerja Anda, tandai kuliah ini sebagai
‫selesai dan lanjutkan ke bagian berikutnya.
‫Tetapi jika Anda baru mengenal
‫es Lint, dan ingin meningkatkan kualitas kode
‫Anda, mari kita mulai dengan video ini.
‫Jadi es Lint pada dasarnya adalah sebuah
‫program yang terus-menerus memindai kode
‫kita dan menemukan potensi
‫kesalahan pengkodean atau sekadar praktik pengkodean buruk yang dianggap salah.
‫Ini sangat, sangat dapat dikonfigurasi sehingga
‫kami benar-benar dapat menyesuaikannya dengan kebutuhan
‫kami, dan kebiasaan pengkodean.
‫Sekarang kita juga dapat menggunakan es Lint untuk pemformatan kode, tetapi
‫kita akan terus menggunakan lebih
‫cantik yang telah kita siapkan sebelumnya untuk itu.
‫Jadi kita akan mengatur semua
‫ini agar lebih cantik tetap menjadi pemformat kode utama tetapi
‫berdasarkan beberapa aturan es Lint yang akan
‫kita definisikan.
‫Jadi yang akan dilakukan es Lint untuk
‫kita adalah menyoroti kesalahannya.
‫Tetapi saya tahu bahwa semua
‫ini mungkin terdengar lebih membingungkan daripada yang lainnya.
‫Jadi mari kita atur ini sekarang.
‫Jadi hal pertama yang saya
‫ingin Anda lakukan adalah menginstal ekstensi es Lint untuk vs Code.
‫Jadi datang ke sini, dan cari es Lint.
‫Oke?
‫Dan saya sudah
‫menginstalnya, tetapi tampilannya seperti ini.
‫Jadi yang perlu Anda lakukan
‫adalah melanjutkan dan menginstalnya, dan kemudian mungkin memuat ulang jendela ini.
‫Dan jika Anda belum menyiapkan Prettier, lanjutkan
‫dan lakukan itu juga.
‫Jadi dengan ekstensi ini di
‫sini, tapi yang ini sebenarnya sudah
‫kita lakukan di bagian pertama jika Anda mengikutinya bersama saya.
‫Selanjutnya, kita perlu menginstal banyak dependensi dev jadi mari kita
‫buat ini di sini jauh lebih besar dan pergi
‫ke terminal kami yang lain di sini.
‫Jadi katakanlah, npm install dan kita juga perlu menginstal es
‫Lint dengan lebih cantik sebagai paket npm.
‫Oke?
‫Sangat Lint dan lebih
‫cantik, dan mungkin ini
‫adalah pertama kalinya
‫kami benar-benar menginstal beberapa paket sekaligus.
‫Dan itu sangat mudah, kita cukup menulis semua
‫paket ini dalam perintah yang sama.
‫Oke?
‫Tapi dengan dua ini kami sebenarnya jauh dari siap.
‫Jadi yang berikutnya adalah es Lint config prettier dan
‫yang ini akan menonaktifkan pemformatan untuk es
‫Lint, karena ingat, kita ingin lebih cantik memformat kode kita.
‫Selanjutnya kita memiliki plugin es Lint yang lebih
‫cantik dan yang ini akan
‫memungkinkan es Lint untuk menampilkan kesalahan pemformatan saat kita
‫mengetik, sekali lagi, menggunakan lebih cantik.
‫Oke?
‫Dan semua ini tentu saja sangat
‫membingungkan dan saya membutuhkan banyak waktu untuk memahaminya.
‫Jadi ini benar-benar hanya resep yang perlu
‫Anda ikuti di sini.
‫Oke?
‫Jadi ini bukan tentang
‫memahami apa yang saya lakukan di
‫sini, yang perlu Anda lakukan hanyalah mengikuti
‫resep ini, dan itu akan berhasil untuk proyek ini, dan
‫di proyek mendatang yang harus Anda
‫lakukan adalah membuka file paket dot json Anda dan salin
‫konfigurasi itu dan instal di proyek Anda berikutnya.
‫Karena sebenarnya, semua paket
‫ini harus diinstal secara lokal.
‫Ini tidak akan berhasil jika kita
‫mencoba melakukan ini secara global.
‫Baiklah?
‫Bagaimanapun, sekarang kita membutuhkan beberapa panduan gaya pekerjaan yang baik yang
‫bisa kita ikuti.
‫Dan ada banyak panduan gaya di
‫luar sana, tetapi
‫yang paling populer mungkin adalah panduan gaya airbnb.
‫Dan sebenarnya, ada konfigurasi es
‫Lint yang bisa kita gunakan untuk
‫itu, yaitu di npm, dan itu disebut eslint config airbnb.
‫Oke, selanjutnya, kita memiliki node plugin eslint, dan ini
‫akan menambahkan beberapa aturan eslint khusus hanya
‫untuk nodejs, oke?
‫Jadi pada dasarnya untuk menemukan
‫beberapa kesalahan yang mungkin kita lakukan saat menulis kode nodejs.
‫Dan sekarang akhirnya, kita membutuhkan tiga plugin eslint lainnya
‫yang hanya diperlukan untuk membuat panduan gaya
‫airbnb benar-benar berfungsi.
‫Jadi panduan gaya itu, tergantung pada ini.
‫Jadi plugin eslint, impor, eslint,
‫plugin, jsx,
‫a11y,
‫dan
‫saya
‫melihat bahwa saya
‫memiliki kesalahan di sini.
‫Dan akhirnya eslint,
‫plugin, bereaksi.
‫Meskipun kami tidak menulis kode reaksi di sini,
‫kami masih membutuhkan yang ini
‫karena panduan gaya airbnb bergantung padanya.
‫Jadi ini semua paket, saya harap
‫saya menulisnya dengan benar.
‫Dan sekarang kita perlu menyimpan ini sebagai dependensi
‫dev, jadi simpan dev dan sekarang
‫tekan kembali, dan silangkan jari Anda bahwa semuanya akan bekerja di sini.
‫Jadi, sepertinya memang begitu.
‫Mari kita lihat paket kami
‫dot json dan, memang, di sini kami memiliki semua paket ini.
‫Besar.
‫Sekarang langkah selanjutnya adalah kita
‫membutuhkan file konfigurasi untuk lebih cantik dan es lint, bukan?
‫Dan kami sudah membuat satu untuk lebih cantik sebelumnya dan
‫itu sudah ada di proyek kami di sini.
‫Begitu juga yang ini, dan yang
‫saya lakukan di sini adalah mengatakan bahwa saya selalu menginginkan kutipan tunggal.
‫Oke?
‫Dan yang lainnya adalah file konfigurasi untuk es lint,
‫dan sekali lagi itu sudah ada di
‫file startup karena kita tidak perlu membuang
‫waktu hanya untuk menulis
‫file konfigurasi yang mengerikan ini, bukan?
‫Jadi file sudah
‫ditulis, mari kita selesaikan dengan sangat cepat.
‫Jadi di
‫sini kami menyatakan kami ingin
‫menggunakan panduan gaya airbnb,
‫dan juga lebih cantik, dan juga plugin node, oke?
‫Sekarang esl int adalah semua tentang aturan pengkodean
‫dan ada banyak aturan yang es lint
‫coba terapkan pada kita.
‫Tapi kita sebenarnya bisa
‫mengubah yang ingin kita gunakan, satu per satu.
‫Dan kami dapat mematikannya
‫sepenuhnya atau hanya menampilkan peringatan alih-alih menampilkan kesalahan.
‫Misalnya, satu aturan adalah bahwa eslint tidak
‫ingin kita menggunakan konsol dot log dalam kode kita,
‫dan setiap kali secara default itu akan memberi kita
‫kesalahan saat kita menggunakan
‫konsol dot log.
‫Tetapi alih-alih menunjukkan kesalahan
‫kepada saya, saya mengonfigurasinya sehingga hanya menunjukkan peringatan kepada
‫saya, jadi itu sebabnya kami memperingatkan.
‫Saya juga dapat sepenuhnya
‫menonaktifkannya dengan menghapusnya, seperti yang
‫saya lakukan dengan banyak aturan lain ini.
‫Jadi, misalnya, di sini di sini
‫yang mengatakan bahwa setiap
‫fungsi harus selalu mengembalikan sesuatu, oke?
‫Dan terkadang, kami hanya memiliki fungsi
‫yang tidak, jadi saya harus mematikan aturan ini sepenuhnya.
‫Atau akhirnya, kami juga memiliki,
‫misalnya, aturan ini di sini, yang mengatakan
‫bahwa tidak boleh ada variabel yang kami deklarasikan tetapi tidak digunakan.
‫Ini sebenarnya menangkap banyak bug, jadi
‫saya membiarkannya sebagai kesalahan di sini, tetapi
‫saya juga membuat beberapa pengecualian.
‫Jadi, empat pengecualian di sini yang merupakan variabel
‫khas yang kami miliki
‫di express, jadi
‫di handler kami di express, tapi itu tidak selalu kami gunakan.
‫Benar?
‫Jadi saya tidak ingin ini ditandai sebagai kesalahan
‫setiap kali saya memiliki,
‫misalnya, variabel req dalam suatu fungsi, tetapi saya tidak menggunakannya.
‫Oke?
‫Jadi Anda dapat melihat aturan lain di sini dan
‫memutuskan mana yang Anda
‫suka, dan mana yang tidak.
‫Jadi ini adalah aturan yang masuk akal bagi saya,
‫tetapi tentu saja mungkin berbeda untuk Anda.
‫Mari kita segera pergi ke situs web
‫eslint untuk melihat semua hal
‫yang dapat Anda konfigurasikan.
‫Jadi es lint, maka di sini Anda memiliki beberapa dokumentasi dan beberapa instruksi
‫tentang bagaimana Anda dapat mengonfigurasinya, tetapi yang ingin
‫saya tunjukkan hanyalah
‫semua aturan yang berbeda ini.
‫Jadi Anda memiliki semuanya
‫di sini dan jadi Anda lihat, ada satu ton,
‫satu ton benar-benar, dari mereka yang dapat Anda konfigurasikan, oke?
‫Jadi lihat ini, tetapi
‫sebenarnya lebih mudah untuk mengonfigurasi es lint ini setiap kali Anda
‫mendapatkan kesalahan baru dalam kode Anda.
‫Oke?
‫Jadi izinkan saya menunjukkannya kepada
‫Anda, sehingga sekarang kita dapat melihatnya dalam praktik.
‫Jadi mari kita pergi ke file server kami di sini, dan
‫cukup buat beberapa kode di
‫sini yang bertentangan dengan beberapa aturan es.
‫Jadi misalnya mendefinisikan variabel di sini, seperti ini, dan kemudian menetapkan sesuatu
‫yang lain untuk itu.
‫Baiklah, jadi kita tahu bahwa x adalah konstanta
‫sehingga tidak boleh dipindahkan.
‫Jadi jika kita memberikan ini
‫sekarang ditugaskan, kita seharusnya benar-benar melihat kesalahan.
‫Dan kami tidak melakukannya, jadi saya akan melanjutkan
‫dan menutup jendela, lalu membukanya lagi.
‫Jadi lakukan itu juga
‫dan mudah-mudahan itu akan berhasil saat itu.
‫Oke, dan sebenarnya kami melihat kesalahan kami di sini sekarang
‫ditandai dengan warna merah.
‫Jadi, sekarang kita sampai pada tab masalah ini.
‫Biarkan saya memindahkannya sedikit, dan
‫jadi di sini kita melihat semua kesalahan yang kita miliki.
‫Jadi, dimulai dengan yang
‫pertama, diharapkan satu baris kosong setelah pernyataan
‫yang disyaratkan tidak diikuti oleh kebutuhan lainnya.
‫Jadi pada dasarnya apa yang
‫dikatakannya kepada saya adalah bahwa ia menginginkan ini membutuhkan
‫di sini di bagian atas dan kemudian, baris kosong dan kemudian seperti ini.
‫Jadi, kesalahannya hilang.
‫Oke?
‫Dan jenis ini memberlakukan standar pengkodean yang lebih baik.
‫Selanjutnya kita memiliki x yang ditetapkan dan nilai yang tidak pernah digunakan.
‫Dan agar tidak ada variabel
‫yang tidak terpakai yang saya sebutkan sebelumnya.
‫Jadi, yang ini di sini.
‫Oke?
‫Jadi ini adalah kesalahan, tetapi saya juga dapat mematikannya hanya untuk menunjukkan
‫kepada Anda bagaimana hal itu akan berubah.
‫Jadi saya telah menyimpannya, dan sekarang kesalahan itu hilang.
‫Jadi Anda lihat itu tidak lagi ditandai merah.
‫Tapi sebenarnya saya ingin ini
‫menjadi kesalahan, jadi saya menulis kesalahan, menyimpannya, dan kesalahan kami kembali.
‫Anda lihat, itu dideklarasikan tetapi tidak pernah digunakan.
‫Dan kemudian, di sini x adalah konstan.
‫Jadi kami benar-benar melakukan kesalahan
‫di sini, yaitu menetapkan
‫kembali konstanta, dan itu tidak diperbolehkan, jadi mari
‫kita singkirkan ini dan kemudian kesalahannya hilang.
‫Kami masih memiliki yang ini karena nilainya
‫belum pernah digunakan.
‫Mari kita cepat menulis x ditambah dua dan sekarang hilang.
‫Tetapi kami memiliki kesalahan berikutnya, pada dasarnya hanya
‫karena kami hanya memiliki kode
‫ini di sekitar sini tidak ditugaskan untuk apa pun.
‫Jadi, anggap saja const y sama dengan yang ini,
‫tetapi tentu saja y ditetapkan tetapi tidak pernah digunakan, jadi kita
‫memasukkan loop ini di sini.
‫Tapi, bagaimanapun, ini hanya untuk menunjukkannya padamu.
‫Jadi mari kita lihat sekarang peringatan terakhir.
‫Dan jadi itu tanpa konsol, kan?
‫Jadi ingat saya benar-benar membicarakan yang ini sebelumnya dan ini
‫berwarna hijau karena ini adalah peringatan.
‫Jadi sekali lagi, saya bisa mematikannya, dan masalah
‫saya akan hilang, jadi kodenya akan terlihat
‫normal sekarang.
‫Tetapi sebenarnya saya ingin eslint memperingatkan saya tentang itu,
‫karena itu bukan praktik yang baik
‫untuk memiliki terlalu banyak log konsol nanti dalam produksi.
‫Baiklah, jadi itu kembali sekarang.
‫Dan sebenarnya kode vs juga memperingatkan saya bahwa ada
‫peringatan hijau di sini di
‫file ini.
‫Jadi mungkin Anda memperhatikannya sebelumnya, tetapi
‫jika kami menempatkan kesalahan di
‫sini, maka sebenarnya itu akan berubah menjadi merah.
‫Oke?
‫Jadi sekarang merah, dan kami memiliki dua masalah di sana.
‫Dan itu sebenarnya sangat membantu untuk mengidentifikasi
‫masalah di semua file ini.
‫Baiklah, mari kita singkirkan.
‫Dan sebenarnya, itu saja.
‫Jadi saya harap ini bekerja untuk Anda
‫juga jika Anda mendapatkan beberapa kesalahan, silakan coba
‫instal paket yang sama dengan yang saya lakukan.
‫Jadi semua ini ada di sini, dan ingatlah bahwa
‫beginilah cara Anda melakukannya.
‫Jadi misalnya, jika Anda ingin
‫eslint lima katakan saja npm I eslint at five.
‫Misalnya Anda bahkan dapat menggunakan lima titik 16 titik 0
‫hanya untuk memastikan bahwa semuanya sama.
‫Dan dalam hal ini, semuanya harus bekerja seperti
‫yang terjadi di sini untuk saya.
‫Bagus, jadi ini adalah langkah
‫penting lainnya dalam perjalanan Anda menjadi pengembang.
‫Karena, percayalah, sangat penting untuk
‫memiliki linting kode di tempat seperti yang Anda miliki sekarang.
‫Jadi sekali lagi, untuk proyek Anda
‫berikutnya, lanjutkan, salin dependensi ini ke file paket dot
‫json Anda dan kemudian instal semuanya pada
‫saat yang bersamaan.
‫Dan itu akan membuat hidup Anda jauh lebih mudah.
‫Jadi begitulah cara saya selalu
‫melakukannya, dan hal yang sama tentu saja, dengan rc
‫yang lebih cantik dan file konfigurasi eslint ini.
‫Anyway, cukup berbicara untuk video ini.
‫Kami sekarang akhirnya siap untuk beralih ke
‫bagian mongodb yang sangat penting.