เครื่องมือแก้ไขโค้ดสามารถบอกใบ้ถึงระดับการซ้อนโค้ดอย่างไรโดยไม่ต้องใช้การเยื้อง [ปิด]

ฉันได้เขียนโปรแกรมแก้ไขข้อความ XMLที่ให้ 2 ตัวเลือกมุมมองสำหรับข้อความ XML เดียวกันหนึ่งเยื้อง (จริง), อื่น ๆ ชิดซ้าย แรงจูงใจสำหรับมุมมองที่ถูกต้องทางซ้ายคือการช่วยให้ผู้ใช้เห็น 'อักขระช่องว่างที่พวกเขากำลังใช้สำหรับการเยื้องของข้อความธรรมดาหรือรหัส XPath โดยไม่มีการแทรกแซงจากการเยื้องซึ่งเป็นผลข้างเคียงโดยอัตโนมัติของบริบท XML

ฉันต้องการที่จะให้เบาะแสที่มองเห็น (ในส่วนที่ไม่สามารถแก้ไขได้ของการแก้ไข) สำหรับโหมดชิดซ้ายที่จะช่วยให้ผู้ใช้ แต่ไม่ได้รับการทำอย่างละเอียดเกินไป

ฉันลองใช้สายเชื่อมต่อ แต่มันดูยุ่งเกินไป สิ่งที่ดีที่สุดที่ฉันเคยได้รับมาจนถึงตอนนี้แสดงอยู่ในสกรีนช็อตของเครื่องมือแก้ไขด้านล่าง แต่ฉันกำลังมองหาทางเลือกที่ดีกว่า / ง่ายกว่า (ซึ่งไม่ต้องการรหัสมากเกินไป)

[แก้ไข]

รับแนวคิด heatmap (จาก: @jimp) ฉันได้รับสิ่งนี้และ 3 ทางเลือก - ระบุว่า a, b และ c:

ส่วนต่อไปนี้อธิบายคำตอบที่ยอมรับว่าเป็นข้อเสนอโดยรวบรวมแนวคิดจากคำตอบและความคิดเห็นอื่นจำนวนมาก เนื่องจากคำถามนี้เป็นวิกิชุมชนตอนนี้โปรดอย่าลังเลที่จะอัปเดต

NestView

ชื่อสำหรับแนวคิดนี้ซึ่งมีวิธีการแสดงภาพเพื่อปรับปรุงความสามารถในการอ่านของโค้ดที่ซ้อนกันโดยไม่ต้องใช้การเยื้อง

เส้นโค้ง

ชื่อของเส้นที่แรเงาแตกต่างกันภายใน NestView

ภาพด้านบนแสดง NestView ที่ใช้เพื่อช่วยให้เห็นภาพตัวอย่าง XML แม้ว่า XML จะใช้สำหรับภาพประกอบนี้ แต่มีการใช้ไวยากรณ์รหัสอื่น ๆ ที่ใช้ในการซ้อนสำหรับภาพประกอบนี้

ภาพรวม:

1. เส้นชั้นความสูงจะถูกแรเงา (เหมือนในแผนที่ความร้อน) เพื่อถ่ายทอดระดับการทำรัง

2. เส้นชั้นความสูงมีมุมเพื่อแสดงเมื่อระดับการซ้อนถูกเปิดหรือปิด

3. เส้นชั้นความสูงจะเชื่อมโยงการเริ่มต้นของระดับการซ้อนกับส่วนท้ายที่เกี่ยวข้อง

4. ความกว้างที่รวมกันของเส้นชั้นความสูงให้ภาพที่มองเห็นได้ของระดับการซ้อนนอกเหนือไปจากแผ่นความร้อน

5. ความกว้างของ NestView อาจปรับขนาดได้ด้วยตนเอง แต่ไม่ควรเปลี่ยนแปลงเมื่อมีการเปลี่ยนแปลงรหัส เส้นรูปทรงสามารถถูกบีบอัดหรือถูกตัดทอนเพื่อให้บรรลุนี้

6. บางครั้งบรรทัดที่ว่างเปล่าจะใช้รหัสเพื่อแยกข้อความเป็นชิ้นย่อยได้มากขึ้น บรรทัดดังกล่าวอาจก่อให้เกิดพฤติกรรมพิเศษใน NestView ตัวอย่างเช่น heatmap อาจถูกรีเซ็ตหรือใช้เส้นสีพื้นหลังหรือทั้งสองอย่าง

