[Extensions] VScode에서 코멘트를 슬기롭게 사용하는 방법 (feat. Better Comments)

VScode를 사용할 때 유용한 익스텐션(Extensions)을 소개해 드리겠습니다. 이번에 소개할 익스텐션은 Better Comments입니다.

현재 72명에게 별5개 추천을 받고 있으니 어느정도 입증이 됬다고 볼 수 있겠네요.

Better Comments 소개

코딩을 하다보면 반드시 주석을 달게 되는데요. Better Comments는 코드의 주석(코멘트)를 좀더 직관적으로 볼 수 있게 특정 특수문자에 대해 색상으로 설명을 볼 수 있게 해주는 기능을 합니다.

위의 이미지에서 주석 부분만 참고하면 됩니다. 주석표시 뒤에 특수문자에 따라 그 줄의 색상이 구분되어 집니다.

• * 문자 : 초록색으로 표시 - 일반 정보
• ! 문자 : 빨간색으로 표시 - 중요한 주의사항
• ? 문자 : 파란색으로 표시 - 궁금한 사항
• TODO 문자 : 주황색으로 표시 - 추가적으로 해야 할 일

보통 위와 같은 의미로 이해 하시면 됩니다. 단지 색상만의 구분이므로 본인이 느끼시는 대로 사용하고 해석하면 됩니다. 만약 여러사람이 같이 코드를 작성한다면 색상별 의미에 대해서 먼저 정의를 하는 것도 좋겠지요.

간단하지만 요긴한 익스텐션입니다.

Better Comments 설정하기

코멘트의 특수문자는 지정된 것만 사용하는 것이 아니라 본인이 원하는 대로 커스텀할 수도 있습니다.

기본 사용 특수문자

• * : 설명입니다.
• ! : 주의하세요.
• ? : 궁금합니다.
• // : 취소합니다.
• todo : 할일입니다.

커스텀하기 설정화면 열기

VScode에서 설정창을 엽니다.

1. 확장탭을 선택합니다.
2. better-comments 항목을 선택합니다.
3. Tags의 변경은 settings.json에서 해야합니다. 클릭해 주세요.

사람마다 다를 수 있지만 대략 이런 json형태의 기본 settings.json 세팅값이 보여집니다.
여기에 아래의 기본코드를 먼저 추가 합니다.

"better-comments.tags": [
  {
    "tag": "!",
    "color": "#FF2D00",
    "strikethrough": false,
    "backgroundColor": "transparent"
  },
  {
    "tag": "?",
    "color": "#3498DB",
    "strikethrough": false,
    "backgroundColor": "transparent"
  },
  {
    "tag": "//",
    "color": "#474747",
    "strikethrough": true,
    "backgroundColor": "transparent"
  },
  {
    "tag": "todo",
    "color": "#FF8C00",
    "strikethrough": false,
    "backgroundColor": "transparent"
  },
  {
    "tag": "*",
    "color": "#98C379",
    "strikethrough": false,
    "backgroundColor": "transparent"
  }
]

이제 본인이 추가하고싶은 특수문자를 json형태로 추가합니다.

  {
    "tag": "@", // 커스텀 코드 추가
    "color": "#FFFF00", // 커스텀 색상 설정
    "strikethrough": false, // 취소선 넣을것인가
    "backgroundColor": "transparent" // 배경색은 어떻게 할 것인가
  }

적용된 settings.json의 최종적용 모습은 아래와 같습니다.

{
    "sync.gist": "e98a9e0b19e192a978f2f94f6a3902bf",
    "sync.autoDownload": true,
    "sync.autoUpload": true,
    "sync.forceDownload": false,
    "git.autofetch": true,
    "git.confirmSync": false,
    "editor.fontFamily": "D2Coding ligature, Consolas, 'Courier New', monospace",
    "editor.fontLigatures": true,
    "git.enableSmartCommit": true,
    "[javascript]": {
        "editor.defaultFormatter": "vscode.typescript-language-features"
    },
    "better-comments.tags": [
        {
          "tag": "!",
          "color": "#FF2D00",
          "strikethrough": false,
          "backgroundColor": "transparent"
        },
        {
          "tag": "?",
          "color": "#3498DB",
          "strikethrough": false,
          "backgroundColor": "transparent"
        },
        {
          "tag": "//",
          "color": "#474747",
          "strikethrough": true,
          "backgroundColor": "transparent"
        },
        {
          "tag": "todo",
          "color": "#FF8C00",
          "strikethrough": false,
          "backgroundColor": "transparent"
        },
        {
          "tag": "*",
          "color": "#98C379",
          "strikethrough": false,
          "backgroundColor": "transparent"
        },
        {
          "tag": "@", 
          "color": "#FFFF00", 
          "strikethrough": false, 
          "backgroundColor": "transparent" 
        }
   ]
}