Adobe Brackets เป็นโอเพ่นซอร์สสภาพแวดล้อมการพัฒนาแบบบูรณาการที่เรียบง่ายและทรงพลังสำหรับ HTML, CSS และ JavaScript รองรับการเพิ่มปลั๊กอินเพื่อให้ส่วนขยายการทำงานเพิ่มเติม ปลั๊กอินที่มีอยู่ในปัจจุบันเช่นการเพิ่มการตรวจจับข้อผิดพลาดคำนำหน้า CSS เฉพาะเบราว์เซอร์คำอธิบายประกอบ JSDOC ฯลฯ ตัวแก้ไขต่อไปนี้จะแนะนำการใช้งานและการตั้งค่าของวงเล็บสั้น ๆ :
1. การตั้งค่าโครงการ
1. วงเล็บเปิดอินเทอร์เฟซทั้งหมดนั้นง่ายมากและแถบเมนูด้านบนมีฟังก์ชั่นตัวแก้ไขไฟล์> ออกเท่านั้น ด้านซ้ายเป็นแผนผังไฟล์ของโครงสร้างองค์กรโครงการ ใช้ CTRL/CMD+Shift+H เพื่อโทรออกและปิดแผนผังไฟล์ ด้านขวาคือพื้นที่แก้ไขส่วนบนคือแถบเครื่องมือส่วนตรงกลางคือพื้นที่เอกสารและส่วนล่างคือพื้นที่พร้อมท์
2. เปิดโครงการ ใช้ไฟล์> เปิดคำสั่งโฟลเดอร์เพื่อเปิดโฟลเดอร์โครงการ ชื่อโครงการของแผนผังไฟล์ทางด้านซ้ายจะได้รับการอัปเดตเป็นชื่อโฟลเดอร์โครงการและแผนผังไฟล์จะได้รับการอัปเดตเป็นแผนผังไฟล์ของโครงการปัจจุบัน
คลิกปุ่มซ้ายในชื่อโครงการเพื่อปรากฏเมนูแก้ไขโครงการ เมนูการแก้ไขจะแสดงโครงการประวัติศาสตร์และคำสั่งแก้ไขโครงการ
Open Folder Command: เปิดโครงการใหม่
คำสั่งการตั้งค่าโครงการ: ตั้งค่าที่อยู่เว็บของโครงการปัจจุบันซึ่งจะใช้ในระหว่างการดีบักหน้าและดูตัวอย่าง
ข้อกำหนดการตั้งค่า: ต้องเป็นที่อยู่เว็บที่เริ่มต้นด้วย http: //
ดังที่แสดงในรูปด้านบนเมื่อตั้งค่าเป็น http://127.0.0.1/demo/slide หน้าเว็บที่เกี่ยวข้องจะถูกเปิดผ่านที่อยู่เว็บเมื่อเบราว์เซอร์ดูตัวอย่าง
หากไม่ได้ตั้งค่าหน้าจะเปิดผ่านที่อยู่จดหมายไดรฟ์ของไฟล์
2. การแก้ไขไฟล์
คลิก index.html ในแผนผังไฟล์และเปิดเอกสาร index.html ในพื้นที่หลัก
1. Brackest จะตรวจสอบว่าเอกสารเป็นไปตามข้อกำหนด HTML หรือไม่ ดังที่แสดงในรูปด้านล่างมีบล็อกสไตล์ใน 20 บรรทัดที่ต้องวางไว้ในโหนดหัว
2. วางเคอร์เซอร์บนชื่อฉลากของแอตทริบิวต์คลาสหรือ ID กด Ctrl/Cmd + E (แก้ไข) หรือการแก้ไขออก วงเล็บจะค้นหาไฟล์ CSS ทั้งหมดภายใต้โครงการจากนั้นเปิดตัวแก้ไขแบบฝังเพื่อฝังไว้ในไฟล์ HTML ช่วยให้คุณสามารถปรับเปลี่ยนรหัส CSS ได้อย่างรวดเร็ว
เมื่อแท็กคลาส/ID ปัจจุบันมีคำจำกัดความหลายสไตล์หน้าต่างการแก้ไขจะให้ปุ่มสลับเพื่อสลับสไตล์การแสดงผลหรือคุณสามารถใช้ปุ่มลูกศร Alt + Up/Down เพื่อสลับ
ควรสังเกตว่าวงเล็บจะตรวจจับเอกสาร HTML ปัจจุบันและไฟล์ CSS ทั้งหมดภายใต้โครงการเพื่อค้นหารูปแบบคลาส/ID แม้ว่าไฟล์ CSS บางไฟล์จะไม่ถูกอ้างอิงในเอกสาร HTML ปัจจุบัน
3. วงเล็บยังรองรับการดูตัวอย่าง/การแก้ไขคำจำกัดความของวัตถุ JS อย่างรวดเร็ว ใส่เคอร์เซอร์ลงในชื่อฟังก์ชัน JS กด Ctrl/Cmd + E (แก้ไข) หรือการแก้ไขออก
4. วงเล็บมีตัวเลือกสีในตัวให้รูปแบบการเข้ารหัสสีของ RGBA, Hex และ HSLA ใส่เคอร์เซอร์ลงบนรหัสสีกด CTRL/CMD + E (แก้ไข) คุณต้องใช้ปุ่ม ESC เพื่อออกจากหน้าต่าง Color Collector
3. ตัวอย่างทันที
วงเล็บให้ภาพตัวอย่างทันทีของหน้าเว็บ เมื่อใช้ฟังก์ชั่นนี้วงเล็บจะเรียกเบราว์เซอร์ Chrome เพื่อเปิดหน้าปัจจุบัน หลังจากแก้ไข HTML, CSS, JavaScript และ Saving เนื้อหาที่แก้ไขจะตอบสนองต่อหน้าเว็บในเบราว์เซอร์ทันทีโดยไม่ต้องรีเฟรชหน้าด้วยตนเอง นี่เป็นหนึ่งในไฮไลท์ที่ใหญ่ที่สุดของวงเล็บ ได้รับความสุขด้วยตัวแปลงสัญญาณจอมอนิเตอร์สองตัวคุณสามารถแสดงวงเล็บและโครเมี่ยมบนหน้าจอแยกการปรับเปลี่ยนตัวอย่างทันทีโดยไม่ต้องสลับตัวแก้ไข/เบราว์เซอร์และหน้ารีเฟรช
ข้อ จำกัด บางประการของคุณสมบัติตัวอย่างสดในปัจจุบัน:
ใช้งานได้กับเบราว์เซอร์ Chrome เป็นเบราว์เซอร์เป้าหมายเท่านั้นคุณต้องติดตั้ง Chrome
มันอาศัยการดีบักระยะไกลใน Chrome ซึ่งเปิดใช้งานโดยธงบรรทัดคำสั่ง บน Mac หากคุณใช้ Chrome อยู่แล้วให้เปิดตัวอย่างทันทีวงเล็บจะถามคุณว่าคุณต้องการรีสตาร์ท Chrome เพื่อเปิดใช้งานการดีบักระยะไกลหรือไม่
มีเพียงไฟล์ HTML เดียวเท่านั้นที่สามารถดูตัวอย่างได้ในเวลาเดียวกัน - หากคุณสลับไฟล์ HTML อื่นวงเล็บจะปิดตัวอย่างต้นฉบับ
4. คีย์ลัดบางส่วน
CTRL/CMD+Shift+H สามารถโทรออกและปิดแผนผังไฟล์
CTRL/CMD + E PREEVIEWSED/EDIT CSS Style/JavaScript Function
CTRL/CMD + +/- ซูมเข้าและออกจากขนาดตัวอักษรของพื้นที่แก้ไข
CTRL/CMD + 0 รีเซ็ตขนาดตัวอักษรของพื้นที่แก้ไข
CTRL/CMD + Alt + P เปิดฟังก์ชั่นตัวอย่างทันที
ความคิดเห็น CTRL / CMD + / LINE
CTRL / CMD + Alt + / Block ความคิดเห็น
หมายเหตุ: เมื่อแสดงความคิดเห็นเกี่ยวกับรหัส CSS และรหัส HTML คุณสามารถใช้ปุ่มลัดความคิดเห็นบล็อกเท่านั้น