들여 쓰기를 사용하지 않고 어떻게 코드 편집기가 코드 중첩 수준을 효과적으로 암시 할 수 있습니까? [닫은]

필자는 동일한 XML 텍스트에 대해 두 가지보기 옵션을 제공 하는 XML 텍스트 편집기 를 작성했습니다 . 하나는 들여 쓰기 (가상), 다른 하나는 왼쪽 정렬입니다. 왼쪽 정렬보기의 동기는 XML 컨텍스트의 자동 부작용 인 들여 쓰기의 간섭없이 사용자가 일반 텍스트 또는 XPath 코드 들여 쓰기에 사용하는 공백 문자를 '볼'수 있도록 돕는 것입니다.

사용자를 도울 왼쪽 정렬 모드에 대한 시각적 단서 (편집기의 편집 불가능한 부분)를 제공하고 싶지만 너무 정교하지 않습니다.

나는 단지 연결선을 사용하려고 시도했지만 너무 바빴습니다. 지금까지 내가 찾은 최고의 내용은 아래 편집기의 조롱 된 스크린 샷에 나와 있지만 더 많은 코드가 필요없는 더 좋고 간단한 대안을 찾고 있습니다.

[편집하다]

히트 맵 아이디어를 취하면 (@jimp에서) 나는 이것과 3 가지 대안을 얻습니다-a, b 및 c :

다음 섹션에서는 여러 가지 답변과 의견의 아이디어를 모아 제안 된 답변을 제안으로 설명합니다. 이 질문은 이제 커뮤니티 위키이므로 언제든지 업데이트하십시오.

NestView

들여 쓰기를 사용하지 않고 중첩 코드의 가독성을 향상시키는 시각적 방법을 제공하는이 아이디어의 이름입니다.

등고선

NestView 내에서 다르게 음영 처리 된 선의 이름

위의 이미지는 XML 스 니펫을 시각화하는 데 사용되는 NestView를 보여줍니다. 이 그림에는 XML이 사용되지만 중첩을 사용하는 다른 코드 구문이이 그림에 사용될 수 있습니다.

개요 :

1. 중첩 수준을 전달하기 위해 등고선이 음영 처리됩니다 (히트 맵에서와 같이).

2. 등고선은 중첩 레벨이 열리거나 닫힐 때 표시되도록 기울어 져 있습니다.

3. 등고선은 중첩 레벨의 시작을 해당 끝과 연결합니다.

4. 등고선의 결합 된 너비는 히트 맵 외에 중첩 수준을 시각적으로 보여줍니다.

5. NestView의 너비는 수동으로 크기를 조정할 수 있지만 코드가 변경 될 때 변경되지 않아야합니다. 이를 유지하기 위해 등고선을 압축하거나 잘릴 수 있습니다.

6. 빈 줄은 때때로 텍스트를 더 소화 가능한 청크로 나누기 위해 사용되는 코드입니다. 이러한 행은 NestView에서 특수한 동작을 트리거 할 수 있습니다. 예를 들어 히트 맵을 재설정하거나 배경색 등고선을 사용하거나 둘 다 사용할 수 있습니다.

7. 현재 선택된 코드와 관련된 하나 이상의 등고선이 강조 표시 될 수 있습니다. 선택한 코드 수준과 관련된 등고선이 가장 강조되지만 중첩 된 그룹을 강조 표시하는 데 도움이되는 다른 등고선도 '점등'될 수 있습니다.

8. 등고선의 클릭 / 두 번 클릭과 같은 다른 동작 (예 : 코드 접기 또는 코드 선택)이 연결될 수 있습니다.

9. 등고선의 다른 부분 (선단, 중간 또는 후단)은 서로 다른 동적 동작을 가질 수 있습니다.

10. 등고선 위의 마우스 호버 이벤트에서 툴팁을 표시 할 수 있습니다

11. 코드가 편집되면 NestView가 계속 업데이트됩니다. 중첩이 균형이 맞지 않는 경우 중첩 수준을 끝내야하는 가정을 할 수 있지만 관련된 임시 등고선은 어떤 식 으로든 경고로 강조 표시되어야합니다.

12. 등고선의 드래그 앤 드롭 동작을 지원할 수 있습니다. 끌고있는 등고선 부분에 따라 동작이 달라질 수 있습니다.

