본문 바로가기
테크 세미나/개발 Nous

powermode 입력 효과주기, vscode 배경넣기

by Junmannn 2022. 1. 26.
반응형

 

 

vscode에 코드 입력 효과를 주는 플러그인을 소개드릴게요

powermode를 사용해 vscode에 코드입력에 대해서 이펙트를 줄 수 있어요.

https://marketplace.visualstudio.com/items?itemName=hoovercj.vscode-power-mode

 

Power Mode - Visual Studio Marketplace

Extension for Visual Studio Code - Your code is powerful, unleash it! The extension made popular by Code in the Dark has finally made its way to VS Code.

marketplace.visualstudio.com

이 플러그인을 vscode 로 다운로드를 받은 후

1. 맥북이라면 command + p 를 누른 후 settings.json 을 켜거나

2. (맥북)command + , 를 누르거나 (윈도우) control + , 를 누르면 세팅이 나옵니다. setting 을 검색하면 나오는 나오는 settings.json 에서 편집하기를 누르면 파일을 열 수 있습니다.

여기서 settings.json 파일에 

"powermode.enabled": true,
"powermode.presets": "magic",
"powermode.enableShake": false,
 
이 부분을 추가하게 되면
powermode.enabled는 powermode 를 사용하겠다는 뜻입니다
powermode.presets는 여러가지 테마가 있는데 여기서 뭘 사용하겠는지 고르기만 하면 됩니다.
powermode.enableShake 부분은 설정하지 않으면 코드 전체가 흔들립니다

저는 이게 싫어서 enableShake 를 false로 두었습니다. 그러면 아래와 같이 변하게 됩니다.

 

 

 

다음은 비주얼스튜디오 자체에

배경화면을 넣는 플러그인입니다!

 

https://marketplace.visualstudio.com/items?itemName=shalldie.background 

 

background - Visual Studio Marketplace

Extension for Visual Studio Code - A simple tool to make your vscode's background look better!

marketplace.visualstudio.com

 

"background.useDefault": false,
    "background.customImages": [
        "/Users/junhoyoon/Desktop/PREF/Simpsons_1.jpeg",
        "/Users/junhoyoon/Desktop/PREF/sup.webp"
    ],
    "background.style": {
        "content": "''",
        "pointer-events": "none",
        "position": "absolute",
        "z-index": "99999",
        "width": "90%",
        "background-position": "left",
        "opacity": 0.1,
        "background-size" : "cover"
    },

 

- default 사진을 사용하지 않고 내 사진을 사용하겠다

- 사용할 사진들을 넣습니다. (화면이 여러개 분할될때마다 다른 사진이 뜨게 할 수 있고, 코드 홥면을 분할해도 하나의 사진만 둔다면 하나가 계속 뜹니다

- background 플러그인의 설정입니다.편하신 대로 커스텀 해보시길 바랍니다

 

 

 

전체적인 settings.json 입니다

	"background.useDefault": false,
    "background.customImages": [
        "/Users/junhoyoon/Desktop/PREF/Simpsons_1.jpeg",
        "/Users/junhoyoon/Desktop/PREF/sup.webp"
    ],
    "background.style": {
        "content": "''",
        "pointer-events": "none",
        "position": "absolute",
        "z-index": "99999",
        "width": "90%",
        "background-position": "left",
        "opacity": 0.1,
        "background-size" : "cover"
    },
    "powermode.enabled": true,
    "powermode.explosions.size": 7,
    "powermode.presets" :"flames",
    "bracket-pair-colorizer-2.depreciation-notice": false,
    "powermode.combo.location": "editor",
    "powermode.combo.timeout": 60, // 20초 간의 변화를 볼 것이다
    "powermode.shake.enabled": false,

해당 부분들을 추가했어요

반응형