Adobe Brackets adalah open source, lingkungan pengembangan terintegrasi yang sederhana dan kuat untuk HTML, CSS dan JavaScript. Ini mendukung penambahan plug-in untuk memberikan ekstensi fungsional tambahan. Plug-in yang tersedia saat ini, seperti menambahkan deteksi kesalahan, awalan CSS khusus browser, anotasi JSDOC, dll. Editor berikut secara singkat memperkenalkan penggunaan dan pengaturan kurung:
1. Pengaturan Proyek
1. Buka braket, seluruh antarmuka sangat sederhana, dan bilah menu atas hanya menyediakan fungsi editor file> EXIT. Di sebelah kiri adalah pohon file dari struktur organisasi proyek. Gunakan Ctrl/CMD+Shift+H untuk memanggil dan menutup pohon file. Sisi kanan adalah area pengeditan, bagian atas adalah bilah alat, bagian tengahnya adalah area dokumen, dan bagian bawahnya adalah area yang cepat.
2. Buka proyek. Gunakan perintah file> buka folder untuk membuka folder proyek. Nama proyek pohon file di sebelah kiri diperbarui ke nama folder proyek, dan pohon file diperbarui ke pohon file proyek saat ini.
Klik tombol kiri pada nama proyek untuk memunculkan menu pengeditan proyek. Menu pengeditan akan menampilkan proyek historis dan perintah pengeditan proyek.
Buka Perintah Folder: Buka proyek baru.
Perintah Pengaturan Proyek: Mengatur alamat web proyek saat ini, yang akan digunakan selama halaman debugging dan pratinjau.
Persyaratan Pengaturan: Harus berupa alamat web yang dimulai dengan http: //.
Seperti yang ditunjukkan pada gambar di atas, ketika diatur ke http://127.0.0.1/demo/slide, halaman yang sesuai akan dibuka melalui alamat web ketika browser dipratinjau.
Jika tidak diatur, halaman akan dibuka melalui alamat surat drive file.
2. Pengeditan file
Klik Index.html di pohon file, dan buka dokumen index.html di area utama.
1. Brackest akan memeriksa apakah dokumen tersebut mematuhi spesifikasi HTML. Seperti yang ditunjukkan pada gambar di bawah ini, ada blok gaya pada 20 baris yang perlu ditempatkan di simpul kepala.
2. Tempatkan kursor pada nama label Atribut Kelas atau ID, tekan Ctrl/CMD + E (Edit) atau Exit Editing. Kurung akan mencari semua file CSS di bawah proyek, dan kemudian membuka editor tertanam untuk menyematkannya dalam file HTML, memungkinkan Anda untuk dengan cepat memodifikasi kode CSS.
Ketika tag kelas/ID saat ini memiliki beberapa definisi gaya, jendela pengeditan menyediakan tombol sakelar untuk mengganti gaya tampilan, atau Anda dapat menggunakan tombol panah ALT + UP/Down untuk beralih.
Perlu dicatat bahwa tanda kurung akan mendeteksi dokumen HTML saat ini dan semua file CSS di bawah proyek untuk menemukan gaya kelas/ID, bahkan jika beberapa file CSS tidak dirujuk dalam dokumen HTML saat ini.
3. Kurung juga mendukung pratinjau/pengeditan cepat definisi objek JS. Letakkan kursor pada nama fungsi JS, tekan CTRL/CMD + E (Edit) atau pengeditan keluar.
4. Braket memiliki pemetik warna bawaan, menyediakan bentuk pengkodean warna RGBA, HEX, dan HSLA. Letakkan kursor pada kode warna, tekan CTRL/CMD + E (Edit). Anda perlu menggunakan tombol ESC untuk keluar dari jendela kolektor warna.
3. Pratinjau Instan
Kurung menyediakan pratinjau instan halaman web. Saat menggunakan fungsi ini, tanda kurung memanggil browser Chrome untuk membuka halaman saat ini. Setelah memodifikasi HTML, CSS, JavaScript dan Saving, konten yang dimodifikasi akan menanggapi halaman di browser segera tanpa secara manual menyegarkan halaman. Ini adalah salah satu sorotan terbesar braket. Diberkati dengan dua coder monitor, Anda dapat menampilkan braket dan chrome pada layar split, modifikasi instan pratinjau instan tanpa switching editor/browser dan halaman menyegarkan.
Beberapa batasan fitur pratinjau langsung saat ini:
Ini hanya berfungsi dengan browser Chrome sebagai browser target, Anda harus menginstal Chrome.
Ini bergantung pada debugging jarak jauh di Chrome, yang diaktifkan oleh bendera baris perintah. Di Mac, jika Anda sudah menggunakan Chrome, lalu luncurkan Pratinjau Instan, tanda kurung akan menanyakan apakah Anda ingin memulai kembali Chrome untuk mengaktifkan debugging jarak jauh.
Hanya satu file HTML yang dapat dipratinjau secara bersamaan - jika Anda beralih file HTML lain, kurung akan menutup pratinjau asli.
4. Beberapa kunci pintasan
Ctrl/CMD+Shift+H dapat memanggil dan menutup pohon file
Ctrl/CMD + E Pratinjau Cepat/Edit Gaya CSS/Fungsi JavaScript
CTRL/CMD + +/- Zoom Masuk dan Keluar dari Ukuran Font Area Pengeditan
CTRL/CMD + 0 Atur Ulang Ukuran Font Area Edit
CTRL/CMD + ALT + P Nyalakan fungsi pratinjau instan
Komentar CTRL / CMD + / LINE
CTRL / CMD + ALT + / Blokir Komentar
Catatan: Saat mengomentari kode CSS dan kode HTML, Anda hanya dapat menggunakan tombol pintasan komentar blok.