13. 오류 및 변경 상태에 대한 줄 번호 매기기 및 색상 강조 표시와 같이 왼쪽 여백에 일반적으로있는 기능은 NestView를 오버레이 할 수 있습니다.

추가 기능

이 제안은 다양한 추가 문제를 해결합니다. 많은 문제가 원래 질문의 범위를 벗어나지 만 유용한 부작용입니다.

중첩 영역의 시작과 끝을 시각적으로 연결

등고선은 각 중첩 레벨의 시작과 끝을 연결합니다

현재 선택된 라인의 컨텍스트 강조

코드를 선택하면 NestView에서 관련 중첩 수준을 강조 표시 할 수 있습니다

동일한 중첩 수준에서 코드 영역 간 차별화

XML의 경우 다른 네임 스페이스에 대해 다른 색조를 사용할 수 있습니다. 프로그래밍 언어 (예 : c #)는 비슷한 방식으로 사용될 수있는 명명 된 영역을 지원합니다.

중첩 영역 내의 영역을 다른 시각적 블록으로 나누기

가독성을 높이기 위해 종종 코드에 여분의 줄이 삽입됩니다. 이러한 빈 선을 사용하여 NestView 등고선의 채도 수준을 재설정 할 수 있습니다.

다중 열 코드보기

들여 쓰기가없는 코드는 자동 줄 바꿈이나 가로 스크롤이 덜 필요하기 때문에 다중 열보기를보다 효과적으로 사용할 수 있습니다. 이보기에서 코드가 한 열의 맨 아래에 도달하면 다음 열로 흐릅니다.

단순히 시각 보조를 제공하는 것 이상의 사용

개요에서 제안으로, NestView는 수 TreeView 컨트롤에서 예상되는 것과 라인에 광범위하게 될 것이다 편집 및 선택 기능의 범위를 제공합니다. 주요 차이점은 일반적인 TreeView 노드에는 확장기와 노드 아이콘의 두 부분이 있다는 것입니다. NestView 등고선에는 오프너 (경사), 커넥터 (수직) 및 클로즈 (경사)의 3 가지 부품이 있습니다.

들여 쓰기

들여 쓰기되지 않은 코드와 함께 제공되는 NestView는 기존의 들여 쓰기 된 코드보기를 보완하지만 대체 할 가능성은 없습니다.

NestView를 채택한 솔루션은 공백 문자를 포함하여 코드 텍스트 자체에 영향을주지 않으면 서 들여 쓰기 및 들여 쓰기되지 않은 코드보기 사이를 매끄럽게 전환하는 방법을 제공 할 것입니다. 들여 쓰기 된보기의 한 가지 기술은 '가상 서식'입니다. 탭이나 공백 문자 대신 동적 왼쪽 여백이 사용됩니다. NestView를 동적으로 렌더링하는 데 사용 된 것과 동일한 중첩 수준 데이터는보다 일반적인 모양의 들여 쓰기보기에도 사용할 수 있습니다.

인쇄

인쇄 된 코드의 가독성을 위해서는 들여 쓰기가 중요합니다. 여기서 탭 / 공백 문자가없고 동적 왼쪽 여백이 있으면 텍스트가 오른쪽 여백에서 줄 바꿈되어 들여 쓰기 된보기의 무결성을 유지할 수 있습니다. 줄 번호는 코드가 줄 바꿈 된 위치와 정확한 들여 쓰기 위치를 나타내는 시각적 마커로 사용할 수 있습니다.

화면 부동산 : 평평한 들여 쓰기

NestView가 귀중한 화면 부동산을 사용하는지 여부에 대한 질문을 해결합니다.

등고선은 코드 편집기의 문자 너비와 동일한 너비로 잘 작동합니다. 따라서 12 자 너비의 NestView 너비는 등고선이 잘 리거나 압축되기 전에 12 단계 중첩을 수용 할 수 있습니다.

들여 쓰기 된보기가 각 중첩 레벨에 대해 3 개의 문자 너비를 사용하는 경우 중첩이 4 레벨의 중첩에 도달 할 때까지 공간이 절약됩니다.이 중첩 레벨 이후 평면보기에는 각 중첩 레벨에 따라 증가하는 공간 절약 이점이 있습니다.

참고 : 코드에는 최소 4 자 너비의 들여 쓰기를 권장하지만 종종 XML을 적게 관리하는 것이 좋습니다. 또한 가상 서식을 사용하면 정렬 문제의 위험이 없으므로 들여 쓰기를 줄일 수 있습니다.

두보기의 비교는 다음과 같습니다.

위의 관점에서 볼 때 뷰 스타일 선택은 화면 부동산 이외의 요소를 기반으로 할 것입니다. 한 가지 예외는 예를 들어 넷북 / 태블릿 또는 여러 코드 창이 열려있는 경우 화면 공간이 부족한 경우입니다. 이 경우 크기 조정이 가능한 NestView가 확실한 승자가 될 것입니다.

사용 사례

NestView가 유용한 옵션 일 수있는 실제 예제의 예 :

1. 스크린 부동산이 프리미엄 인 곳

   에이. 태블릿, 메모장 및 스마트 폰과 같은 장치

   비. 웹 사이트에 코드를 표시 할 때

   씨. 데스크탑에서 여러 코드 창이 동시에 표시되어야하는 경우

2. 코드 내에서 텍스트의 일관된 공백 들여 쓰기가 우선 순위 인 경우

3. 깊이 중첩 된 코드를 검토합니다. 예를 들어 하위 언어 (예 : C #의 Linq 또는 XSLT의 XPath)가 높은 수준의 중첩을 유발할 수 있습니다.

접근성

시각 장애가있는 사용자를 지원하고 환경 조건 및 개인 취향에 맞게 크기 조정 및 색상 옵션을 제공해야합니다.

다른 시스템과 편집 된 코드의 호환성

NestView 옵션을 통합 한 솔루션은 가져온 코드에서 선행 탭 및 공백 문자 (포맷 역할 만있는 것으로 식별)를 제거 할 수 있어야합니다. 그런 다음 일단 제거하면 코드가 왼쪽 정렬 및 들여 쓰기 된보기 모두에서 깔끔하게 렌더링 될 수 있습니다. 공백을 인식하지 않는 병합 및 diff 도구와 같은 시스템에 의존하는 많은 사용자의 경우 이것이 주요 관심사입니다 (완전한 쇼 스토퍼가 아닌 경우).

다른 작품들 :

겹치는 마크 업의 시각화

2004 년에 발표 된 Wendell Piez의 연구에 따르면 중복 마크 업, 특히 LMNL 의 시각화 문제가 해결 되었습니다 . 여기에는 NestView 제안과 상당히 유사한 SVG 그래픽이 포함되며 여기에서 인정됩니다.

시각적 차이는 이미지 (아래)에서 분명하지만, 주요 기능적 차이점은 NestView는 잘 중첩 된 XML 또는 코드 전용이며 Wendell Piez의 그래픽은 중첩 된 중첩을 나타내도록 설계되었다는 것입니다.

위의 그래픽은 http://www.piez.org 에서 친절한 허가를 받아 재생산되었습니다 .

출처 :

1. Hermenutic 마크 업을 향해
2. LMNL을 향한 반 걸음

나는 여기에 내 자신의 질문에 대답하려고 시도했지만 이것은 @jimp의 히트 맵 아이디어와 @Andrea의 '더욱 XML 같은 아이디어'를 통합합니다.

각진 선과 함께 히트 맵의 색상이 시작 태그와 끝 태그 사이에 눈을 그리는 데 도움이되기를 바랍니다. 수평선 분리기를 제거하면 처음부터 끝까지 '흐름'이 향상됩니다. 사용자가 요소를 선택하면 히트 맵에서 일치하는 부분이 어떤 방식 으로든 강조 표시 될 수 있습니다 (그림 참조).

편집 이것과 함께하기로 결정했다면, 아마도 색상에 대한 사용자 옵션이있을 것입니다. '생산 준비 완료'스크린 샷 :

그리고 비교를 위해 ... 다른 들여 쓰기보기 :

더 많이 중첩 된 경우를 위해 지금 편집 – 내 드로잉 기술 테스트 ...

한 가지 아이디어는 텍스트에 3D를 추가하려고 시도하는 것입니다. 현재 레벨에 따라 글꼴 크기를 늘리거나 줄입니다.

예를 들어이 코드는 다음과 같습니다.

다음과 같이 보일 것입니다 :

서로 다른 수준에서 고정 된 텍스트 크기 정렬을 잃어 버리면 작업하기가 어려울 수 있습니다. 또 다른 아이디어; 각 레벨의 채도를 변경하십시오.

그것이 정말로 깊은 것을 얼마나 잘 견디고 있습니까? 확실하지 않다...

나는 실제로 여백 시각화 아이디어를 많이 좋아합니다. 함께 그룹화하기 쉽습니다. 어쩌면이 아이디어 중 하나와 결합하면 훨씬 나아지거나 훨씬 더 무섭게 보일 것입니다. ;)

잠시 후 C에서 스코프를 보여주는 히트 맵을 작성했습니다. 브레인 스토밍을 보는 것이 재미있을 수 있습니다.

왼쪽 정렬 :

원래 아이디어를 조정하고 사각형에서 캡슐로 전환하십시오. 이 버전 (원본 버전 포함)은 표시 요소 중첩을 통해 중첩을 표시하는 버전보다 덜 복잡하기 때문에 읽기 쉽습니다. 트리 요소가 정보를보다 간단하고 직관적으로 전달한다고 생각합니다.

왼쪽은 들여 쓰기를 직접 표시하는 데 좋으며 오른쪽은 중첩 된 관계를 전달하는 것이 좋습니다.

내 생각:

중첩은 중첩과 유사합니다. 각 레이어의 가로 너비가 너무 넓을 필요는 없습니다.

나는 그 아이디어를 좋아한다. "사용 중"을 유지하려는 제안은 사각형 대신 그라디언트를 사용하는 것입니다. 줄을 줄였습니다. 아마도 들여 쓰기가 다른 색상 일 것입니다.

나는 당신이 가진 모든 것이 훌륭하다고 말하지만, 내 취향에는 조금 방해가됩니다.

내 의견 : Visual Studio IDE가 들여 쓰기하는 방식으로 끊임없이 어려움을 겪고 있습니다. 나는 이와 같은 것을 사용하고 싶습니다.

따라서 줄없이 링크하고 현재 xml / 코드와 인라인한다고 가정하십시오.

시각화가 편집 불가능한 (왼쪽?) 여백에 있어야한다고 말했기 때문에 시각화가 코드와 섞이거나 뒤섞 일 수 없다는 것을 의미합니다.

왼쪽 열에 열지도가 있는데, 더 밝은 색상은 더 깊은 들여 쓰기를 나타 냅니까? DOM 깊이에 의해 결정된 최대 들여 쓰기에 따라 주어진 모든 공간을 동적으로 사용하는 것과 같은 시각화 (들여 쓰기처럼 왼쪽에서 오른쪽으로 갈 것으로 예상 됨)를 사용하여 여백을 고정 크기로 만듭니다.

편집기 영역으로 분기하려는 경우 문서의 배경으로 매우 비슷한 것을 제안합니다. 공백이 곳 음영 지역이 될 것입니다 들여 쓰기가 활성화 된 경우. 이 경우 텍스트 강조 표시와 대조되는 단단하고 밝은 색상을 사용합니다.

jGRASP는 여백에 시각적 마커를 사용하여이를 수행합니다.

루프를 사용할 때도 인식하고 다른 유형의 선을 사용하여 해당 내부 루프를 나타냅니다.

기존 편집자가 어떻게 하는지를 지적하겠다고 생각했습니다.

나쁜 생각은 아니지만 내 블록을 분명히 보려면 ​​왼쪽 여백을 참조하면 약간 성 가실 수 있습니다. 그것은 스크린 부동산이나 구조가 매우 깊어지면 어떤 일이 생길지에 대해 생각조차하지 않습니다.

동기 부여는 사용자가 들여 쓰기에 사용하는 공백 문자를 '보도록'돕는 것이므로 공백 문자 만 표시하면됩니다.

단락 마커와 같은 특수한 시각적 문자를 말하는 것이 아니라 강조 표시 만합니다. 노란색으로 공백, 녹색으로 탭 (또는 무엇이든)

여백 / 중첩 문제의 경우 각 블록의 여백을 이동하면됩니다. 여백이 직선이어야한다는 말은 없습니다.

나는 이것이 새로운 아이디어가 아니라고 확신한다.

이 같은:

왜 괄호를 열고 닫지 않습니까?

1. 들여 쓰기는 포함을 의미합니다. (및)는 프로그래머에게 정확히 의미합니다.
2. (및)는 각각 단일 문자입니다. 왼쪽 막대는 매우 얇게 유지됩니다.
3. 빈 요소는 쉽게 발견됩니다. 같은 줄에 ()를 사용하십시오.
4. 요소의 내용에는 시각적 단서가 필요하지 않습니다. 공백이 훨씬 좋습니다.
5. 오른쪽의 커서 위치는 왼쪽의 포함 블록과 일치시킬 수 있습니다. (및)로 열의 문자에 색상을 동적으로 추가
6. <와>를 사용하면 좀 더 XML처럼 보이게 만들 수 있습니다.

Vim은 예쁘지 않지만 이미 비슷한 것을 할 수 있습니다.

Vim에는 "코드 접기"를 수행하는 다양한 방법이 있습니다. 그중 하나는 구문 폴딩 규칙을 기반으로합니다. 이 작업을 수행하면 중첩 된 개요 구조를 사용하여 코드를 접을 수 있으며 "FoldColumn"을 사용하여 "foldlevel"을 그래픽으로 표시 할 수 있습니다 (실제로는 "| '및'- '문자가있는"문자 기반 "). .

foldcolumn은 foldmethod에 관계없이 중첩 표현을 제공 할 수 있지만 구문 기반 방법은 원하는 것에 적합 할 것입니다. 어딘가에 XML에 대해 사전 작성된 구문 기반 폴딩 규칙이 있는지 확실하지 않습니다.

나는 당신이 옵션 B와 C를 사용하여 올바른 길을 가고 있다고 생각합니다 : 너비와 히트 맵 색상을 모두 포함하십시오. 나는 옵션 B가 C보다 중간에 무거운 블록보다 넓지 않고 희석되거나 좁고 강렬하기 때문에 현재 C보다 C보다 더 낫습니다. 한 가지 단점은 그 옵션을 사용하면 어딘가에 레벨을 삽입하면 전체 그래프를 다시 작성하십시오. 블록을 훨씬 작게 만들 수 있다고 생각합니다 .1 또는 2 픽셀이면 충분할 것입니다. 많을 필요는 없으며 구별 가능해야합니다. 특히 사람들이 편집기를 여러 번 사용할 것으로 예상되는 경우, 방해가되지 않기 때문에 눈에 거슬리지 않고 더 미묘한 효과를 사용하는 것이 더 쉽습니다.

정렬 편집기를 사용할 때 중요한 것은 현재 범위를 강조 표시하는 것입니다. 편집기에서 행을 선택할 때 포함 된 요소와 중지 위치를 정확히 확인해야합니다. 나무를 강조 표시 할 수도 있습니다 (어떤 요소가 자식인지). 나는 이것이 해결과 생각이 필요한 별도의 문제라고 생각하며 사용자가 편집자에 대한 경험을 평가하는 방법에 더 많은 영향을 줄 것입니다.

내가 언급하지 않은 것 중 하나는 당신이 정착 한 채도 효과 위에 색조로 할 수있는 것입니다. 내 제안은 포인터가있는 둥지의 색상을 변경하는 것입니다. 이것은 사용자가 어느 라인이 네스트의 일부인지, 형제는 그 라인을 따라가는 것을 쉽게 구별 할 수있게합니다.

색조 기반의 물건을 구현할 때는 색맹을 염두에두고 보편적으로 구별 할 수있는 색을 선택하거나 사람들이 선택할 수있는 몇 가지 옵션을 제공하십시오.

지금까지 다른 제안과 함께 사용할 수있는 한 가지 옵션은 왼쪽 여백에 툴팁을 사용하여 XPath 표기법을 사용하여 행의 경로를 표시하는 것입니다. 브라우저 "요소 검사"도구 (예 : Chrome에 내장 된 Firebug)는 종종 상태 표시 줄에서 비슷한 기능을 수행합니다.

아마도 한 열의 열과 깊이 숫자만으로 열원에 대한 축소 된 뷰 (원래 게시물에서)를 볼 수 있습니다. 이를 통해 그들이 얼마나 깊은 지 알 수 있고 XML에 더 많은 화면 공간을 제공 할 수 있습니다. 나에게이기는 것 같습니다.

물건을 깊게 중첩하기에 충분한 색상 차이가 있는지 걱정됩니다.