Review Software Coding Brackets Untuk Code Editor

Review Software Coding Brackets Untuk Code Editor – Brackets adalah salah satu editor teks open source populer yang dapat Anda gunakan untuk membuat dan mengedit kode dengan mudah. Adobe menemukan ini untuk tujuan pengembangan web tetapi Anda dapat menggunakannya untuk semua tujuan pengkodean seperti mengedit file HTML sederhana untuk membangun proyek besar.

binaryjs

Review Software Coding Brackets Untuk Code Editor

binaryjs – Brackets saat ini didistribusikan di bawah lisensi MIT sebagai editor kode sumber terbuka. Anda dapat mengedit kode HTML , CSS, dan JavaScript tanpa membuat kesalahan dan melihat pratinjau hasilnya secara instan di browser Google Chrome.

Ini benar-benar alat gratis yang dikembangkan dengan HTML, CSS, dan JavaScript. Anda akan senang menemukan alat ini terutama jika Anda sering mengedit kode dengan Notepad atau TextEdit.

Baca Juga : Bagaimana Teknologi Aplikasi Koding Memungkinkan Penghematan Sumber Daya

Bagaimana Cara Memasang Bracket?

Brackets adalah editor lintas platform yang tersedia untuk Windows, Mac, dan Linux. Anda dapat mengunduh tanda Brackets dari situs brackets.io dan melacak perkembangannya di Github .

Fitur Editor Kode Brackets

Brackets adalah editor teks cerdas yang akan mendeteksi tag awal dan akhir dalam HTML Anda. Ini akan membantu Anda memahami di mana tag dibuka dan di mana berakhir. Anda dapat dengan mudah meminimalkan bagian dan fokus pada bagian yang ingin Anda kerjakan. Demo di bawah ini menunjukkan betapa mudahnya membuat kode di editor Brackets:

  • Penataan gaya dan penyorotan sintaks otomatis untuk menampilkan kode dalam berbagai warna.
  • Anda dapat mengakses file terbaru dari panel file kerja sebelah kiri.
  • Saat Anda memasukkan tag pembuka, daftar opsi yang memungkinkan akan muncul di drop-down untuk dipilih.
  • Tag penutup ditambahkan secara otomatis saat Anda menyelesaikan tag pembuka.
  • Klik pada tag mana saja untuk melihat tag pembuka atau penutup yang sesuai. Ini akan sangat berguna ketika Anda memiliki kode yang lebih panjang dan mencoba menemukan blok kode.
  • Anda dapat mengontrak atau memperluas blok kode untuk fokus pada bagian pengeditan.
  • Sangat mudah untuk menggunakan tautan relatif dan menghubungkan semua file dalam folder proyek saat menggunakan “href” dan atribut lainnya.
  • Kutipan penutup otomatis membantu menghindari kesalahan dalam melupakan kutipan penutup.
  • Klik pada tag atau pemilih CSS dan tekan “command + E” di Mac atau “Control + E” di
  • Windows untuk mendapatkan semua aturan yang digunakan untuk id itu.
  • Menampilkan semua prediksi yang mungkin ketika kode CSS dimasukkan yang membantu memilih sintaks dan nilai yang benar.
  • Semua nilai warna akan muncul di drop-down untuk seleksi serta ditunjukkan pada mouse hover .
  • Opsi pratinjau langsung memungkinkan Anda melihat output di browser Google
  • Chrome secara instan. Saat ini hanya berfungsi di Google Chrome versi desktop dan tidak didukung di browser lain.
  • Anda dapat membagi jendela secara horizontal atau vertikal dan mengerjakan banyak file secara bersamaan.

Ekstensi untuk Brackets

Selain fitur pengeditan inti, editor kode Brackets memiliki banyak ekstensi yang berguna dan berikut adalah beberapa ekstensi populer:

  • Extract for Brackets – ini digunakan untuk mengekstrak CSS dari file PSS.
  • Validasi W3C – memvalidasi kode sesuai standar W3C.
  • Mempercantik – digunakan untuk memformat kode CSS, HTML, dan JavaScript.
  • Git – integrasi Git dan Bracket.
  • Ekstensi dapat diinstal menggunakan pengelola ekstensi bawaan di bawah menu ” File > Extension Manager “.

Brackets Adobe yang Dihentikan

Mulai Sep 2021 dan seterusnya, Adobe akan berhenti mendukung editor Brackets. Mereka sekarang telah bermitra dengan Microsoft dan mendorong pengguna untuk mencoba editor Kode Visual Studio. Namun, kami merasa Brackets sangat ringan dan mudah digunakan setelah mencoba Visual Code Editor.

Bagian 1
Dalam pelajaran ini, Anda akan belajar cara mengatur editor kode Brackets.

Mengunduh dan Menggunakan Brackets

