Direkomendasikan, 2024

Pilihan Editor

10 Ekstensi Braket Luar Biasa yang Sangat Anda Butuhkan

Brackets.io merilis versi 1.2 baru-baru ini, dengan beberapa fitur baru yang hebat yang dapat Anda baca di blog mereka. Kami telah menyusun daftar 10 ekstensi Kurung terbaik dan paling berguna di luar sana (tanpa urutan tertentu), bersama dengan instruksi lengkap untuk setiap ekstensi.

Ekstensi Kurung

1. Lipat Kode

Tidak seperti banyak IDE dan editor kode lainnya, kurung tidak memiliki opsi lipat kode yang tersedia secara default. Dengan Lipat Kode, Anda dapat dengan mudah menciutkan sebagian besar kode Anda menjadi satu baris. Ekstensi Kode Lipat tersedia di Github dan dari manajer ekstensi Kurung.

Bagaimana cara menggunakan

Untuk melipat tag bersarang, klik pada panah bawah di sebelah kiri tag induk seperti yang ditunjukkan di atas. Prinsip yang sama untuk Javascript atau format lainnya. Cukup klik panah bawah di sebelah kiri elemen induk untuk melipat semua pernyataan bersarang menjadi satu baris. Untuk memperluas, cukup klik pada tanda plus.

Nomor baris dari garis terlipat disembunyikan, sehingga mudah untuk menemukan garis terlipat ketika Anda berkonsentrasi pada kode.

2. Lorem Pixel

Ada banyak cara untuk menghasilkan teks placeholder, tetapi pengembang web front-end sering membutuhkan gambar placeholder. Alih-alih mencoba membuat gambar placeholder kosong, gunakan ekstensi Lorem Pixel. Ini memungkinkan Anda menyisipkan gambar placeholder cantik dengan ukuran berapa pun yang Anda inginkan. Bagian keren tentang Lorem Pixel adalah memungkinkan Anda memilih kategori yang Anda inginkan gambarnya.

Jika itu tidak cukup baik, gambar placeholder terus berubah setiap kali Anda memuat ulang halaman! Gambar seringkali dapat mengganggu skema warna, jadi Lorem Pixel juga memberi Anda opsi 'abu-abu' untuk hanya menggunakan gambar placeholder b / w. Ekstensi ini diberdayakan oleh lorempixel.com dan tersedia dari manajer ekstensi Kurung.

Menggunakan Lorem Pixel

Bagaimana cara menggunakan

Setelah Anda menginstal ekstensi Lorem Pixel, logo Lorem Pixel - kotak yang dicentang - muncul di panel ekstensi (panel di sebelah kanan dengan tombol Live Preview). Klik logo untuk memunculkan kotak pengaturan. Tetapkan ukuran gambar yang diinginkan dan kategori gambar pilihan Anda. Jika Anda ingin gambar skala abu-abu, periksa opsi skala abu-abu. Salin tautan ke clipboard dan gunakan sesuai kebutuhan atau masukkan ke posisi kursor saat ini.

3. Autoprefixer

Menambahkan awalan vendor ke kode Anda membosankan. Ekstensi Autoprefixer dapat menghemat banyak waktu Anda (dan banyak pekerjaan!) Karena secara otomatis menambahkan awalan vendor yang diperlukan ke kode Anda. Itu tidak memerlukan konfigurasi apa pun, dan memperbarui awalan Anda setiap kali Anda menyimpan kode Anda. Anda juga dapat memilih kode dan awalan otomatis jika Anda mau.

Bagaimana cara menggunakan

Untuk menggunakan Autoprefixer, mulailah menulis kode bebas awalan. Ekstensi akan secara otomatis menambahkan kode awalan segera setelah Anda simpan. Untuk awalan otomatis beberapa kode yang dipilih, pertama pilih kode dan kemudian Edit tab ⇒ Pemilihan awalan otomatis.

Autoprefixer juga memungkinkan Anda menambahkan awalan khusus dalam pengaturannya. Untuk masuk ke pengaturan ekstensi: Edit Pengaturan Autoprefixer.

