VS Code - 더 예쁜 코드를 위한 세로 눈금자?

VS Code의 수직 눈금자는 무엇입니까?

VS Code에서 세로 눈금자는 코드에 적용되지 않는 오른쪽 경계를 제공하는 정적, 사용자 지정 가능한 디자인 요소입니다.

이 세로 눈금자는 Word, Illustrator 또는 기타 디자인/편집 패키지와 달리 측정용이 아닙니다.



주황색, 회색 및 자주색 눈금자입니다. 참고 줄 21, 22는 눈금자의 영향을 받지 않습니다.

텍스트는 위의 예와 같이 눈금자의 영향을 받지 않습니다.

왜요?

세로 눈금자는 너무 넓지 않으면서 코드를 쉽게 읽을 수 있는 방법을 제공합니다.

일부 언어(예: Python 또는 Drupal)에는 라인당 최대 문자에 대한 스타일 가이드가 있습니다. (Python의 경우 79자).

Javascript와 같은 다른 것에는 very loose set of guidelines이 있지만 줄당 최대 문자 수를 제안하는 것은 없습니다.

어떻게

February 2020 edition부터 VS Code에서 색상 및 여러 세로 눈금자를 사용할 수 있습니다.

1단계 - settings.json 열기

Mac: Shift Command P

비macOS: Ctrl P를 누르십시오.

그러면 파일 검색이 열립니다.
settings.json를 입력하고 편집할 파일을 선택합니다.

2단계 - json 개체 내부의 마지막 줄에 다음을 추가합니다.

"editor.rulers": [
   {
     "column": 80,    // spacing of 1st column from left
     "color": "#ff9900"   // orange, Go Vols!
   },
     100,  // 2nd ruler with no color option
   {
    "column": 120,      // third ruler
    "color": "#9f0af5"  // purple, go Pirates! 
   },
],

위의 구현은 언어에 구애받지 않으며 기본 "항상 켜져 있는"눈금자가 됩니다. 기본 및 특정 언어를 동시에 가질 수 있습니다.

특정 언어의 경우 '[ ]' 괄호 안의 언어 이름을 원하는 언어로 변경합니다.

  "[ruby]": {
        "editor.rulers": [
            {
                "column": 100,
                "color": "#00ff22"
            }
        ]
    }

각 언어에 대해 하나씩 추가합니다.

3단계 - 가독성 높은 코드 즐기기

변경 사항을 저장하고 즐기십시오.



예쁜 코드. 너무 넓지 않습니다. 바로.

피드백?

위의 구현 또는 기타 유용한 VS Code 설정에 대한 생각이나 조언이 있습니까?

그렇다면 메모를 남겨주세요. 방법/이유/언제를 명확히 하기 위해 귀하의 예, 설명 및 기타 세부 정보를 듣고 보고 싶습니다.

자원

February 2020 VS Code Feature .
MDN Javascript Guidelines
Python Style Guide - PEP8