Untuk mengedit kode, Anda dapat menggunakan editor teks apa pun. Mana pun yang menurut Anda paling cocok untuk Anda adalah yang terbaik untuk digunakan. Satu-satunya pengecualian untuk ini adalah Anda tidak dapat menggunakan pengolah kata seperti Microsoft Word. Mereka menerapkan pemformatan ekstra pada teks yang mencegahnya bekerja dengan kompiler kode.

Setelah Anda membuka Bracket, Anda akan melihat sesuatu seperti ini. Ini adalah proyek dasar Memulai yang disediakan oleh perangkat lunak.

Di sisi kiri, Anda akan melihat panel dengan file yang berbeda. Di sinilah semua file dalam proyek Anda akan ditampilkan.

Untuk pengembangan web, Anda harus meletakkan semua file yang terlibat ke dalam satu folder. Ini termasuk semua grafik, CSS, HTML, dll. Dalam Brackets, Anda kemudian dapat mengklik tombol Getting Started , yang akan memiliki menu drop-down yang bertuliskan Open Folder… . Kemudian Anda dapat menavigasi ke folder utama proyek web, meskipun Anda belum memilikinya. Jika Anda kemudian mengklik nama folder, menu tarik-turun akan muncul lagi, di mana Anda dapat membuka folder baru atau membuka folder yang telah Anda muat sebelumnya.

Untuk menangani file individual, Anda dapat mengkliknya untuk menampilkan pratinjau. Jika Anda mengklik dua kali file tersebut, bagian baru akan muncul di panel sebelah kiri bernama Working Files . Ini akan berisi semua file yang telah Anda klik dua kali dan sedang diedit. Setelah selesai mengedit, Anda dapat mengklik x di sebelah nama file. Melakukannya akan menghapusnya dari bagian Working Files . Beginilah cara Brackets menangani UI file sehingga Anda bisa tetap lebih teratur.

Itulah gambaran dasar dari editor kode Brackets. Jika Anda lebih suka menggunakan editor yang berbeda, jangan ragu untuk melakukannya. Editor utama seperti Atom, Sublime, VSCode, Notepad++, atau lainnya semuanya akan berfungsi dengan baik untuk kursus ini.

Bagian 2
Dalam pelajaran ini, Anda akan mempelajari beberapa tip tentang cara bekerja lebih efisien di editor kode Brackets.

Fitur Berguna untuk Diaktifkan

Beberapa tips pertama mengenai tiga pengaturan berbeda di tab View . Yaitu Line Numbers , Word Wrap , dan Highlight Active Line .

Secara default, Nomor Baris dan Bungkus Kata harus aktif. Nomor Baris akan mengaktifkan nomor baris, yang sangat berguna untuk melakukan pemecahan masalah. Word Wrap akan memastikan bahwa setelah titik tertentu, teks akan terbungkus ke baris baru sehingga Anda tidak perlu menggulir secara horizontal. Pengaturan Sorot Jalur Aktif tidak akan aktif secara default. Pengaturan ini akan membuat garis yang Anda pilih disorot. Ini dapat membantu agar Anda tahu di mana Anda bekerja dalam kode Anda. Jika Anda ingin mengaktifkannya, klik pada pengaturan.

Pengaturan lain yang berguna untuk mengaktifkan ditemukan di bawah tab Edit dan disebut Auto Close Braces .

Ini mungkin sudah aktif. Jika tidak, Anda disarankan untuk menyalakannya. Ini akan secara otomatis dimasukkan ke dalam tag penutup ketika Anda menulis tag pembuka dari elemen HTML. Pengaturan ini akan menghemat banyak pengetikan, ditambah Anda tidak perlu khawatir lupa tag penutup.

Fitur bermanfaat terakhir adalah fungsi Pratinjau Langsung dari Bracket. Ini akan menampilkan pembaruan ke pratinjau kode yang Anda tulis. Anda dapat menemukannya di bawah tab File , atau dengan menggunakan pintasan Ctrl + Alt + P, atau dengan mengklik tombol petir di sisi kanan layar.

Ini akan membuka halaman baru di Google Chrome yang akan menampilkan halaman saat ini yang telah Anda buka di dalam Brackets. Halaman web ini akan terus diperbarui saat Anda mengedit kode di dalam Brackets tanpa Anda harus me-refresh apa pun secara manual.

Fitur ini tidak sempurna dan terkadang Anda harus menyegarkannya secara manual. Ini juga hanya berfungsi untuk Google Chrome, jadi jika Anda menggunakan browser web yang berbeda, sayangnya Anda tidak dapat memanfaatkan fitur ini. Namun, bahkan dengan masalah kecil ini, ini adalah fitur yang sangat membantu.

Semoga tips ini bermanfaat bagi Anda untuk bekerja dengan editor kode Brackets. Mereka seharusnya memungkinkan Anda untuk bekerja sedikit lebih cepat setelah Anda mulai membuat kode untuk proyek web Anda.