Tip dan Trik VSCode untuk Pengguna Listrik

Mengapa Saya Ingin Menjadi Power User Visual Studio?

Menjadi pengguna yang kuat adalah cara lain untuk tetap unggul. Pengembang sering berbicara tentang bagaimana mereka tetap berada di puncak permainan mereka dan bagaimana mereka terus-menerus mempelajari hal-hal baru dan terus mengasah keterampilan mereka. Ini adalah pertanyaan wawancara yang sering diajukan, karena pemberi kerja cenderung lebih menyukai bakat yang didedikasikan untuk memperluas keahlian mereka. Menguasai IDE dan komputer Anda mungkin merupakan salah satu investasi terbaik dalam pengembangan profesional Anda.

Pengembang selalu mencari blog baru yang akan membuat mereka lebih baik dalam pekerjaan mereka. Apa pun IDE yang Anda gunakan, mungkin ada blog: Berlangganan!

Alasan lain adalah hanya menghemat waktu. Menginvestasikan waktu dalam meningkatkan alur kerja Anda dapat menghasilkan produktivitas yang lebih tinggi atau lebih banyak waktu untuk bersenang-senang. Hari ini, kita akan melihat lebih dekat pada Visual Studio dan VSCode dan mendiskusikan cara meningkatkan keterampilan Anda hingga menjadi pengguna yang kuat.

Bagaimana Saya Menjadi Power User VSCode?

Inilah yang membedakan pengguna biasa dari pengguna listrik :

• Pengetahuan mendalam tentang IDE Anda: VSCode memiliki dokumentasi yang sangat baik, bacalah!
• Kustomisasi: Pengguna yang kuat menyesuaikan alur kerja mereka agar sesuai dengan kebutuhan spesifik mereka.
• Otomatiskan semua tugas yang membosankan dan berulang.
• Tingkatkan terus alur kerja Anda dan pantau evolusi IDE Anda.

Dalam artikel ini, saya bermaksud menjelaskan bagaimana saya membahas masing-masing poin ini sendiri dan membekali Anda dengan pengetahuan untuk melakukannya sendiri. Apa yang saya lakukan belum tentu berhasil untuk Anda, setidaknya tidak sepenuhnya. Orang-orang bekerja di lingkungan dan proyek yang berbeda (bagi saya, sebagian besar bekerja dengan React.js dan TypeScript di Windows), tetapi pendekatan keseluruhan berlaku untuk semua orang.

Menguji dengan Jest

Saya menulis satu tes pada satu waktu, yang berarti saya membutuhkan cara untuk menjalankan satu tes pada satu waktu. Namun, solusi regex asli cukup kikuk. Itu sebabnya saya menggunakan Jest Runner. Ekstensi yang berguna ini memungkinkan Anda untuk menjalankan atau men-debug suite atau pengujian individual.

Video di bawah ini menunjukkan bahwa yang perlu Anda lakukan hanyalah klik kanan pada nama tes dan gunakan menu konteks untuk menjalankannya.

Menguji dengan Pakta

Bagian yang paling memakan waktu dari menulis tes kontrak bisa dibilang cocok. Saya memecahkan ini dengan membuat cuplikan bermanfaat untuk mengotomatiskan tindakan berulang. Ini adalah beberapa yang saya buat, jangan ragu untuk menggunakannya (yaitu, cukup salin-tempelkan ke /snippets/typescript.json /snippets/typescript.json ).

Video di bawah ini menunjukkan cara menggunakan cuplikan ini:

1. Pilih semua kemunculan dari jenis yang sama, yaitu, pilih semua string, waktu, dan nilai lainnya.
2. Gunakan pengikatan kunci yang telah ditentukan sebelumnya, atau aktifkan Sisipkan Cuplikan dan pilih cuplikan yang relevan, atau cukup ketik awalan cuplikan yang ingin Anda gunakan.

Git

Sebagian besar pengembang menggunakan Git dan GitHub setiap hari, begitu pula saya. Namun, saya mencoba menghindari penggunaan terminal atau github.com.

Permintaan dan Masalah Tarik GitHub memungkinkan saya untuk membuka, mengedit, dan meninjau PR dalam kenyamanan VSCode. Saya menemukan IDE saya sebagai tempat yang lebih baik untuk meninjau kode daripada aplikasi web atau desktop GitHub. Beberapa pengembang mungkin tidak setuju, tetapi saya menghargai konsistensi dan kenyamanan melakukannya di IDE saya.

