TODO Highlight
TODO Highlight은 VSCode의 Extension으로, 주석에 특정 키워드를 작성하면 위 사진과 같이 하이라이트되어 표기된다. ESLint 설정에서 해당 키워드를 감지했을 때 미해결된 경고를 띄우게 설정하여 같이 사용하기도 한다. 기본으로 TODO와 FIXME 두 가지를 제공하는데, BUG나 OPTIMIZE 등 사용자가 커스텀하여 키워드와 색상을 추가로 지정할 수 있다.
키워드 추가하기
VSCode의 settings.json에 다음과 같은 코드와 키워드를 작성한다.
// settings.json
"todohighlight.keywords": [
"HACK", "NOTE", "BUG", "INFO", "OPTIMIZE", "REVIEW"
],
색상 추가하기
색상을 변경하고 싶다면 VSCode의 settings.json에 다음과 같은 코드 작성으로 hex값 색상을 지정한다.
// settings.json
"todohighlight.keywords": [
{
"text": "HACK",
"color": "#ffffff",
"backgroundColor": "#8BA9F8",
"overviewRulerColor": "#8BA9F8"
},
{
"text": "NOTE",
"color": "#ffffff",
"backgroundColor": "#FF7F00",
"overviewRulerColor": "#FF7F00"
},
{
"text": "BUG",
"color": "#ffffff",
"backgroundColor": "#F44336",
"overviewRulerColor": "#F44336"
},
{
"text": "INFO",
"color": "#ffffff",
"backgroundColor": "#2196F3",
"overviewRulerColor": "#2196F3"
},
{
"text": "OPTIMIZE",
"color": "#ffffff",
"backgroundColor": "#9C27B0",
"overviewRulerColor": "#9C27B0"
},
{
"text": "REVIEW",
"color": "#FFFFFF",
"backgroundColor": "#8AC038",
"overviewRulerColor": "#8AC038"
}
]
적용하면 다음과 같이 사용할 수 있다 !
+ overviewRulerColor는 오른쪽 스크롤바에 작게 표기되는 부분의 색상 옵션이다. 별도의 설정을 하지 않아도 backgroundColor와 동일한 색상으로 지정된다.
