Làm thế nào một trình soạn thảo mã có thể gợi ý hiệu quả ở cấp độ lồng mã - mà không cần sử dụng thụt lề? [đóng cửa]

Tôi đã viết một trình soạn thảo văn bản XML cung cấp 2 tùy chọn xem cho cùng một văn bản XML, một tùy chỉnh thụt lề (hầu như), còn lại được chứng minh trái. Động lực cho chế độ xem bên trái là giúp người dùng 'nhìn thấy' các ký tự khoảng trắng mà họ đang sử dụng để thụt lề văn bản thuần hoặc mã XPath mà không bị can thiệp từ thụt lề là hiệu ứng phụ tự động của bối cảnh XML.

Tôi muốn cung cấp manh mối trực quan (trong phần không thể chỉnh sửa của trình chỉnh sửa) cho chế độ bên trái sẽ giúp người dùng, nhưng không quá phức tạp.

Tôi đã thử chỉ sử dụng các đường kết nối, nhưng điều đó dường như quá bận rộn. Điều tốt nhất tôi nghĩ ra cho đến nay được thể hiện trong một ảnh chụp màn hình của trình chỉnh sửa bên dưới, nhưng tôi đang tìm kiếm các lựa chọn thay thế tốt hơn / đơn giản hơn (không yêu cầu quá nhiều mã).

[Biên tập]

Lấy ý tưởng bản đồ nhiệt (từ: @jimp) Tôi nhận được điều này và 3 lựa chọn thay thế - được gắn nhãn a, b và c:

Phần sau đây mô tả câu trả lời được chấp nhận là một đề xuất, tập hợp các ý tưởng từ một số câu trả lời và nhận xét khác. Vì câu hỏi này là wiki cộng đồng, xin vui lòng cập nhật nó.

NestView

Tên của ý tưởng này cung cấp một phương thức trực quan để cải thiện khả năng đọc mã lồng nhau mà không cần sử dụng thụt lề.

Đường Đồng mức

Tên cho các dòng được tô bóng khác nhau trong NestView

Hình ảnh trên cho thấy NestView được sử dụng để giúp trực quan hóa một đoạn mã XML. Mặc dù XML được sử dụng cho minh họa này, bất kỳ cú pháp mã nào khác sử dụng lồng nhau có thể đã được sử dụng cho minh họa này.

Một cái nhìn tổng quan:

1. Các đường đồng mức được tô bóng (như trong bản đồ nhiệt) để chuyển mức lồng nhau

2. Các đường đồng mức được đặt để hiển thị khi mức lồng nhau được mở hoặc đóng.

3. Một đường đồng mức liên kết bắt đầu một mức lồng nhau đến cuối tương ứng.

4. Độ rộng kết hợp của các đường đồng mức tạo ấn tượng thị giác về mức lồng nhau, ngoài bản đồ nhiệt.

5. Độ rộng của NestView có thể thay đổi kích thước thủ công, nhưng không nên thay đổi khi mã thay đổi. Các đường đồng mức có thể được nén hoặc cắt bớt để tiếp tục đạt được điều này.

6. Các dòng trống đôi khi được sử dụng mã để chia văn bản thành các phần dễ tiêu hóa hơn. Những dòng như vậy có thể kích hoạt hành vi đặc biệt trong NestView. Ví dụ, bản đồ nhiệt có thể được đặt lại hoặc một đường viền màu nền được sử dụng hoặc cả hai.

7. Một hoặc nhiều đường đồng mức liên quan đến mã hiện được chọn có thể được tô sáng. Đường đồng mức được liên kết với mức mã được chọn sẽ được nhấn mạnh nhất, nhưng các đường đồng mức khác cũng có thể 'sáng lên' ngoài ra để giúp làm nổi bật nhóm lồng nhau có chứa

8. Các hành vi khác nhau (chẳng hạn như gấp mã hoặc chọn mã) có thể được liên kết với nhấp / nhấp đúp vào Đường viền.