7. เส้นชั้นความสูงหนึ่งเส้นหรือมากกว่าที่เชื่อมโยงกับรหัสที่เลือกในปัจจุบันสามารถเน้นได้ เส้นชั้นความสูงที่เกี่ยวข้องกับระดับรหัสที่เลือกจะเน้นมากที่สุด แต่เส้นชั้นความสูงอื่น ๆ สามารถ 'สว่างขึ้น' เพิ่มเติมเพื่อช่วยเน้นกลุ่มที่ซ้อนกันที่มีอยู่

8. พฤติกรรมที่แตกต่าง (เช่นการพับโค้ดหรือการเลือกรหัส) สามารถเชื่อมโยงกับการคลิก / ดับเบิลคลิกบนเส้นรูปโค้ง

9. ส่วนต่าง ๆ ของเส้นชั้นความสูง (นำหน้า, กลางหรือตามขอบ) อาจมีพฤติกรรมแบบไดนามิกที่แตกต่างกัน

10. เคล็ดลับเครื่องมือสามารถแสดงบนเหตุการณ์โฮเวอร์เมาส์เหนือเส้นชั้นความสูง

11. NestView ได้รับการปรับปรุงอย่างต่อเนื่องเมื่อมีการแก้ไขรหัส ในกรณีที่การทำรังไม่ได้ตั้งสมมติฐานอย่างสมดุลสามารถทำได้ในกรณีที่ระดับการซ้อนควรจบลง แต่เส้นเน้นเส้นชั้นความสูงชั่วคราวที่เกี่ยวข้องจะต้องถูกเน้นในบางวิธีเพื่อเป็นการเตือน

12. สามารถรองรับการลากและวางของ Contour Lines ได้ พฤติกรรมอาจแตกต่างกันไปตามส่วนของเส้นชั้นความสูงที่ถูกลาก

13. คุณสมบัติที่พบได้ทั่วไปที่ขอบซ้ายเช่นหมายเลขบรรทัดและการเน้นสีเพื่อหาข้อผิดพลาดและสถานะการเปลี่ยนแปลงอาจซ้อนทับ NestView

ฟังก์ชั่นเพิ่มเติม

ข้อเสนอนี้กล่าวถึงปัญหาเพิ่มเติมหลายประการโดยส่วนใหญ่อยู่นอกขอบเขตของคำถามเดิม แต่มีผลข้างเคียงที่เป็นประโยชน์

มองเห็นการเชื่อมโยงจุดเริ่มต้นและจุดสิ้นสุดของภูมิภาคที่ซ้อนกัน

เส้นชั้นความสูงจะเชื่อมต่อจุดเริ่มต้นและจุดสิ้นสุดของแต่ละระดับที่ซ้อนกัน

เน้นบริบทของบรรทัดที่เลือกในปัจจุบัน

เมื่อเลือกรหัสแล้วระบบจะไฮไลต์ระดับรังที่เกี่ยวข้องใน NestView

แยกความแตกต่างระหว่างขอบเขตของรหัสในระดับซ้อนกัน

