VSCode Setting

vscode setting

vscode 를 처음에 설치 후, 어떤 것을 셋팅해주면 좋을지 필요한 꿀팁을 적어보겠다.

저장시 불필요한 공백제거
Trim Trailing Whitespace 를 체크하여 줍니다. Settings 에 들어가서 Trim 만 검색해도 나옴.

탭 사이즈 조절
Settings 에 들어가서 tab 을 검색하면 Editor: Tab Size 가 나오는데 여기서 Size 를 조절해주면 됨.
기본적으로 4 가 설정되어 있으니, 2 로 바꿔보자.

단축키 조절
Keyboard Shortuts 에 들어가서 원하는 단축키를 변경합니다.
저 같은 경우에는 한 줄 행삭제를 cmd + k 를 사용하기 때문에 Delete Line 을 검색하여 변경해줍니다.

vscode extension

vscode 에는 많은 익스텐션이 있어 필요로한 기능만 따로 설치할 수 있습니다.

ESLint: 코드의 오류, 문법, 버그 등 소스의 품질관리 도구이다. 여기서 오류가 발생한 것을 바탕으로 Prettier 를 사용하여 고칠 수 있다.
Prettier: ESLint 에서 오류난 코드를 변경해주는 도구.
Auto Close Tag: 자동으로 Html 태그를 닫아줌.
Auto Rename Tag: 자동으로 태그의 이름을 변경해줌.
Color Highlight: 컬러의 하이라이트를 표시해서 미리 색상을 볼 수 있음.
Snippets: 각족 Snippets (Html, css, jsx 등) 자동완성 기능
Material Icon Theme: Icon 의 UI 의 디자인이 변경됩니다.
GIt History: git log, file history 를 한 눈에 볼 수 있음.
Power Mode: Power Mode 사용시에 코드 작성시 이펙트가 터져나오는 것을 볼 수 있다. 설정시에.. 심심하지 않음..
아래와 같이 설정하여 불꽃 모양의 이펙트를 만들 수 있습니다.

"powermode.enabled": true,
"powermode.presets": "flames",

Material Icon Theme: Material 아이콘 테마를 사용해서 폴더, 파일의 모양이 변경된다.

SVG Preivew: svg 파일을 프리뷰로 미리 볼 수 있다.

One Dark Pro: vscode 의 기본 테마를 아톰의 다크 테마로 변경한다.