Git dapat melakukan banyak hal, namun saya hanya mengingat sedikit perintahnya. Tapi mengapa menghafal sesuatu di tempat pertama? Menghafal terlalu banyak aspek terperinci dari rutinitas Anda tidak terlalu produktif.

GitLens memperlihatkan sejumlah besar fitur luar biasa di ujung jari Anda. Berkat itu, saya jarang harus menjangkau terminal untuk menggunakan Git.

Kustomisasi Terminal

Terlepas dari OS yang Anda gunakan, Anda dapat melakukan lebih baik daripada terminal default. Saya menggunakan Terminal Windows + cmder. Jika Anda pengguna Unix, cari iTerm (macOS) atau Oh My Zsh (Linux dan macOS). Saya telah mengintegrasikannya dengan VSCode dan menambahkan banyak alias (pintasan) yang menghemat waktu saya dari menulis perintah.

Sebagai contoh:

• ys = yarn start - membantu saya memulai aplikasi hanya dengan dua karakter
• del=RMDIR /S/Q $* && echo "Deleted Successfully!!!" - menghapus direktori yang disediakan dan menampilkan pesan sukses setelah selesai
• gdab = git branch | grep -v "master" | xargs git branch -D gdab = git branch | grep -v "master" | xargs git branch -D - menghapus semua cabang lokal kecuali master

Menyimpan beberapa karakter di sana-sini mungkin tampak konyol, tetapi fitur hemat waktu ini akan bertambah dalam jangka panjang. Saya menemukan keuntungan sekunder untuk melakukan alias—menghabiskan lebih sedikit waktu untuk mengetiknya membantu saya tetap fokus dan tidak kehilangan pikiran karena saya tidak mencoba mengingat cara menjalankan perintah.

Pembuatan Kode

Membuat komponen baru, halaman, dll. adalah sesuatu yang sering saya lakukan, dan ini cukup mudah, seperti yang akan diketahui oleh sebagian besar pembaca. Tetapi membuat folder baru dan menginisialisasi file di dalamnya bisa jadi membosankan. Jadi, saya mengotomatiskan proses ini.

Video di bawah ini menunjukkan Supercharge React sedang digunakan. Menggunakan New Component , saya dapat menentukan nama dan lokasi komponen baru. Ekstensi kemudian menjalankan skrip yang membuat folder dan menginisialisasi komponen baru ini.

IntelliSense

VSCode memiliki IntelliSense yang kuat, dan sebagian besar waktu, Anda tidak perlu berpikir untuk menggunakannya. Namun, saat menelusuri saran, Anda dapat menekan Ctrl+Spasi untuk melihat dokumentasi tentang setiap opsi yang tersedia.

IntelliSense juga dapat disesuaikan agar sesuai dengan alur kerja dan preferensi pribadi Anda.

Pintasan Keyboard

Saya yakin Anda menggunakan cara pintas seperti Ctrl+S dan Ctrl+F . Semuanya didokumentasikan dengan baik, dan jika Anda tidak terlalu akrab dengan beragam pintasan VSCode, saya mendorong Anda untuk mengubah ini dan berusaha lebih keras untuk menguasainya. Ikatan tertentu terlalu kikuk? Perintah yang Anda panggil sering terlalu lama untuk diketik? Buka editor keyboard VSCode untuk membuat pintasan.

Jika Anda bertanya-tanya apakah perintah telah ditetapkan ke kombo tombol tertentu, klik tombol keyboard di bilah pencarian tempat Anda dapat merekam penekanan tombol. Anda kemudian akan melihat perintah apa/jika telah dikaitkan dengannya.

Pintasan Mouse

Pengembang sering diberi tahu bahwa untuk menjadi produktif, mereka perlu belajar membenci mouse dan mencintai keyboard . Ini mungkin valid jika Anda mengerjakan file kecil dan padat. Tetapi di zaman pemformatan kode otomatis dan file yang berisi ratusan baris kode, saya berpendapat itu lebih merupakan pengecualian daripada aturan.

Saya tidak hanya aktif menggunakan mouse, tetapi juga menyesuaikannya agar sesuai dengan alur kerja saya menggunakan Logitech Options. Saya memprogram tombol khusus pada mouse saya untuk melakukan perintah tertentu di VSCode.

