VSCode 꾸미기

예쁜 스킨을 갖추지 않으면 코딩을 못하는 나..

정상인가요?

 

심지어 나같은 사람들은 아무리 예쁘게 스킨을 완성시켰어도

주기적으로 더 예쁘게 발전시켜야 되는 그런 병이 있다.

 

이번엔 어떻게 VSCode를 또 꾸며볼까 하다가 발견한 예쁜 extension 두가지를 소개합니다

 

 

1. vscode-icons

 

https://marketplace.visualstudio.com/items?itemName=vscode-icons-team.vscode-icons 

vscode-icons - Visual Studio Marketplace

 

파일 아이콘을 알록달록하게 꾸며주는 extension이다.

이 extension의 좋은 점은 눈에 잘 띈다는 점 뿐만 아니라, 같은 폴더라도 폴더명에 따라 다른 아이콘을 적용해준다.

 

적용 전 / 후

 

너무 귀엽다 진짜

 

 

 

2. Peacock

 

https://marketplace.visualstudio.com/items?itemName=johnpapa.vscode-peacock 

Peacock - Visual Studio Marketplace

 

윈도우를 여러개 띄워놨을 때 뭐가 뭐였지.. 하고 헷갈릴 때가 있다. 이때 Peacock을 사용하면 각 윈도우의 테두리 색깔을 지정해줄 수 있다.

 

 

설치 후 적용 방법은 F1 > 'Peacock' 검색 > 'Change to a Favorite Color'을 선택하면 되는데, 기본 색깔들이 너무 안예뻐서 하나씩 색깔을 설정해 줬다. 내가 설정한 색깔은 다음과 같다.

 

settings > peacock.favoriteColors에서 설정가능하다.

 

"peacock.favoriteColors": [
        {
            "name": "Coral",
            "value": "#d991a3"
        },
        {
            "name": "Skyblue",
            "value": "#91a9d9"
        },
        {
            "name": "Gold",
            "value": "#d6c77a"
        },
        {
            "name": "Crimson",
            "value": "#ba5252"
        },
        {
            "name": "Dark navy",
            "value": "#2e3c57"
        },
        {
            "name": "Olive",
            "value": "#799161"
        },
    ]

 

 

 

3. Better Comments

 

https://marketplace.visualstudio.com/items?itemName=aaron-bond.better-comments 

Better Comments - Visual Studio Marketplace

 

주석도 여러 종류가 있는데 .. 특정 주석을 강조하고 싶었다면 유용한 extension

주석앞에 특정 태그를 달면 주석의 색깔이 바뀐다.

 

어떤 태그를 달았을 때 어떤 색깔로 바뀔지 커스터마이징할 수 있다. 내가 설정한 방식은 다음과 같다.

 

settings > Better-comments.Tags에서 설정가능하다.

 

"better-comments.tags": [
        {
            "tag": "!",
            "color": "#FFB7B7",
            "strikethrough": false,
            "underline": false,
            "backgroundColor": "transparent",
            "bold": false,
            "italic": false
        },
        {
            "tag": "todo",
            "color": "#FFF4F4",
            "strikethrough": false,
            "underline": false,
            "backgroundColor": "transparent",
            "bold": false,
            "italic": false
        },
        {
            "tag": "*",
            "color": "#98C379",
            "strikethrough": false,
            "underline": false,
            "backgroundColor": "transparent",
            "bold": false,
            "italic": false
        },
        {
            "tag": ":",
            "color": "#67A0D0",
            "strikethrough": false,
            "underline": false,
            "backgroundColor": "transparent",
            "bold": false,
            "italic": false
        },
    ],

 

그럼 이렇게 예쁘게 주석 색깔이 바뀐답니다

 

단점은 setting을 바꾸고 save만 하면 바로 적용이 안되고 window reload를 해야 적용이 됨

 

 

---

 

뿌듯한 화요일 오후..

이제 잘 놀았으니 할 일을 하자