Persiapan Editor

Editor Anda

VS Code adalah salah satu editor yang paling populer yang digunakan saat ini. Memiliki pasar ekstensi yang besar dan terintegrasi dengan baik dengan layanan populer seperti GitHub. Sebagian besar fitur yang tercantum di bawah ini juga dapat ditambahkan ke VS Code sebagai ekstensi, sehingga membuatnya sangat dapat dikonfigurasi!

Editor teks populer lainnya yang digunakan dalam komunitas React meliputi:

• WebStorm adalah lingkungan pengembangan terpadu yang dirancang khusus untuk JavaScript.
• Sublime Text memiliki dukungan untuk JSX dan TypeScript, syntax highlighting dan penyelesaian otomatis yang sudah built-in.
• Vim adalah editor teks yang sangat dapat dikonfigurasi yang dirancang untuk membuat membuat dan mengubah jenis teks apa pun menjadi sangat efisien. Ini disertakan sebagai “vi” dengan sebagian besar sistem UNIX dan dengan Apple OS X.

Fitur editor teks yang direkomendasikan

Beberapa editor telah memiliki fitur-fitur ini secara built-in, tetapi yang lain mungkin memerlukan penambahan ekstensi. Periksa untuk melihat dukungan yang disediakan editor pilihan Anda untuk memastikan!

Linting

Linter kode dapat menemukan masalah dalam kode Anda saat Anda menulis, membantu Anda memperbaikinya lebih awal. ESLint adalah linter open source yang populer untuk JavaScript.

• Menginstal ESLint dengan konfigurasi yang direkomendasikan untuk React (pastikan Anda telah menginstal Node!)
• Integrasi ESLint di VSCode dengan ekstensi resmi

Pastikan Anda telah mengaktifkan semua aturan eslint-plugin-react-hooks untuk proyek Anda. Mereka sangat penting dan menangkap bug yang paling parah lebih awal. Preset eslint-config-react-app yang direkomendasikan sudah termasuk di dalamnya.

Pemformatan

Hal terakhir yang ingin Anda lakukan saat berbagi kode Anda dengan kontributor lain adalah terlibat dalam diskusi tentang tab vs spasi! Untungnya, Prettier akan membersihkan kode Anda dengan memformat ulang sesuai dengan aturan yang telah ditentukan. Jalankan Prettier, dan semua tab Anda akan dikonversi menjadi spasi—dan indentasi, tanda kutip, dll juga akan diubah sesuai dengan konfigurasi. Dalam pengaturan yang ideal, Prettier akan berjalan saat Anda menyimpan file Anda, dengan cepat membuat perubahan ini untuk Anda.

Anda dapat menginstal ekstensi Prettier di VSCode dengan mengikuti langkah-langkah berikut:

1. Buka VS Code
2. Gunakan Quick Open (tekan Ctrl/Cmd+P)
3. Tempelkan ext install esbenp.prettier-vscode
4. Tekan Enter

Pemformatan saat menyimpan

Idealnya, Anda harus memformat kode Anda setiap kali menyimpan. VS Code memiliki pengaturan untuk ini!

1. Di VS Code, tekan CTRL/CMD + SHIFT + P.
2. Ketik “settings”
3. Tekan Enter
4. Di bilah pencarian, ketik “format on save”
5. Pastikan opsi “format on save” dicentang!

Jika preset ESLint Anda memiliki aturan pemformatan, mereka mungkin akan bertentangan dengan Prettier. Kami menyarankan untuk menonaktifkan semua aturan pemformatan di preset ESLint Anda menggunakan eslint-config-prettier sehingga ESLint hanya digunakan untuk menangkap kesalahan logis. Jika Anda ingin menegakkan bahwa file diformat terlebih dahulu sebelum pull request digabungkan, gunakan prettier --check untuk integrasi berkelanjutan Anda.