5 ekstensi dan tema untuk Kode VS yang dapat mengubah kehidupan pengembang front-end

Penulis artikel, terjemahan yang kami terbitkan hari ini, ingin berbicara tentang beberapa ekstensi dan topik untuk editor VS Code populer yang dapat meningkatkan kehidupan pengembang.



SCSS IntelliSense


→ Halaman IntelliSense SCSS

Membuat variabel dalam SCSS mudah dan menyenangkan. Bagaimana cara mengingatnya? Di sini biasanya timbul kesulitan dengan ini.

Jika Anda seperti saya, maka Anda memiliki file _variables.scss , yang berisi ratusan ikon dolar dan nama variabel yang muncul di benak Anda pada pukul tiga pagi. Ekstensi SCSS IntelliSense memberikan petunjuk untuk nama variabel saat mengerjakan kode proyek. Dan Anda tidak perlu lagi mengingat nama-nama ini dengan detail penuh. Tidak perlu menggeledah file dengan nama variabel untuk mengingatnya.

Inilah yang terlihat seperti ekstensi IntelliSense SCSS.


Ekstensi IntelliSense SCSS beraksi

Ubah Nama Tag Otomatis


Ganti Nama Otomatis Halaman Tag

Terlepas dari kerangka front-end yang Anda gunakan, menulis HTML (atau JSX) bisa menjadi tugas yang membosankan. Terutama dalam situasi di mana ada sekitar 50 baris kode antara tag pembuka dan penutup. Anda mungkin perlu mengubah tag H2 ke H3 selama pekerjaan Anda. Mungkin perlu mengganti div dengan span . Bagaimanapun, jika Anda memecahkan masalah seperti itu tanpa menggunakan alat bantu, mereka, dalam fragmen kode skala besar, turun ke pencarian yang sulit untuk tag penutup.

Mengapa tidak memanggil mobil untuk membantu Anda mengedit tag secara otomatis? Untuk melakukan ini, cukup gunakan ekstensi Tag Ubah Nama Otomatis. Itu, ketika mengedit tag pembuka, secara otomatis berubah dan ditutup. Hal yang sama, justru sebaliknya, terjadi jika tag penutup diubah.

Inilah cara kerja Tag Ganti Nama Otomatis.


Bekerja dengan Ekstensi Tag Ganti Nama Otomatis

Tindakan rangkap


→ Halaman Aksi Gandakan

Kemampuan untuk membuat file dan folder duplikat menggunakan menu klik kanan sangat berguna sehingga harus dibangun ke dalam Kode VS. Tetapi editor ini, dan tanpa kesempatan seperti itu, luar biasa, sehingga ia dapat memaafkan kesalahan semacam itu.

Sebenarnya, untuk melengkapi VS Code dengan fitur yang dijelaskan di atas, cukup untuk menginstal ekstensi Duplicate Action. Ketika dihidupkan, pengembang memiliki perintah menu Duplicate file or directory konteks.


Perubahan menu ekstensi dan menu konteks file perubahan

Codestream


→ Halaman CodeStream

Jika Anda menjelaskan secara singkat CodeStream, maka kita dapat mengatakan bahwa ekstensi ini sebanding dengan sistem untuk mengomentari kode dari masa depan.

Banyak programmer tidak suka meninggalkan IDE mereka. Tetapi untuk menjelaskan sesuatu kepada rekan kerja, dan untuk mengajukan pertanyaan sendiri, Anda harus keluar dari lingkungan yang sudah dikenal dan menggunakan Trello, Slack, Asana, Bitbucket, Microsoft Teams. CodeStream mendukung banyak alat dan IDE, yang memungkinkan Anda untuk bekerja dengan masalah dan pertanyaan tanpa meninggalkan lingkungan yang akrab dengan editor kode. Banyak, melakukan pekerjaan, cenderung masuk ke dalam apa yang disebut "keadaan aliran." Keluar dari editor biasanya membawa orang keluar dari keadaan ini. Berkat CodeStream, pertanyaan tentang kode dapat diselesaikan tanpa meninggalkan lingkungan yang Anda kenal.


Diskusi Kode di CodeStream

Burung hantu malam hari


Night Owl Page

Night Owl adalah salah satu tema terbaik yang pernah dibuat untuk IDE. Selama tiga tahun sekarang, saya menggunakannya setiap hari. Di bawah ini adalah tangkapan layar layar kerja saya yang sebenarnya. Judul topik ini mengisyaratkan bahwa ini ditujukan bagi mereka yang duduk di depan komputer di malam hari. Benar, sangat cocok untuk pekerjaan malam hari, mencegah mata Anda bekerja terlalu keras, dan nada biru lembut yang digunakan di dalamnya membantu dengan tenang memecahkan masalah yang kompleks.


Tema Night Owl

Bonus: Synthwave '84 Tema


Synthwave '84 Halaman

Tema ini berasal dari dunia cyberpunk. Ini cocok dengan jubah kulit, dengan Lamborghini Countach dan dengan generator asap. Jika semua ini dekat dengan Anda, nyalakan musik Vaporwave favorit Anda dan tulis kode indah Anda hingga kesadaran Anda bergabung dengan database Neuromancer.

Untuk mencapai efek glowing text, setelah menginstal topik ini, Anda harus sedikit mengotak-atiknya. Tetapi Anda pasti setuju bahwa keindahan ini layak untuk dicoba.


Synthwave '84 Tema

Pembaca yang budiman! Apakah Anda tahu ekstensi dan tema menarik untuk Kode VS?

Source: https://habr.com/ru/post/id482468/


All Articles