9. Các phần khác nhau của một đường viền (cạnh đầu, giữa hoặc đuôi) có thể có các hành vi động khác nhau liên quan.

10. Chú giải công cụ có thể được hiển thị trên một sự kiện di chuột qua đường viền

11. NestView được cập nhật liên tục khi mã được chỉnh sửa. Trường hợp lồng không phải là các giả định cân bằng tốt có thể được thực hiện khi mức độ lồng phải kết thúc, nhưng các đường đồng mức tạm thời liên quan phải được làm nổi bật theo một cách nào đó như một cảnh báo.

12. Hành vi kéo và thả của Đường viền có thể được hỗ trợ. Hành vi có thể thay đổi tùy theo phần đường viền được kéo.

13. Các tính năng thường thấy ở lề trái như đánh số dòng và tô sáng màu cho các lỗi và trạng thái thay đổi có thể che phủ NestView.

Chức năng bổ sung

Đề xuất giải quyết một loạt các vấn đề bổ sung - nhiều vấn đề nằm ngoài phạm vi của câu hỏi ban đầu, nhưng là một tác dụng phụ hữu ích.

Trực quan liên kết bắt đầu và kết thúc của một khu vực lồng nhau

Các đường đồng mức kết nối điểm bắt đầu và kết thúc của từng cấp độ lồng nhau

Làm nổi bật bối cảnh của dòng hiện được chọn

Khi mã được chọn, mức lồng liên kết trong NestView có thể được tô sáng

Phân biệt giữa các vùng mã ở cùng mức lồng nhau