ในกรณีของ XML เฉดสีที่ต่างกันสามารถใช้กับเนมสเปซที่แตกต่างกันได้ ภาษาโปรแกรม (เช่น c #) รองรับการตั้งชื่อภูมิภาคที่สามารถใช้งานได้ในลักษณะเดียวกัน

แบ่งพื้นที่ภายในพื้นที่ทำรังออกเป็นบล็อคภาพต่างๆ

มีการแทรกบรรทัดเพิ่มเติมลงในรหัสเพื่อช่วยให้สามารถอ่านได้ง่าย สามารถใช้บรรทัดว่างเหล่านี้เพื่อรีเซ็ตระดับความอิ่มตัวของเส้นชั้นความสูงของ NestView

มุมมองโค้ดหลายคอลัมน์

รหัสที่ไม่มีการเยื้องทำให้การใช้มุมมองแบบหลายคอลัมน์มีประสิทธิภาพมากขึ้นเนื่องจากการตัดคำหรือการเลื่อนแนวนอนนั้นมีแนวโน้มน้อยกว่าที่ต้องการ ในมุมมองนี้เมื่อโค้ดได้มาถึงด้านล่างของคอลัมน์หนึ่งแล้วโค้ดจะไหลไปยังคอลัมน์ถัดไป:

การใช้นอกเหนือจากการให้ความช่วยเหลือด้านภาพ

ตามที่เสนอในภาพรวม NestView สามารถให้บริการช่วงของการแก้ไขและคุณสมบัติการเลือกซึ่งจะสอดคล้องกับสิ่งที่คาดหวังจากการควบคุม TreeView ความแตกต่างที่สำคัญคือโหนด TreeView ทั่วไปมี 2 ส่วนคือส่วนขยายและไอคอนโหนด เส้นชั้นความสูงของ NestView สามารถมีได้มากถึง 3 ส่วนคือตัวเปิด (แบบลาด) ตัวเชื่อมต่อ (แนวตั้ง) และแบบปิด (แบบเอียง)

ในการเยื้อง

NestView นำเสนอควบคู่ไปกับการเติมโค้ดที่ไม่เยื้อง แต่ไม่น่าจะมาแทนที่มุมมองรหัสเยื้องแบบดั้งเดิม

เป็นไปได้ว่าโซลูชันใด ๆ ที่ใช้ NestView จะให้วิธีการสลับระหว่างการดูโค้ดที่เยื้องและไม่เยื้องโดยไม่มีผลกับข้อความโค้ดใด ๆ รวมถึงอักขระช่องว่าง เทคนิคหนึ่งสำหรับมุมมองที่เยื้องจะเป็น 'การจัดรูปแบบเสมือน' - ซึ่งใช้ระยะขอบซ้ายแบบไดนามิกแทนแท็บหรืออักขระเว้นวรรค ข้อมูลระดับการซ้อนเดียวกันกับที่ใช้ในการเรนเดอร์ NestView แบบไดนามิกยังสามารถใช้สำหรับมุมมองที่เยื้องเข้าด้วยกัน

การพิมพ์

การเยื้องจะมีความสำคัญสำหรับความสามารถในการอ่านของรหัสที่พิมพ์ ที่นี่ไม่มีแท็บ / ช่องว่างอักขระและระยะขอบซ้ายแบบไดนามิกหมายความว่าข้อความสามารถตัดที่ขอบขวาและยังคงความสมบูรณ์ของมุมมองเยื้อง หมายเลขบรรทัดสามารถใช้เป็นตัวทำเครื่องหมายภาพที่ระบุว่าโค้ดห่อด้วยคำและตำแหน่งของการเยื้องที่แน่นอน:

Screen Real-Estate: Flat Vs เยื้อง

การตอบคำถามว่า NestView ใช้อสังหาริมทรัพย์ที่มีค่าบนหน้าจอหรือไม่:

เส้นรูปโค้งทำงานได้ดีกับความกว้างเหมือนกับความกว้างอักขระของตัวแก้ไขรหัส ความกว้างของ NestView ที่มีความกว้าง 12 ตัวอักษรจึงสามารถรองรับการซ้อน 12 ระดับก่อนที่จะตัดหรือบีบอัดเส้นชั้นความสูง

หากมุมมองที่เยื้องใช้ความกว้าง 3 อักขระสำหรับแต่ละระดับการซ้อนจะมีการบันทึกพื้นที่ว่างไว้จนกว่าการซ้อนจะถึง 4 ระดับของการซ้อนหลังจากระดับการซ้อนนี้มุมมองแบบแบนจะมีข้อดีในการประหยัดพื้นที่ซึ่งเพิ่มขึ้นในแต่ละระดับการซ้อน

หมายเหตุ: แนะนำให้ใช้การเยื้องต่ำสุดของความกว้าง 4 อักขระสำหรับโค้ดอย่างไรก็ตาม XML มักจะจัดการด้วยความที่น้อยกว่า นอกจากนี้การจัดรูปแบบเสมือนจริงยังอนุญาตให้ใช้การเยื้องน้อยลงเนื่องจากไม่มีความเสี่ยงของปัญหาการจัดตำแหน่ง

การเปรียบเทียบ 2 มุมมองแสดงไว้ด้านล่าง:

จากข้อมูลข้างต้นอาจสรุปได้ว่าการเลือกสไตล์การดูจะขึ้นอยู่กับปัจจัยอื่น ๆ ข้อยกเว้นหนึ่งข้อก็คือพื้นที่หน้าจอเป็นพรีเมี่ยมตัวอย่างเช่นบน Netbook / แท็บเล็ตหรือเมื่อเปิดหน้าต่างรหัสหลายบาน ในกรณีเหล่านี้ NestView ที่ปรับขนาดได้ดูเหมือนจะเป็นผู้ชนะที่ชัดเจน

ใช้เคส

ตัวอย่างของตัวอย่างจริงที่ NestView อาจเป็นตัวเลือกที่มีประโยชน์:

1. ที่ซึ่งธุรกิจอสังหาริมทรัพย์อยู่ในระดับพรีเมี่ยม

   บนอุปกรณ์เช่นแท็บเล็ตสมุดบันทึกและสมาร์ทโฟน

   ข เมื่อแสดงรหัสบนเว็บไซต์

   ค เมื่อหน้าต่างรหัสหลายหน้าต่างต้องปรากฏบนเดสก์ท็อปพร้อมกัน

2. ในกรณีที่การเว้นวรรคเยื้องที่สอดคล้องกันของข้อความภายในรหัสเป็นสำคัญ

3. สำหรับการตรวจสอบโค้ดที่ซ้อนกันอย่างล้ำลึก ตัวอย่างเช่นที่ sub-languages ​​(เช่น Linq ใน C # หรือ XPath ใน XSLT) อาจทำให้เกิดการซ้อนในระดับสูง

การเข้าถึง

ต้องมีการปรับขนาดและตัวเลือกสีเพื่อช่วยเหลือผู้พิการทางสายตาและเพื่อให้เหมาะสมกับสภาพแวดล้อมและความชอบส่วนตัว:

ความเข้ากันได้ของรหัสที่แก้ไขกับระบบอื่น ๆ

โซลูชันที่รวมตัวเลือก NestView ควรมีความสามารถในการลอกแท็บนำและอักขระช่องว่าง (ระบุว่ามีเพียงบทบาทการจัดรูปแบบ) จากโค้ดที่นำเข้า จากนั้นเมื่อถูกปล้นรหัสจะสามารถแสดงผลได้อย่างเรียบร้อยทั้งในมุมมองด้านซ้ายและด้านเยื้องที่ไม่มีการเปลี่ยนแปลง สำหรับผู้ใช้หลายคนที่ต้องพึ่งพาระบบเช่นการผสานและเครื่องมือต่าง ๆ ที่ไม่ได้คำนึงถึงช่องว่างสิ่งนี้จะเป็นข้อกังวลหลัก

งานอื่น ๆ :

การสร้างภาพมาร์กอัปที่ทับซ้อนกัน

งานวิจัยตีพิมพ์โดยเวนเดล Piezวันจากปี 2004 ที่อยู่ในประเด็นของการสร้างภาพของมาร์กอัปที่ทับซ้อนกันโดยเฉพาะที่LMNL ซึ่งรวมถึงกราฟิก SVG ที่มีความคล้ายคลึงกันอย่างมีนัยสำคัญกับข้อเสนอ NestView เช่นนี้จะได้รับการยอมรับที่นี่

ความแตกต่างของภาพมีความชัดเจนในภาพ (ด้านล่าง) ความแตกต่างที่สำคัญในการทำงานคือ NestView มีไว้สำหรับ XML หรือรหัสที่ซ้อนกันเท่านั้นในขณะที่กราฟิกของ Wendell Piez ได้รับการออกแบบมาเพื่อแสดงการซ้อนซ้อนกัน

กราฟิกข้างต้นได้รับการทำซ้ำโดยได้รับอนุญาตจาก http://www.piez.org

แหล่งที่มา:

1. ต่อมาร์กอัป Hermenutic
2. ครึ่งก้าวสู่ LMNL

ฉันพยายามตอบคำถามของฉันเองที่นี่ แต่นี่เป็นการรวมแนวคิด heatmap จาก @jimp และยังเป็นแนวคิด 'ทำให้เป็นมากกว่า XML-ish' จาก @Andrea:

หวังว่าสีในแผนที่ความร้อนพร้อมกับเส้นเหลี่ยมช่วยดึงดูดสายตาระหว่างแท็กเริ่มต้นและแท็กสิ้นสุด การลบเส้นคั่นแนวนอนช่วยเพิ่ม 'การไหล' ตั้งแต่ต้นจนจบ ในขณะที่ผู้ใช้เลือกด้วยองค์ประกอบส่วนการจับคู่ในแผนที่ความร้อนสามารถเน้นในบางวิธี - อาจจะมีเส้นขอบที่ส่องแสง (ดังแสดง)

แก้ไข ได้ตัดสินใจที่จะไปกับเรื่องนี้อาจจะต้องมีตัวเลือกผู้ใช้สำหรับสี ภาพหน้าจอ 'พร้อมการผลิต':

และสำหรับการเปรียบเทียบ ... มุมมองเยื้องทางเลือก:

แก้ไขตอนนี้สำหรับกรณีที่ซ้อนกันมากขึ้น - ทดสอบทักษะการวาดของฉัน ...

แนวคิดหนึ่งอาจลองและเพิ่ม 3D ลงในข้อความ เพิ่ม / ลดขนาดตัวอักษรตามระดับที่อยู่

ตัวอย่างเช่นรหัสนี้:

จะมีลักษณะเช่นนี้:

นั่นอาจเป็นเรื่องที่น่ารำคาญที่จะทำงานด้วยเนื่องจากสูญเสียการจัดตำแหน่งข้อความในระดับที่ต่างกัน ความคิดอื่น เปลี่ยนความอิ่มตัวของแต่ละระดับ:

มันจะดีกว่าสำหรับสิ่งที่ลึกจริงๆ? ไม่แน่ใจ...

จริง ๆ แล้วฉันชอบความคิดการสร้างภาพร่องของคุณมาก มันง่ายที่จะรวมกลุ่มสิ่งต่าง ๆ เข้าด้วยกัน อาจรวมกับหนึ่งในความคิดเหล่านี้มันจะดูดีขึ้นหรือมากขึ้น crappier ;)

เมื่อไม่นานมานี้ฉันได้ทำแผนที่แสดงความร้อนใน C. อาจสนุกกับการระดมสมอง:

ชิดซ้าย:

เพียงแค่ปรับแต่งความคิดดั้งเดิมของคุณและเปลี่ยนจากสี่เหลี่ยมเป็นแคปซูล ฉันคิดว่าเวอร์ชันเหล่านี้ (รวมถึงต้นฉบับของคุณ) อ่านง่ายกว่าเพราะมีความซับซ้อนน้อยกว่ารุ่นที่แสดงการซ้อนผ่านการซ้อนองค์ประกอบการแสดงผล ฉันคิดว่าองค์ประกอบของต้นไม้ถ่ายทอดข้อมูลด้วยวิธีที่เรียบง่ายกว่า

ฉันคิดว่าด้านซ้ายนั้นยอดเยี่ยมสำหรับการแสดงการเยื้องโดยตรงในขณะที่ด้านขวาดีกว่าในการถ่ายทอดความสัมพันธ์ที่ซ้อนกัน

ความคิดของฉัน:

การทำรังมีลักษณะเหมือนการทำรัง ความกว้างแนวนอนของแต่ละชั้นไม่จำเป็นต้องกว้างมาก

ฉันชอบความคิด ข้อเสนอแนะของฉันเพื่อให้ "ไม่ว่าง" ลงไปคือการใช้การไล่ระดับสีแทนการใช้กำลังสอง มันจะลดทอนเส้น บางทีสีที่แตกต่างกันสำหรับการเยื้องอย่างมาก

ฉันจะบอกว่าทุกสิ่งที่คุณมีเป็นสิ่งที่ดี แต่บล็อกเล็กน้อยสำหรับรสนิยมของฉัน

ความคิดเห็นของฉัน: ฉันได้รับการดิ้นรนอย่างต่อเนื่องกับวิธีการที่ Visual Studio IDE เยื้อง ฉันชอบที่จะใช้สิ่งนี้หรือรูปแบบ

ดังนั้นลองจินตนาการว่าลิงค์นั้นไม่มีเส้นและสอดคล้องกับ xml / code ปัจจุบันของคุณ

เนื่องจากคุณกล่าวว่าการสร้างภาพข้อมูลต้องมีอยู่ในระยะขอบ (ซ้าย?) ที่ไม่สามารถแก้ไขได้ฉันเชื่อว่าหมายความว่าการสร้างภาพข้อมูลไม่สามารถสอดแทรกหรืออยู่ด้านหลังรหัสได้

บางทีแผนที่ความร้อนในคอลัมน์ด้านซ้ายด้วยสีที่สว่างกว่าซึ่งบ่งบอกการเยื้องที่ลึกซึ้งยิ่งขึ้น? ทำให้ขนาดขอบคงที่ด้วยการสร้างภาพเหมือนสิ่งที่คุณมี (คาดว่าจะจากซ้ายไปขวาเหมือนกับการเยื้อง) ที่ใช้พื้นที่ทั้งหมดที่กำหนดตามการเยื้องสูงสุดตามที่กำหนดโดยความลึกของ DOM แบบไดนามิก

หากคุณยินดีที่จะแยกสาขาในภูมิภาคของบรรณาธิการฉันจะแนะนำสิ่งที่คล้ายกันมาก แต่เป็นพื้นหลังของเอกสาร พื้นที่แรเงาจะเป็นตำแหน่งที่ช่องว่างจะเป็นถ้าเปิดใช้งานการเยื้อง ในกรณีนี้ฉันจะใช้สีทึบและสีอ่อนซึ่งตัดกับการเน้นข้อความ

jGRASP ทำสิ่งนี้โดยใช้เครื่องหมายภาพในระยะขอบ:

มันยังจำได้เมื่อคุณใช้การวนซ้ำและใช้สายชนิดอื่นเพื่อแสดงการวนซ้ำภายในนั้น

แค่คิดว่าฉันจะชี้ให้เห็นว่าตัวแก้ไขที่มีอยู่ทำอย่างไร

ไม่ใช่ความคิดที่ดี แต่ต้องอ้างอิงระยะขอบด้านซ้ายเพื่อดูบล็อกของฉันอย่างชัดเจนอาจทำให้เกิดความรำคาญเล็กน้อย นั่นไม่ได้คิดเกี่ยวกับอสังหาริมทรัพย์จอหรือสิ่งที่อาจเริ่มดูเหมือนว่าถ้าโครงสร้างลึกมาก

เนื่องจากแรงจูงใจคือการช่วยให้ผู้ใช้เห็น 'อักขระช่องว่างที่ผู้ใช้ใช้สำหรับการย่อหน้าคุณสามารถแสดงอักขระช่องว่างสีขาวได้

ฉันไม่ได้พูดถึงตัวละครภาพพิเศษเช่นเครื่องหมายวรรคเพียงแค่ไฮไลท์ ช่องว่างในสีเหลืองแท็บเป็นสีเขียว (หรืออะไรก็ตาม)

สำหรับปัญหามาร์จิ้น / การซ้อนคุณสามารถย้ายมาร์จิ้นสำหรับแต่ละบล็อคได้ไม่มีอะไรที่บอกว่าระยะขอบจะต้องเป็นเส้นตรง

ฉันแน่ใจว่านี่ไม่ใช่ความคิดใหม่

บางสิ่งเช่นนี้

ทำไมไม่เปิดและปิดวงเล็บ?

1. การเยื้องหมายถึงการบรรจุ: (และ) หมายถึงการเขียนโปรแกรมอย่างแท้จริง
2. (และ) แต่ละตัวมีอักขระเดียว: แถบด้านซ้ายจะบางมาก
3. องค์ประกอบที่ว่างเปล่าด่างได้อย่างง่ายดาย: use () ในบรรทัดเดียวกัน
4. เนื้อหาขององค์ประกอบไม่จำเป็นต้องมีเงื่อนงำภาพ: ช่องว่างนั้นดีกว่ามาก
5. ตำแหน่งเคอร์เซอร์ทางด้านขวาสามารถจับคู่โดยบล็อกที่มีอยู่ทางด้านซ้าย: เพิ่มสีแบบไดนามิกไปยังตัวอักษรในคอลัมน์ด้วย (และ)
6. คุณสามารถเพิ่ม XML-ish ให้มากขึ้นโดยใช้ <และ> ซึ่งดูดีกว่าจากระยะไกล

เป็นกลุ่มสามารถทำสิ่งที่คล้ายกันอยู่แล้วแม้ว่าจะไม่สวยเท่าที่ควร

มีหลายวิธีในการทำ "การพับโค้ด" ใน Vim หนึ่งในนั้นขึ้นอยู่กับกฎการพับไวยากรณ์ เมื่อทำสิ่งนี้เสร็จแล้วโค้ดสามารถถูกพับโดยใช้โครงสร้างเค้าร่างแบบซ้อนและ "FoldColumn" สามารถใช้เพื่อให้กราฟิก .

foldcolumn สามารถให้การแทนการซ้อนโดยไม่คำนึงถึง foldmethod แต่เมธอดที่อิงกับไวยากรณ์เป็นวิธีที่เหมาะสมสำหรับสิ่งที่คุณต้องการ ฉันไม่แน่ใจว่ามีกฎการพับตามไวยากรณ์ไว้ล่วงหน้าสำหรับ xml หรือไม่ฉันคิดว่าอาจจะมี

ฉันคิดว่าคุณอยู่ในเส้นทางที่ถูกต้องด้วยตัวเลือก B และ C: รวมถึงการระบายสีทั้งความกว้างและความร้อน ฉันชอบตัวเลือก B มากกว่า C ในขณะนี้เพราะมันรบกวนน้อยกว่า (ทั้งกว้างและเจือจางหรือแคบและรุนแรงมากกว่าบล็อกที่หนักมากกลาง C) ข้อเสียข้อเดียวคือคุณต้องเลือก สร้างกราฟใหม่ทั้งหมดหากคุณแทรกระดับที่ใดที่หนึ่ง ฉันคิดว่าคุณสามารถทำให้บล็อกเล็กลงได้ 1 หรือ 2 px น่าจะเพียงพอแล้ว มันไม่จำเป็นต้องมากนักเพียงแค่ต้องแยกแยะได้ โดยเฉพาะอย่างยิ่งเมื่อผู้คนคาดว่าจะใช้โปรแกรมแก้ไขหลายครั้งผลที่ไม่สร้างความรำคาญและความละเอียดอ่อนมากขึ้นจะทำงานได้ง่ายขึ้นเพราะพวกเขาไม่ได้หันเหความสนใจมากนัก

สิ่งหนึ่งที่สำคัญเมื่อใช้ตัวแก้ไขแปลก ๆ คือการเน้นขอบเขตปัจจุบัน: เมื่อเลือกบรรทัดในตัวแก้ไขคุณจำเป็นต้องดูองค์ประกอบใด ๆ ที่มีอยู่และหยุดอยู่ตรงไหน คุณยังสามารถไฮไลต์ต้นไม้ขึ้นมาได้ (องค์ประกอบใดเป็นลูกของ) ฉันคิดว่าเป็นปัญหาที่แยกต่างหากที่ต้องการการจัดการและคิดออกและจะมีอิทธิพลต่อวิธีที่ผู้ใช้จะให้คะแนนประสบการณ์ของพวกเขากับบรรณาธิการ

สิ่งหนึ่งที่ฉันยังไม่ได้กล่าวถึงคือสิ่งที่คุณสามารถทำได้ด้วยเฉดสีที่อยู่ด้านบนของเอฟเฟ็กต์ความอิ่มตัวที่คุณคาดหวังไว้ คำแนะนำของฉันคือการเปลี่ยนสีของรังที่ตัวชี้อยู่ สิ่งนี้จะช่วยให้ผู้ใช้แยกแยะความแตกต่างของเส้นที่เป็นส่วนหนึ่งของรังได้ง่ายขึ้นเมื่อเทียบกับพี่น้องระหว่างทาง

เมื่อใช้สิ่งที่มีสีสันโปรดตระหนักถึงความตาบอดสีและเลือกสีที่สามารถแยกได้ในระดับสากลหรือเสนอทางเลือกบางอย่างเพื่อให้ผู้คนเลือก

ตัวเลือกหนึ่งซึ่งสามารถใช้ร่วมกับคำแนะนำอื่น ๆ ได้คือใช้คำแนะนำเครื่องมือบนระยะขอบด้านซ้ายซึ่งแสดงเส้นทางไปยังบรรทัดโดยใช้สัญกรณ์ XPath เครื่องมือ "ตรวจสอบองค์ประกอบ" ของเบราว์เซอร์ (เช่น Firebug ซึ่งสร้างขึ้นใน Chrome) มักทำสิ่งที่คล้ายกัน แต่ในแถบสถานะ

อาจเป็นไปได้ว่าคุณอาจมีมุมมองที่ยุบสำหรับ heatmap (จากโพสต์ดั้งเดิม) ที่มีเพียงคอลัมน์เดียวของสีและตัวเลขความลึก สิ่งนี้จะช่วยให้พวกเขารู้ว่าพวกเขาอยู่ลึกแค่ไหนและให้อสังหาริมทรัพย์ที่มีอยู่บนหน้าจอมากขึ้นสำหรับ xml ดูเหมือนว่าชนะจะชนะฉัน

ฉันกังวลว่าจะมีความแตกต่างของสีมากพอที่จะทำรังอย่างลึกซึ้งหรือไม่