VS code 80글자 세로선 만드는 방법

젯브레인(Jetbrains) 계열 에디터는 보통 문자 80개가 되는 위치에 세로로 선이 그어져 있습니다. 왜 그럴까요?

옛날부터 터미널 크기는 대개 80x24 크기였는데요, 그 이유는 IBM punch card(천공카드)가 80열 24행으로 이루어져있었기 때문입니다. PuTTY의 기본 윈도우 사이즈가 80열 24행인 것도 그 이유입니다. De Facto라고 생각하시면 되겠습니다.

어쨌거나 한 줄에 80글자 이상 넘어가게되면 너무 길다고 느끼는 사람도 있는데요, 이런 분들을 위해 에디터들은 몇 글자 되는 부근에 세로로 선을 그어주기도 합니다. 비주얼 스튜디오 코드는 기본값으로는 설정되어있지 않아 직접 설정해줘야 합니다.

 

VS code 세로선(Rulers) 만들기

메뉴에서 File - Preferences - Settings로 들어갑니다.

참고로 단축키는 Ctrl + , 입니다.

 

Editor: Rulers

Render vertical rulers after a certain number of monospace characters. Use multiple values for multiple rulers. No rulers are drawn if array is empty.
일정 수의 고정폭 글자 뒤에 세로 눈금을 표시합니다. 여러 값을 넣으면 여러 눈금이 나옵니다. 배열이 비어 있으면 눈금이 나오지 않습니다.

상단 검색창에 ruler를 입력합니다. 그 다음 Editor: Rulers 밑의 "Edit in settings.json"을 클릭합니다.

이때 VS code 전체에 세로선을 설정하고 싶으면 User 탭에서 클릭하고, 특정 프로젝트에만 적용하고 싶은 경우 Workspace 탭에서 클릭합니다. 워크스페이스에서 설정하는 경우 .vscode\settings.json에 해당 내용이 저장됩니다.

 

"editor.rulers" 항목 내용을 수정해줍니다. 이 값은 배열이 들어갈 수 있는데 배열 안에 있는 글자 폭만큼 떨어진 곳에 수직선이 생기게 됩니다. 예를 들어 [80, 120] 이렇게 설정하면 80글자, 120글자 위치에 세로선이 그어지게 됩니다.

 

80글자로 설정한 뒤의 모습입니다.

 

{
    "editor.rulers": [
        {
            "column": 80,
            "color": "#ff00FF"
        },
        100,
        {
            "column": 120,
            "color": "#ff0000"
        },
    ],
    "workbench.colorCustomizations": {
        "editorRuler.foreground": "#ff4081"
    }
}

위 내용처럼 설정하면 세로선마다 각각 색을 설정해줄 수도 있고, 전체 세로선의 색을 설정할 수도 있습니다. 저는 뭐.. 굳이 이렇게 할 필요는 없어 보입니다.