Untuk memiliki kode yang cantik, berjuntai, awalan, aktifkan opsi Visual kaskade di pengaturan ekstensi.

4. Pratinjau Penurunan Harga

Penurunan harga adalah bahasa markup teks biasa yang mudah dikonversi ke HTML. Preview Penurunan harga memberikan Markdown tepat di bawah versi teks. Ini memungkinkan Anda memilih di antara dua gaya yang berbeda, Github Flavoured Markdown dan Standard Markdown.

Ada tiga tema yang dapat Anda pilih untuk jendela pratinjau - Terang, Gelap, dan Klasik. Pratinjau Penurunan harga juga memiliki opsi sinkronisasi gulir (diaktifkan secara default). Ekstensi dapat diunduh dari Github atau dari manajer ekstensi Kurung.

Bagaimana cara menggunakan

Buka file .md atau .markdown . Jika Anda telah menginstal Pratinjau Penurunan Harga, tombol M ↓ akan muncul di sebelah kanan. Klik itu, dan Anda akan melihat penurunan harga yang diberikan. Untuk mengubah tema, atau menonaktifkan sinkronisasi gulir, cukup klik ikon roda gigi di sudut kanan atas bagian Pratinjau Penurunan Harga.

5. Ikon Kurung

Selalu menyenangkan untuk membumbui editor kode Anda dengan ikon file. Ikon Kurung menambahkan ikon berwarna-warni, berdasarkan jenis file, ke semua file yang terdaftar di bilah samping. Ini memiliki ikon untuk sebagian besar jenis file, dan Anda dapat memposting permintaan ikon di halaman Github.

Tip Bonus:

Kurung Ikon menggunakan ikon dari proyek Ionicons. Anda juga dapat memeriksa ekstensi Ikon File (garpu proyek Braket Ikon) yang menggunakan ikon dari proyek Font Awesome. Itu intinya pada preferensi pribadi pada akhirnya.

Bagaimana cara menggunakan

Cukup instal ekstensi dan muat ulang Kurung (F5).

6. Bilah Alat Dokumen

Kurung tidak memiliki tab. Fakta sederhana dan sederhana. Ekstensi Documents Toolbar menambahkan fungsi ini. Semua file yang ada di bagian 'aktif' pada bilah samping muncul sebagai tab dalam ekstensi ini. Anda juga dapat menyembunyikan bilah sisi, dan hanya menggunakan Bilah Alat Dokumen untuk antarmuka yang bagus.

Bagaimana cara menggunakan

Pasang ekstensi dan muat ulang Kurung (F5).

7. Kurung Git

Semuanya mencoba untuk berintegrasi dengan Git hari ini; ini sejauh ini merupakan Sistem Kontrol Versi (VCS) yang paling populer. Kurung Git adalah yang terbaik di antara Ekstensi Kurung yang serupa. Ini memiliki semua fitur git yang Anda butuhkan. Anda dapat dengan mudah melakukan perubahan dari dalam kurung itu sendiri, mendorong dan menarik perubahan dengan satu klik, melihat riwayat file dan juga total komit. Jika Anda baik dengan Git, Anda tidak akan menemukan masalah dengan ekstensi ini.

Catatan: Untuk menggunakan Brit Git, Anda harus menginstal Git di komputer. Setelah menginstal ekstensi, Anda mungkin perlu memasukkan path ke file executable Git Anda (jika tidak di jalur default).

Bagaimana cara menggunakan

Mengkomit file menggunakan Bracket Git

Menggunakan Kurung Git cukup mudah. Buat folder repo Github lokal Anda menjadi folder proyek dalam kurung. Kemudian buka file, buat beberapa perubahan dan simpan. Kemudian Anda dapat melanjutkan dan mengklik ikon Git di sebelah kanan dan ini akan membuka panel Brit Git di bagian bawah. Ini akan menampilkan modifikasi apa pun yang Anda buat pada file Anda.