Berikut adalah bagaimana Anda dapat "mengajar" mouse Anda untuk melakukan lebih dari sekadar memindahkan kursor dan mengklik:

1. Pilih VSCode dari menu kanan atas.
2. Klik tombol yang ingin Anda sesuaikan.
3. Pilih Penetapan penekanan tombol dari daftar tindakan di sebelah kiri.
4. Masukkan pintasan yang telah ditentukan sebelumnya di VSCode.

Pengaturan Pencadangan dan Sinkronisasi

Tidak ada gunanya menyesuaikan apa pun jika Anda tidak dapat mencadangkannya dan menggunakannya kembali kapan pun Anda membutuhkannya lagi.

Solusi asli hanya tersedia untuk orang dalam saat ini. Namun, Sinkronisasi Pengaturan membantu Anda menyimpan pengaturan kode sebagai Intisari dan memungkinkan Anda untuk menyinkronkan alur kerja Anda di antara beberapa mesin. Anda memerlukan token GitHub untuk mengonfigurasinya, tetapi setelah itu, Anda hanya perlu menjalankan satu perintah untuk mengunggah dan mengunduh pengaturan Anda.

Ekstensi VSCode yang Direkomendasikan

Saya telah menyebutkan beberapa ekstensi dan menjelaskan bagaimana saya menggunakannya. Berikut adalah beberapa sebutan penting:

• Surround: Perlu membungkus beberapa kode yang dipilih dalam fungsi panah atau mungkin blok coba-tangkap? Ekstensi ini akan melakukannya untuk Anda!
• Cari node_modules: Bahkan jika Anda belum mengecualikan node_modules dari penjelajah VSCode untuk peningkatan kinerja, folder itu sangat besar sehingga tidak mungkin untuk dinavigasi. Ekstensi ini memungkinkan Anda mencari apa pun yang Anda cari alih-alih menggulir tanpa henti.
• Glean dan React Refactor menyediakan beberapa alat refactoring yang berguna untuk file JSX Anda.
• Tag Tutup Otomatis secara otomatis menambahkan tag penutup untuk file HTML/JSX/TSX.
• File Utils: Cara mudah untuk membuat, menggandakan, memindahkan, mengganti nama, dan menghapus file dan direktori. Ini juga dapat disesuaikan.
• JavaScript Booster mengotomatiskan beberapa tindakan refactoring umum.

Ringkasan

Jangan menjadi pengguna biasa. Jadilah pengguna yang kuat sebagai gantinya. Selalu melangkah lebih jauh dari yang lain dan lihat ke mana Anda akan dibawa. Selalu perhatikan inefisiensi dan cobalah untuk menguranginya.

Solusi saya untuk ini seharusnya tidak asing bagi sebagian besar pengembang: papan Kanban . Setiap kali saya melihat sesuatu yang memperlambat saya, saya menuliskannya sebagai To-Do. Setiap kali saya punya waktu luang, saya mencoba mencari solusi untuk itu.

Jika Anda merasa posting ini berlebihan dan tidak tahu harus mulai dari mana, baca dokumennya, ini akan memberi Anda ROI terbaik ! Saya tahu membaca dokumentasi resmi terdengar membosankan, tetapi saya berjanji itu akan terbayar dalam jangka panjang. Tidak hanya akan mengajarkan Anda bagaimana menjadi lebih produktif tetapi Anda akan belajar bagaimana dokumentasi harus ditulis.

Untuk membuatnya lebih mudah, saya telah menyusun daftar bagian dokumen yang harus dibaca ini:

• Tips dan Trik: Beberapa sudah jelas dan Anda mungkin sudah tahu, meskipun saya jamin Anda akan menemukan sesuatu yang tidak Anda ketahui.
• Peretasan Pengeditan: Peretasan pengeditan ini sangat kuat, dan mempelajarinya akan bermanfaat bagi Anda setiap hari.
• Kecilkan/Perluas Kode: Coba pintasan ini saat Anda memasangkan dengan pengembang lain, untuk mengesankan mereka!
• Keybindings: Pelajari cara kerja keybindings dan cara menyesuaikannya, ini adalah salah satu landasan untuk menguasai IDE Anda.
• Ratusan bahasa pemrograman yang didukung: Pelajari fitur spesifik apa yang dimiliki VSCode untuk bahasa pilihan Anda.