Brackets.io เปิดตัวเวอร์ชั่น 1.2 เมื่อเร็ว ๆ นี้พร้อมฟีเจอร์ใหม่ที่ยอดเยี่ยมซึ่งคุณสามารถอ่านได้จากบล็อกของพวกเขา เราได้รวบรวมรายการ 10 ส่วนขยายที่ดีที่สุดและเป็นประโยชน์มากที่สุดในวงเล็บ (โดยไม่เรียงตามลำดับ) พร้อมคำแนะนำที่สมบูรณ์สำหรับแต่ละส่วนขยาย
ส่วนขยายของวงเล็บ
1. รหัสพับ
ซึ่งแตกต่างจาก IDEs และตัวแก้ไขรหัสอื่น ๆ มากมายวงเล็บไม่มีตัวเลือกการพับโค้ดตามค่าเริ่มต้น ด้วย Code Folding คุณสามารถยุบส่วนของโค้ดขนาดใหญ่ลงในบรรทัดเดียวได้อย่างง่ายดาย ส่วนขยาย Code Folding มีอยู่ใน Github และจากตัวจัดการส่วนขยายของวงเล็บ
วิธีใช้
หากต้องการพับแท็กที่ซ้อนกันให้คลิกลูกศรลงทางซ้ายของแท็กหลักดังที่แสดงด้านบน หลักการเดียวกันสำหรับ Javascript หรือรูปแบบอื่น ๆ เพียงคลิกที่ลูกศรลงทางด้านซ้ายขององค์ประกอบหลักเพื่อพับคำสั่งที่ซ้อนกันทั้งหมดไว้ในบรรทัดเดียว หากต้องการขยายเพียงคลิกที่เครื่องหมายบวก
หมายเลขบรรทัดของบรรทัดที่ถูกพับจะถูกซ่อนดังนั้นจึงเป็นเรื่องง่ายที่จะมองเห็นเส้นที่ถูกพับเมื่อคุณเน้นที่รหัส
2. Lorem Pixel
มีหลายวิธีในการสร้างข้อความตัวยึดตำแหน่ง แต่นักพัฒนาเว็บส่วนหน้ามักต้องการรูปภาพตัวยึดตำแหน่ง แทนที่จะพยายามสร้างอิมเมจตัวยึดที่ว่างเปล่าให้ใช้ส่วนขยาย Lorem Pixel มันช่วยให้คุณใส่ภาพตัวแทนที่งดงามทุกขนาดที่คุณต้องการ ส่วนที่น่าสนใจเกี่ยวกับ Lorem Pixel คือมันช่วยให้คุณเลือกหมวดหมู่ที่คุณต้องการรูปภาพ
หากยังไม่ดีพอภาพตัวยึดตำแหน่งจะเปลี่ยนไปทุกครั้งที่คุณโหลดหน้าเว็บซ้ำ! ภาพมักจะทำให้ชุดสีผิดเพี้ยนดังนั้น Lorem Pixel ยังให้ตัวเลือก 'โทนสีเทา' ให้คุณใช้เฉพาะภาพที่มีตัวยึดสีขาวดำ ส่วนขยายนี้ขับเคลื่อนโดย lorempixel.com และหาได้จากเครื่องมือจัดการส่วนขยายของ Brackets
วิธีใช้
เมื่อคุณติดตั้งส่วนขยาย Lorem Pixel โลโก้ Lorem Pixel ซึ่งเป็นสี่เหลี่ยมจัตุรัสที่ตรวจสอบจะปรากฏในบานหน้าต่างส่วนขยาย (บานหน้าต่างด้านขวาด้วยปุ่มแสดงตัวอย่างแบบสด) คลิกโลโก้เพื่อเปิดกล่องการตั้งค่า กำหนดขนาดภาพที่ต้องการและหมวดหมู่ภาพที่ต้องการ หากคุณต้องการภาพสีเทาให้ตรวจสอบตัวเลือกสีเทา คัดลอกลิงก์ไปยังคลิปบอร์ดและใช้ตามต้องการหรือแทรกลงในตำแหน่งเคอร์เซอร์ปัจจุบัน
3. Autoprefixer
การเพิ่มคำนำหน้าผู้ขายให้กับรหัสของคุณนั้นน่าเบื่อหน่าย ส่วนขยาย Autoprefixer สามารถช่วยคุณประหยัดเวลาได้มาก (และทำงานได้มาก!) เพราะจะเป็นการเพิ่มส่วนนำหน้าผู้ขายที่จำเป็นให้กับรหัสของคุณโดยอัตโนมัติ มันไม่จำเป็นต้องมีการกำหนดค่าใด ๆ และอัปเดตคำนำหน้าของคุณทุกครั้งที่คุณบันทึกรหัสของคุณ คุณยังสามารถเลือกรหัสและนำหน้าอัตโนมัติหากคุณต้องการ
วิธีใช้
หากต้องการใช้ Autoprefixer เพียงแค่เริ่มเขียนโค้ดที่ไม่มีคำนำหน้า ส่วนขยายจะเพิ่มรหัสนำหน้าโดยอัตโนมัติทันทีที่คุณบันทึก หากต้องการนำหน้ารหัสที่เลือกบางส่วนให้เลือกรหัสจากนั้น แก้ไข แท็บ tab การ เลือกคำนำหน้าอัตโนมัติ
Autoprefixer ยังให้คุณเพิ่มคำนำหน้ากำหนดเองในการตั้งค่า หากต้องการไปที่การตั้งค่าส่วนขยาย: แก้ไข Settings การตั้งค่าตัว แก้ไข อัตโนมัติ
ในการมีรหัสนำหน้าที่สวยงามเรียงซ้อนเปิดใช้งานตัวเลือก น้ำตกภาพ ในการตั้งค่าส่วนขยาย
4. แสดงตัวอย่าง Markdown
Markdown เป็นภาษามาร์คอัปข้อความธรรมดาที่น่ารักและสามารถแปลงเป็น HTML ได้อย่างง่ายดาย Markdown Preview จะแสดง Markdown ที่แสดงด้านล่างของเวอร์ชันข้อความ มันช่วยให้คุณเลือกระหว่างสองสไตล์ที่แตกต่างกัน Github Flavoured Markdown และ Standard Markdown
มีสามชุดรูปแบบที่คุณสามารถเลือกได้สำหรับหน้าต่างแสดงตัวอย่าง - Light, Dark และ Classic แสดงตัวอย่าง Markdown ยังมีตัวเลือกการซิงค์แบบเลื่อน (เปิดใช้งานโดยค่าเริ่มต้น) ส่วนขยายสามารถดาวน์โหลดได้จาก Github หรือจากตัวจัดการส่วนขยายของวงเล็บ
วิธีใช้
เปิดไฟล์. md หรือ. markdown หากคุณติดตั้ง Markdown Preview แล้วปุ่ม M should ควรปรากฏขึ้นทางด้านขวา คลิกที่มันแล้วคุณจะเห็น Markdown ที่แสดงผล หากต้องการเปลี่ยนชุดรูปแบบหรือปิดใช้งานการซิงค์แบบเลื่อนเพียงคลิกที่ไอคอนรูปเฟืองที่มุมบนขวาของส่วนแสดงตัวอย่าง Markdown
5. ไอคอนวงเล็บ
มันสนุกเสมอที่จะเพิ่มสีสันให้ตัวแก้ไขรหัสด้วยไอคอนไฟล์ ไอคอนวงเล็บจะเพิ่มไอคอนที่มีสีสันตามประเภทไฟล์ไปยังไฟล์ทั้งหมดที่อยู่ในแถบด้านข้าง มันมีไอคอนสำหรับประเภทไฟล์ส่วนใหญ่และคุณสามารถโพสต์คำขอไอคอนบนหน้า Github
เคล็ดลับโบนัส:
ไอคอนเครื่องหมายวงเล็บใช้ไอคอนจากโครงการ Ionicons นอกจากนี้คุณยังสามารถตรวจสอบไอคอนไฟล์ส่วนขยาย (แยกของโครงการไอคอนวงเล็บ) ซึ่งใช้ไอคอนจากโครงการ Font Awesome มันเดือดลงไปตามความชอบส่วนตัวในที่สุด
วิธีใช้
เพียงติดตั้งส่วนขยายและโหลดวงเล็บ (F5)
6. แถบเครื่องมือเอกสาร
วงเล็บไม่มีแท็บ ความจริงธรรมดาและเรียบง่าย ส่วนขยายของแถบเครื่องมือเอกสารเพิ่มฟังก์ชันนี้ ไฟล์ทั้งหมดที่อยู่ในส่วน 'ใช้งาน' ของแถบด้านข้างจะแสดงเป็นแท็บในส่วนขยายนี้ คุณสามารถซ่อนแถบด้านข้างได้เช่นกันและใช้แถบเครื่องมือเอกสารเท่านั้นสำหรับอินเทอร์เฟซที่ดี
วิธีใช้
ติดตั้งส่วนขยายและโหลดวงเล็บ (F5)
7. วงเล็บ Git
ทุกสิ่งพยายามรวมเข้ากับ Git ในทุกวันนี้ มันเป็นระบบการควบคุมเวอร์ชันที่นิยมมากที่สุด (VCS) Brackets Git นั้นง่ายที่สุดในบรรดาส่วนขยายที่คล้ายกัน มันมีคุณสมบัติคอมไพล์ที่คุณต้องการ คุณสามารถยอมรับการเปลี่ยนแปลงจากภายในวงเล็บได้อย่างง่ายดายกดและดึงการเปลี่ยนแปลงได้ด้วยคลิกเดียวดูประวัติไฟล์และประวัติการกระทำทั้งหมด หากคุณเก่งเรื่อง Git คุณจะไม่พบปัญหาใด ๆ กับส่วนขยายนี้
หมายเหตุ: ในการใช้ Git วงเล็บคุณต้องมี Git ติดตั้งในคอมพิวเตอร์ของคุณ หลังจากติดตั้งส่วนขยายคุณอาจต้องป้อนพา ธ ไปยังไฟล์เรียกทำงาน Git ของคุณ (หากไม่ได้อยู่ในพา ธ เริ่มต้น)
วิธีใช้
การใช้วงเล็บ Git ค่อนข้างตรงไปตรงมา ทำให้โฟลเดอร์ repith Github ในพื้นที่ของคุณเป็นโฟลเดอร์โครงการในวงเล็บ จากนั้นเปิดไฟล์ทำการเปลี่ยนแปลงและบันทึก จากนั้นคุณสามารถไปข้างหน้าและคลิกที่ไอคอน Git ทางด้านขวาและสิ่งนี้จะเปิดบานหน้าต่าง Git ของวงเล็บที่ด้านล่าง มันจะแสดงรายการการแก้ไขใด ๆ ที่คุณทำกับไฟล์ของคุณ
ตรวจสอบว่าคุณต้องการส่งไฟล์ใดจากนั้นคลิกที่ปุ่ม Commit นี่จะเป็นการเปิดรายการป๊อปอัพที่แสดงการเปลี่ยนแปลงที่เกิดขึ้น ป้อนข้อความยืนยันของคุณแล้วคลิกตกลง และคุณได้ยืนยันไฟล์ให้กับ Git โดยตรงจากวงเล็บ!
หลังจากคอมมิชชันเพียงคลิกที่ปุ่มกด (มันยังแสดงจำนวนของการคอมมิทที่ไม่ได้ซิงค์ดังที่คุณเห็นใน GIF ด้านบน)
การกำหนดการตั้งค่า
เปิดบานหน้าต่าง Git ของวงเล็บแล้วคลิกที่ปุ่มการตั้งค่า (ที่สองจากด้านขวา) คุณสามารถกำหนดค่า Git ของวงเล็บได้ตามต้องการ
เพื่อดูไฟล์และประวัติการกระทำ
เพียงคลิกที่ปุ่มที่เกี่ยวข้องเพื่อดูประวัติไฟล์และประวัติการกระทำของคุณอยู่ในรายการที่สวยงาม เราได้พูดถึงคุณสามารถเปลี่ยนรูปแทนตัวเป็นรูปขาวดำรูปประจำตัวสีหรือ Gravatar ของคุณหรือไม่?
8. ผ้าสำลีทุกสิ่ง
ขุย ทุก สิ่ง ทุกอย่าง ส่วนขยายนี้จะปล่อยไฟล์ทั้งหมดของคุณในคราวเดียว มีประโยชน์มากเมื่อคุณมีโครงการขนาดใหญ่ที่มีไฟล์เชื่อมต่อมากมาย ข้อผิดพลาดผ้าสำลีทั้งหมดแสดงขึ้นในบานหน้าต่าง
วิธีใช้
หากต้องการใช้ Lint ALL Things เพียงไปที่แท็บ มุมมอง แล้วคลิก Lint ทั้งโครงการ
9. วงเล็บสิ่งที่ต้องทำ
วงเล็บใหญ่สิ่งที่ต้องทำคือส่วนขยายขนาดเล็กที่เรียบร้อยซึ่งแสดงความคิดเห็นสิ่งที่ต้องทำทั้งหมดในรูปแบบรายการที่เรียบร้อย โดยค่าเริ่มต้นรองรับ 5 แท็ก - สิ่งที่ต้องทำ, บันทึก, แก้ไข, เปลี่ยนและในอนาคต คุณสามารถทำเครื่องหมายความคิดเห็นว่าเสร็จแล้ว ในตัวเลือกมุมมองคุณสามารถกรองความคิดเห็นตามแท็ก วงเล็บใหญ่สิ่งที่ต้องทำช่วยให้คุณกำหนดสีที่กำหนดเองสำหรับแท็กเช่นเดียวกับแท็กของคุณเองเช่นกันในกรณีที่คุณต้องการสร้างสรรค์ความคิดเห็นของคุณ
หากคุณกำลังทำงานในโครงการขนาดใหญ่และต้องการติดตามความคิดเห็นจากหลายไฟล์คุณสามารถเปลี่ยนขอบเขตการค้นหาของวงเล็บเหลี่ยมสิ่งที่ต้องทำ ต้องการยกเว้นบางไฟล์และโฟลเดอร์เช่นโฟลเดอร์ผู้จัดจำหน่ายหรือไม่ ไม่ต้องห่วง. เพียงเพิ่มเส้นทางในรายการยกเว้น คุณสามารถกำหนดการตั้งค่าเองสำหรับแต่ละโครงการโดยเพิ่มไฟล์. todo ในไดเรกทอรีโครงการราก
คุณสามารถดูตัวเลือกการตั้งค่าทั้งหมดได้ในเอกสาร GitHub
วิธีใช้
ในการใช้วงเล็บเหลี่ยมสิ่งที่ต้องทำเพียงเพิ่มความคิดเห็นในรหัสของคุณด้วยแท็กภายใน ชื่อแท็กจะต้องเป็นตัวพิมพ์ใหญ่ตามด้วยเครื่องหมายโคลอน (:) หากต้องการดูสิ่งที่ต้องทำทั้งหมดเพียงคลิกไอคอนสิ่งที่ต้องทำในบานหน้าต่างส่วนขยายด้านขวา
การกำหนดค่า:
- วิธีอนุญาตให้ใช้ความคิดเห็น HTML ของ Todo: เพียงแค่เปิดการตั้งค่า - คลิกที่ไอคอน Todo →การตั้งค่า (ไอคอนรูปเฟือง) - และคลิกเพื่อเปิดไฟล์. todo ในไฟล์นี้เพิ่มรหัสนี้:
{"regex": {"คำนำหน้า": "(? :)"}}
- ในการเปลี่ยนขอบเขตการค้นหา: เพิ่มรหัสนี้ไปยังไฟล์. tood:
{"ค้นหา": {"ขอบเขต": "โครงการของฉัน"}} - ในการแยกไฟล์ / โฟลเดอร์ / นามสกุลไฟล์ออกจากขอบเขตการค้นหา: เพิ่มรหัสนี้ไปยังไฟล์. todo:
{"ค้นหา": {"ขอบเขต": "โครงการของฉัน"“ แยกผู้ถือ“: [“ ผู้ประกาศของคุณ”]
"แยกไฟล์": ["yourfile"] "แยกไฟล์": [".yourextension"]}}
10. บรรเจิด
Beautify ทำให้โค้ดของคุณดูดี มันแก้ไขช่องว่างเยื้องและบรรทัด
วิธีใช้
มันใช้งานง่ายมาก Beautify สิ่งที่คุณต้องทำคือ เลือก รหัสบางส่วน> คลิกขวา > บรรเจิด
หรือมิฉะนั้นคุณสามารถตรงไปที่แท็บ แก้ไข แล้วคลิก ' สวยงาม '
