VS Code 로 개발하면서 사용중인 플러그인

VS Code 로 개발하면서 사용중인 유용한 플러그인을 정리해봄

IntelliJ IDEA Keybindings

VS Code 를 사용하면서 인텔리제이와 단축키가 많이 달라서 햇갈릴 때가 많았는데,

이 플러그인을 사용하면 단축키를 인텔리제이와 거의 흡사하게 바꿔주기 때문에 정말 강추하는 플러그인

Material Icon Theme

폴더 및 파일의 아이콘을 정말 이쁘고 가독성 있게 바꿔줌. 강추

One Dark Pro

다양한 테마 플러그인이 있는데 개인적으로 One Dark Pro 가 가장 깔끔한듯

Auto Rename Tag

닫힘 태그를 자동으로 완성해줌. 생산성 ⤴

CSS Peck

적용 된 css 를 command + 클릭 으로 추적할 수 있게 도와줌

HTML CSS Support

CSS 자동 완성 기능

HTML Snippets

VS Code 가 기본적으로 제공해주는 기능이 있지만, 해당 플러그인은 그것보다 더 많은 기능을 가지고 있다

예를 들면 a 태그를 만들면 <a href=""></a> 까지 만들어 준다

Live Server

Vue 를 사용하면 npm run serve 로 보통 서버를 띄우므로 사용할 일은 없는데, 간단하게 테스트하고 싶을때 종종 사용함

Vetur

vue.js 자동완성, 문법강조 등을 지원

Vue VSCode Snippets

이것 역시 자동 완성기능인데 정말 편하다. 아래 시연을 보자. 보통 vdata, vmethod, vimport 사용함

Vue Peek

컴포넌트를 command + 클릭 으로 추적할 수 있게 도와줌

vscode-styled-components

css 코드 작성 시 자동완성을 해줘서 편함

Terminal

해당 플러그인을 설치하면 우측하단에 터미널 바로가기 아이콘이 생겨서 겁나 편함

ESLint

규약에 맞게 자동으로 코드를 바꿔줘서 일관성 있는 코드 작성이 가능하며, 코드 에러를 잡아주고 문법을 강제하는 등 코드 품질 개선 기능도 있다

Prettier

코드를 예쁘게 포맷팅 해주는 기능. ESLint 도 가능하지만, ESLint 보다 더 정교하고 특화된 기능들이 많다

보통 코드 품질 개선에는 ESLint를 사용하고, 코드 포맷팅은 Prettier 를 사용한다.

GitLens

마우스로 라인을 클릭하면 해당 라인을 누가 커밋을 했는지와, 커밋 메시지, 커밋 시간이 노출되서 확인이 편하다