[VS Code] Region으로 가독성 올리는 방법

dhkim 5월 06, 2024

 



이번 포스팅에서는 VS Code의 'Region'을 사용하는 방법과 더 시각적으로 표현해주는 Extension에 대해서 다룹니다.

Region은 한 파일 내에 3000 라인 이상의 긴 코드에서 효과적 입니다.

함수 블록을 접는 것 처럼 원하는 구역을 접을 수 있게 해줌으로써 가독성을 향상시켜주고

연관성 있는 코드들을 한 영역에 모아주는 역할도 할 수 있습니다.


1. region, endregion 사용법

VS Code 기본적인 스니펫(Snippet)으로 "#" 입력 시, 아래 두 자동완성 키워드가 출력됩니다.


[작성 내용]


[Code Folding]




2. Extension

    1) Resion Viewer

"Region Viewer" 는 사이드 바에 현재 활성화된 파일 내 "region" 태그를 추적하여 outline과 같은 형태로 보여줍니다.



[예제]
 사이드 바에 region 명칭이 노출되고, 클릭 시 해당 위치로 이동합니다.




    2) Highlight

정규식을 활용해서 부합하는 텍스트에 서식을 적용해주는 확장자.

region 연관 확장은 아니지만, "//#region ~" 과같은 규칙인 것을 고려해서 region 태그를 강조해줄 수 있다.

[예시] region 라인 보라색상, 굵게 / 명칭 부분에 배경색 지정


[설정 방법]

"F1" 눌러 입력창 출력 → "Preferences: Open user Settings (JSON)" 선택 → "setting.json" 파일 내에 아래 코드 삽입



[setting.json]

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
"highlight.regexes": { 
    "(//#.*\\s*::\\s*)(.*)" : {
        "filterFileRegex": "^.*.*$",
        "decorations": [
            {
                "color": "#BF03EED4",
                "fontWeight": "bold",
                "overviewRulerColor": "#BF03EED4",
            },
            {
                "fontWeight": "bold",
                "color": "#000000",
                "backgroundColor": "#a36d97",
            }
        ]
    },
    "(//#.*)" : {
        "filterFileRegex": "^.*.*$",
        "decorations": [
            {
                "color": "#BF03EED4",
                "fontWeight": "bold",
                "overviewRulerColor": "#BF03EED4",
            }
        ]
    },
    "(// TODO.*)": {
        "filterFileRegex": "^.*.*$",
        "decorations": [
            {
                "color": "#FF8C00",
                "overviewRulerColor": "#FF8C00",
            }
        ]
    },
    "(//!.*)": {
        "color": "#FF2D00",
        "filterFileRegex": "^.*.*$",
        "overviewRulerColor": "#FF2D00",
    },
    "(#.*)": {
        "color": "#00ffe9",
        "filterFileRegex": "^.*.txt$",
        "fontWeight": "bold",
        // "borderWidth": "1px",
        // "borderStyle": "solid",
        "overviewRulerColor": "#00ffe9",
    },
}


[적용 예시]

region 외에도 TODO 리스트, 경고성 문구에 대한 주석도 강조할 수 있습니다.


0 댓글