Periksa file mana saja yang ingin Anda komit, dan kemudian klik tombol Komit. Ini akan membuka daftar sembulan perubahan yang dibuat. Masukkan pesan Komit Anda dan klik OK. Dan Anda telah berhasil melakukan file ke Git langsung dari Kurung!

Setelah melakukan cukup klik pada tombol push (ini juga menunjukkan jumlah komit yang tidak disinkronkan, seperti yang Anda lihat di GIF di atas).

Mengonfigurasi Pengaturan

Buka panel Bracket Git, dan klik tombol Pengaturan (kedua dari kanan). Jangan ragu untuk mengkonfigurasi Brit Git jika Anda suka.

Untuk melihat File dan Riwayat Komit

Cukup klik pada tombol masing-masing untuk melihat Riwayat File dan Riwayat Komit Anda dengan indah. Apakah kami menyebutkan Anda dapat mengubah avatar menjadi avatar hitam dan putih, avatar berwarna, atau Gravatar Anda?

Sejarah Komit

8. Lint SEMUA Hal

Lint SEMUA hal. Segala sesuatu. Ekstensi ini menyatukan semua file Anda sekaligus. Sangat membantu ketika Anda memiliki proyek besar dengan banyak file yang terhubung. Semua kesalahan serat muncul dengan baik di panel.

Bagaimana cara menggunakan

Untuk menggunakan Lint ALL Things, cukup buka tab View dan klik Lint whole Project .

9. Kurung Todo

Kurung Todo adalah ekstensi kecil yang rapi yang menampilkan semua komentar TODO dalam format daftar yang rapi. Secara default, ini mendukung 5 tag - TODO, CATATAN, FIXME, PERUBAHAN dan MASA DEPAN. Anda juga dapat menandai komentar sebagai Selesai. Dalam opsi tampilan, Anda dapat memfilter komentar dengan tag. Kurung Todo memungkinkan Anda menentukan warna khusus untuk tag serta tag Anda sendiri, jika Anda ingin berkreasi dengan komentar Anda.

Jika Anda sedang mengerjakan proyek besar, dan perlu melacak komentar dari banyak file, Anda dapat mengubah lingkup pencarian kurung Todo. Ingin mengecualikan beberapa file dan folder seperti folder vendor? Jangan khawatir. Cukup tambahkan jalur dalam daftar pengecualian. Anda dapat menyesuaikan pengaturan untuk setiap proyek dengan menambahkan file .todo di direktori proyek root.

Anda dapat melalui semua opsi pengaturan dalam dokumentasi github.

Bagaimana cara menggunakan

Untuk menggunakan Kurung Todo, cukup tambahkan komentar ke kode Anda dengan tag di dalamnya. Nama tag harus dalam huruf besar, diikuti oleh titik dua (:). Untuk melihat semua Todo, cukup klik ikon Todo di panel ekstensi sebelah kanan.

Mengonfigurasi:

  • Untuk mengizinkan Todo untuk komentar HTML: Cukup buka pengaturan - Klik ikon Todo → Pengaturan (ikon roda gigi) - dan klik untuk membuka file .todo. Ke file ini, tambahkan kode ini:
     {"regex": {"awalan": "(? :)"}} 

    Tampilan menu pengaturan Todo
  • Untuk mengubah ruang lingkup pencarian: Tambahkan kode ini ke file .todo:
     {"search": {"scope": "my project"}} 
  • Untuk mengecualikan semua file / folder / ekstensi file dari lingkup pencarian: Tambahkan kode ini ke file .todo:
     {"search": {"scope": "my project", 

    “ExcludeFolders“: [“yourfolder“]

     "excludeFiles": ["yourfile"] "excludeFiles": [".yourextension"]}} 

10. Mempercantik

Mempercantik membuat kode Anda terlihat bagus. Ini memperbaiki spasi, lekukan, dan garis.

Bagaimana cara menggunakan

Sangat mudah untuk menggunakan Beautify. Yang harus Anda lakukan adalah memilih beberapa kode> Klik Kanan > Mempercantik .

Atau, Anda dapat menuju ke tab Edit dan klik ' Beautify '.

Top