Trong trường hợp XML, các màu khác nhau có thể được sử dụng cho các không gian tên khác nhau. Các ngôn ngữ lập trình (như c #) hỗ trợ các vùng được đặt tên có thể được sử dụng theo cách tương tự.

Phân chia các khu vực trong một khu vực làm tổ thành các khối hình ảnh khác nhau

Các dòng bổ sung thường được chèn vào mã để hỗ trợ khả năng đọc. Các dòng trống như vậy có thể được sử dụng để đặt lại mức bão hòa của các đường đồng mức của NestView.

Chế độ xem mã nhiều cột

Mã không có thụt lề làm cho việc sử dụng chế độ xem nhiều cột hiệu quả hơn vì cuộn từ hoặc cuộn ngang ít có khả năng được yêu cầu. Theo quan điểm này, một khi mã đã chạm đến đáy của một cột, nó sẽ chảy vào cột tiếp theo:

Sử dụng ngoài việc chỉ cung cấp một trợ giúp trực quan

Như đã đề xuất trong tổng quan, NestView có thể cung cấp một loạt các tính năng chỉnh sửa và lựa chọn phù hợp với những gì được mong đợi từ điều khiển TreeView. Sự khác biệt chính là một nút TreeView điển hình có 2 phần: phần mở rộng và biểu tượng nút. Một đường đồng mức NestView có thể có tới 3 phần: phần mở (dốc), đầu nối (dọc) và đóng (dốc).

Vào thụt

NestView được trình bày cùng với các bổ sung mã không thụt lề, nhưng không thể thay thế, chế độ xem mã thụt lề thông thường.

Có vẻ như bất kỳ giải pháp nào áp dụng NestView, sẽ cung cấp một phương pháp để chuyển đổi liền mạch giữa các chế độ xem mã được thụt lề và không thụt lề mà không ảnh hưởng đến bất kỳ văn bản mã nào - bao gồm các ký tự khoảng trắng. Một kỹ thuật cho chế độ xem thụt lề sẽ là 'Định dạng ảo' - trong đó sử dụng lề trái động thay cho các ký tự tab hoặc dấu cách. Dữ liệu mức lồng nhau tương tự được sử dụng để hiển thị động NestView cũng có thể được sử dụng cho chế độ xem thụt lề trông thông thường hơn.

In ấn

Việc thụt lề sẽ rất quan trọng đối với khả năng đọc mã in. Ở đây, sự vắng mặt của các ký tự tab / dấu cách và lề trái động có nghĩa là văn bản có thể bao bọc ở lề phải và vẫn duy trì tính toàn vẹn của chế độ xem thụt lề. Số dòng có thể được sử dụng làm điểm đánh dấu trực quan cho biết nơi mã được bọc từ và cũng là vị trí chính xác của thụt lề:

Bất động sản màn hình: Flat Vs Indents

Giải quyết câu hỏi liệu NestView có sử dụng bất động sản màn hình có giá trị hay không:

Các đường đồng mức hoạt động tốt với chiều rộng giống như chiều rộng ký tự của trình soạn thảo mã. Do đó, chiều rộng của NestView là 12 ký tự có thể chứa 12 cấp độ lồng trước khi các đường đồng mức bị cắt / nén.

Nếu chế độ xem thụt lề sử dụng 3 chiều rộng ký tự cho mỗi cấp độ lồng thì không gian được lưu cho đến khi lồng đạt 4 cấp độ lồng, sau cấp độ lồng này, chế độ xem phẳng có lợi thế tiết kiệm không gian tăng theo từng cấp độ lồng.

Lưu ý: Việc thụt lề tối thiểu 4 độ rộng ký tự thường được đề xuất cho mã, tuy nhiên XML thường quản lý với ít hơn. Ngoài ra, Định dạng ảo cho phép sử dụng ít thụt lề hơn vì không có rủi ro về các vấn đề căn chỉnh

Một so sánh của 2 lượt xem được hiển thị dưới đây:

Dựa trên những điều trên, có lẽ công bằng khi kết luận rằng lựa chọn phong cách xem sẽ dựa trên các yếu tố khác ngoài màn hình bất động sản. Một ngoại lệ là không gian màn hình ở mức cao, ví dụ như trên Netbook / Tablet hoặc khi nhiều cửa sổ mã được mở. Trong những trường hợp này, NestView có thể thay đổi kích thước dường như là một người chiến thắng rõ ràng.

Trường hợp sử dụng

Ví dụ về các ví dụ trong thế giới thực nơi NestView có thể là một tùy chọn hữu ích:

1. Bất động sản màn hình ở mức cao

   a. Trên các thiết bị như máy tính bảng, notepad và điện thoại thông minh

   b. Khi hiển thị mã trên các trang web

   c. Khi nhiều cửa sổ mã cần phải được hiển thị trên màn hình cùng một lúc

2. Trong đó việc thụt lề khoảng trắng nhất quán của văn bản trong mã là ưu tiên

3. Để xem xét mã lồng nhau sâu sắc. Ví dụ: nơi các ngôn ngữ phụ (ví dụ Linq trong C # hoặc XPath trong XSLT) có thể gây ra mức lồng nhau cao.

Khả năng tiếp cận

Tùy chọn thay đổi kích thước và màu sắc phải được cung cấp để hỗ trợ những người khiếm thị, và cũng phù hợp với điều kiện môi trường và sở thích cá nhân:

Khả năng tương thích của mã được chỉnh sửa với các hệ thống khác

Một giải pháp kết hợp tùy chọn NestView lý tưởng có khả năng tước bỏ các ký tự không gian và tab hàng đầu (được xác định là chỉ có vai trò định dạng) từ mã được nhập. Sau đó, một khi bị tước, mã có thể được hiển thị gọn gàng trong cả hai chế độ xem trái và thụt lề mà không thay đổi. Đối với nhiều người dùng dựa vào các hệ thống như hợp nhất và các công cụ tìm khác biệt không nhận biết được khoảng trắng, đây sẽ là một mối quan tâm lớn (nếu không phải là trình dừng hiển thị hoàn chỉnh).

Những công việc khác:

Hình dung của đánh dấu chồng chéo

Nghiên cứu được công bố bởi Wendell Piez , ngày từ năm 2004, đề cập đến vấn đề trực quan hóa đánh dấu chồng chéo, cụ thể là LMNL . Điều này bao gồm đồ họa SVG với sự tương đồng đáng kể với đề xuất NestView, do đó, chúng được thừa nhận ở đây.

Sự khác biệt về hình ảnh là rõ ràng trong các hình ảnh (bên dưới), sự khác biệt về chức năng chính là NestView chỉ dành cho XML hoặc mã được lồng ghép tốt, trong khi đồ họa của Wendell Piez được thiết kế để thể hiện lồng nhau chồng chéo.

Đồ họa ở trên đã được sao chép - với sự cho phép - từ http://www.piez.org

Nguồn:

1. Hướng tới đánh dấu Hermennom
2. Nửa bước về phía LMNL

Tôi đã cố gắng trả lời câu hỏi của riêng mình ở đây, nhưng điều này được kết hợp với ý tưởng bản đồ nhiệt từ @jimp và cũng là ý tưởng 'biến nó thành XML-ish' từ @Andrea:

Hy vọng rằng, màu sắc trong bản đồ nhiệt cùng với các đường góc giúp thu hút mắt giữa các thẻ bắt đầu và kết thúc; loại bỏ các dải phân cách ngang giúp cải thiện 'dòng chảy' từ đầu đến cuối. Khi người dùng chọn với một yếu tố, phần phù hợp trong bản đồ nhiệt có thể được làm nổi bật theo một cách nào đó - có lẽ với đường viền phát sáng (như được hiển thị).

Chỉnh sửa Đã quyết định đi với điều này, có lẽ sẽ phải có tùy chọn người dùng cho màu sắc. Ảnh chụp màn hình 'sẵn sàng sản xuất':

Và để so sánh ... khung nhìn thụt lề thay thế:

Chỉnh sửa ngay, đối với trường hợp lồng nhiều hơn - kiểm tra kỹ năng vẽ của tôi ...

Một ý tưởng có thể là thử và thêm 3D vào văn bản. Tăng / giảm kích thước phông chữ dựa trên mức độ của nó.

Ví dụ: mã này:

Sẽ như thế này:

Điều đó có thể gây khó chịu khi làm việc vì nó mất liên kết kích thước văn bản cố định ở các cấp độ khác nhau. Một ý tưởng khác; thay đổi độ bão hòa của từng cấp độ:

Làm thế nào tốt mà giữ cho một cái gì đó thực sự sâu sắc? Không chắc...

Tôi thực sự thích ý tưởng hình ảnh máng xối của bạn rất nhiều; Thật dễ dàng để nhóm các thứ lại với nhau. Có thể kết hợp với một trong những ý tưởng này, nó sẽ thậm chí còn tốt hơn, hoặc nhiều crappier hơn. ;)

Một lát sau tôi đã thực hiện một phạm vi hiển thị bản đồ nhiệt trong C. Có thể rất vui khi xem xét để động não:

Căn lề trái:

Chỉ cần điều chỉnh ý tưởng ban đầu của bạn và chuyển từ hình vuông sang viên nang. Tôi nghĩ các phiên bản này (bao gồm cả phiên bản gốc của bạn) dễ đọc hơn vì chúng ít phức tạp hơn phiên bản hiển thị lồng nhau thông qua việc lồng các phần tử hiển thị. Tôi nghĩ rằng các yếu tố cây truyền đạt thông tin theo cách đơn giản hơn trực quan hơn.

Tôi nghĩ rằng bên trái là tuyệt vời để hiển thị trực tiếp thụt lề, trong khi bên phải là tốt hơn để truyền đạt một mối quan hệ lồng nhau.

Ý kiến ​​của tôi:

Việc làm tổ trông giống như làm tổ hơn. Chiều rộng ngang của mỗi lớp không cần quá rộng.

Tôi thích ý tưởng. Đề nghị của tôi để giảm "bận rộn" sẽ là sử dụng độ dốc thay vì hình vuông. Nó sẽ cắt giảm trên dòng. Có lẽ màu sắc khác nhau cho thụt đầu cực.

Tôi sẽ nói tất cả mọi thứ bạn có là tuyệt vời, mặc dù một chút khối cho thị hiếu của tôi.

Nhận xét của tôi: Tôi đã liên tục vật lộn với cách mà Visual Studio IDE thực hiện thụt lề. Tôi rất thích sử dụng một cái gì đó như thế này hoặc một biến thể.

Vì vậy, hãy tưởng tượng liên kết đó không có các dòng và nội tuyến với xml / code hiện tại của bạn.

Vì bạn đã nói rằng trực quan hóa phải tồn tại ở lề không thể chỉnh sửa (trái?), Tôi tin rằng điều đó có nghĩa là trực quan hóa không thể được xen kẽ hoặc đằng sau mã.

Có lẽ một bản đồ nhiệt ở cột bên trái, với màu sáng hơn cho thấy vết lõm sâu hơn? Làm cho lề có kích thước cố định, với một hình ảnh trực quan giống như những gì bạn có (mong đợi từ trái sang phải như thụt đầu dòng) sử dụng động tất cả không gian được cung cấp theo độ thụt tối đa được xác định theo độ sâu DOM.

Nếu bạn sẵn sàng phân nhánh vào khu vực biên tập, tôi sẽ đề xuất một cái gì đó rất giống nhau, nhưng làm nền của tài liệu. Khu vực bóng mờ sẽ là nơi khoảng trắng sẽ được đặt nếu thụt lề được bật. Trong trường hợp này, tôi sẽ sử dụng một màu sáng, rắn tương phản với tô sáng văn bản.

jGRASP thực hiện điều này bằng cách sử dụng điểm đánh dấu trực quan ở lề:

Nó thậm chí còn nhận ra khi bạn đang sử dụng một vòng lặp và sử dụng một loại đường khác để thể hiện vòng lặp bên trong đó.

Chỉ cần nghĩ rằng tôi sẽ chỉ ra làm thế nào một biên tập viên hiện có làm điều đó.

Một ý tưởng không tồi nhưng phải tham chiếu lề trái để thấy rõ các khối của tôi có thể hơi khó chịu. Điều đó thậm chí không nghĩ về bất động sản màn hình hoặc mọi thứ có thể bắt đầu trông như thế nào nếu cấu trúc trở nên rất sâu.

Vì động lực là để giúp người dùng 'nhìn thấy' các ký tự khoảng trắng mà họ đang sử dụng để thụt lề, bạn chỉ có thể hiển thị cho họ các ký tự khoảng trắng.

Tôi không nói các nhân vật trực quan đặc biệt như đánh dấu đoạn văn, chỉ nổi bật. Dấu cách màu vàng, tab màu xanh lá cây (hoặc bất cứ điều gì)

Đối với vấn đề lề / lồng, bạn chỉ có thể di chuyển lề cho mỗi khối. Không có gì nói rằng lề phải là một đường thẳng.

Tôi chắc chắn đây không phải là một ý tưởng mới.

Một cái gì đó như thế này:

Tại sao không mở và đóng ngoặc?

1. Sự thụt lề có nghĩa là ngăn chặn: (và) có nghĩa chính xác điều đó đối với các lập trình viên.
2. (và) mỗi ký tự là một thanh duy nhất: thanh bên trái sẽ rất mỏng.
3. Các phần tử rỗng dễ dàng được phát hiện: use () trên cùng một dòng.
4. Nội dung của một yếu tố không cần một đầu mối trực quan: một khoảng trống tốt hơn nhiều.
5. Vị trí con trỏ ở bên phải có thể được khớp với khối chứa bên trái: tự động thêm một màu vào các ký tự trong cột bằng (và)
6. Bạn có thể làm cho nó nhiều XML hơn bằng cách sử dụng <và>, trông từ xa sẽ tốt hơn.

Vim có thể làm một cái gì đó tương tự đã có, mặc dù không hoàn toàn đẹp.

Có nhiều cách khác nhau để thực hiện "gấp mã" trong Vim. Một trong số đó dựa trên một quy tắc gấp cú pháp. Khi điều này được thực hiện, mã có thể được gấp lại bằng cách sử dụng cấu trúc phác thảo lồng nhau và "FoldColumn" có thể được sử dụng để đưa ra một biểu đồ (thực sự là "dựa trên ký tự" với biểu tượng '|' và '-') của "Foldlevel" .

Các nếp gấp có thể đưa ra biểu diễn lồng nhau bất kể Foldmethod, nhưng phương thức dựa trên cú pháp là phương thức có thể phù hợp với những gì bạn muốn. Tôi không chắc chắn nếu có các quy tắc gấp dựa trên cú pháp được tạo sẵn ngoài kia cho xml ở đâu đó, tôi đoán có thể có.

Tôi nghĩ rằng bạn đang đi đúng hướng với tùy chọn B và C: bao gồm cả chiều rộng và màu bản đồ nhiệt. Tôi thích tùy chọn B hơn C vào lúc này, vì nó ít xâm phạm hơn (rộng và loãng, hoặc hẹp và dữ dội, thay vì khối rất nặng ở giữa C) Một nhược điểm là với tùy chọn đó bạn phải xây dựng lại toàn bộ biểu đồ nếu bạn chèn một mức ở đâu đó. Tôi nghĩ bạn có thể làm cho các khối nhỏ hơn nhiều, 1 hoặc 2 px có lẽ là đủ. Nó không phải là nhiều, nó chỉ cần được phân biệt. Đặc biệt là khi mọi người dự kiến ​​sẽ sử dụng trình chỉnh sửa nhiều lần, các hiệu ứng không phô trương, tinh tế hơn sẽ dễ làm việc hơn vì chúng không làm sao lãng nhiều.

Một điều quan trọng khi sử dụng một trình soạn thảo sắp xếp là làm nổi bật phạm vi hiện tại: khi chọn một dòng trong trình chỉnh sửa, bạn cần xem chính xác nó chứa những yếu tố nào và nơi nó dừng lại. Bạn thậm chí có thể làm nổi bật cây lên (những yếu tố nào là con của). Tôi nghĩ đó là một vấn đề riêng biệt cần giải quyết và suy nghĩ và sẽ có ảnh hưởng nhiều hơn đến cách người dùng đánh giá trải nghiệm của họ với biên tập viên.

Một điều tôi chưa từng thấy được đề cập là những gì bạn có thể làm với màu sắc trên đỉnh của hiệu ứng bão hòa mà bạn dường như đã giải quyết. Đề nghị của tôi là thay đổi màu của tổ trong đó con trỏ nằm. Điều này sẽ giúp người dùng dễ dàng phân biệt dòng nào là một phần của tổ, so với anh chị em với nó trên đường đi.

Khi thực hiện các công cụ dựa trên màu sắc, vui lòng lưu ý về mù màu và chọn các màu có thể phân biệt được trên toàn cầu hoặc cung cấp một vài tùy chọn để mọi người chọn.

Một tùy chọn, có thể được sử dụng cùng với các đề xuất khác cho đến nay, sẽ là sử dụng một chú giải công cụ ở lề trái hiển thị đường dẫn đến dòng bằng ký hiệu XPath. Các công cụ "kiểm tra phần tử" của trình duyệt (ví dụ: Fireorms, một công cụ tích hợp trong Chrome) thường làm một cái gì đó tương tự nhưng trong một thanh trạng thái.

Có thể bạn có thể có chế độ xem được thu gọn cho bản đồ nhiệt (từ bài đăng gốc) chỉ với một cột màu và số độ sâu. Điều này sẽ cho phép họ biết mức độ sâu sắc của họ và cung cấp cho họ nhiều bất động sản màn hình hơn cho xml. Có vẻ như một chiến thắng giành chiến thắng với tôi.

Tôi lo ngại liệu sẽ có đủ sự khác biệt về màu sắc để làm mọi thứ sâu sắc.