플러그인

VS Code는 다양한 플러그인(확장)을 지원한다. 플러그인은 VS Code 기능을 추가하는 공식 단위이며, 코딩의 편의성과 효율성을 높여준다. 나 역시 처음에는 어떤 플러그인이 유용한지 잘 몰라 활용하지 못했는데, 막상 써보니 정말 도움이 되는 것들이 많았다. 그중 유용한 몇 가지를 소개하고자 한다.

IntelliCode

일반적으로는 코드를 작성 중일 때 자동완성이 abc 순서대로 보인다. 물론 자동완성이 있다는 것 자체만으로도 편리하지만, 가끔 전혀 사용하지 않을 자동완성이 위에 있으면 불편하다.
IntelliCode는 자주 쓰는 코드를 문맥 기반으로 예측해서 가장 적합한 자동완성을 별표(*)와 함께 위에 띄워주는 역할을 한다.
이전에는 내가 원하는 자동완성이 아래에 있을 때마다 상당히 불편하였는데, IntelliCode를 사용하니 내가 필요한 자동완성을 위에 띄워주어 코드를 쓰는 시간이 줄어들게 되었다.

indent-rainbow

파이썬에서는 들여쓰기가 정말 중요하다. 다른 대부분의 언어처럼 중괄호를 사용하지 않기 때문에 엄격한 들여쓰기를 통해 분기를 구분한다. indent-rainbow를 사용하면 같은 들여쓰기마다 앞에 같은 색으로 칠해주기 때문에 들여쓰기 구분이 잘 되고, 들여쓰기가 맞지 않을 땐 빨갛게 알려주기도 한다.
처음에는 코드 화면이 알록달록해지는 것이 적응되지 않았지만, 앞에 색이 생기는것 만으로 들여쓰기를 더 의식하게 되고 중간에 들여쓰기 실수가 생길 때 알아보기 쉬워졌다.

Prettier

Prettier는 JavaScript, TypeScript, HTML, CSS, JSON, Markdown을 사용할 때 들여쓰기, 따옴표(' vs "), 세미콜론 여부, 줄바꿈 위치 등을 스타일 가이드에 맞춰 일관성 있게 맞춰준다.
Python 공식 언어로는 Prettier가 기본 지원 언어는 아니며, Python 코드 스타일 정리에는 Black이라는 전용 포맷터를 주로 사용한다.
포맷터를 한가지만 사용한다면 File > Preferences > Settings에서 formatter라고 검색하여 Editor: Default formatter를 지정해줄 수 있지만 나는 두가지를 모두 사용해야 하기 때문에 현재 연 파일 형식에 따라 포맷터를 다르게 사용할 수 있도록 설정해보겠다.

우선 Ctrl+Shift+p를 누르고 Open User Settings(JSON)을 검색하여 클릭한다.

현재는 "editor.defaultFormatter": "esbenp.prettier-vscode"라고 되어있어 Prettier를 기본 포맷터로 사용하라고 지정해놓은 상태이다.

하지만 아래에 이렇게 언어별로 포맷터를 설정하는 내용을 추가하면, 언어마다 자동으로 포맷터를 구분해서 사용하기 때문에 매번 수동으로 바꿔줄 필요가 없어진다.

"[python]": {
  "editor.defaultFormatter": "mikoz.black-py"
},
"[javascript]": {
  "editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[html]": {
  "editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[json]": {
  "editor.defaultFormatter": "esbenp.prettier-vscode"
}

Live Server

Live Server는 HTML 파일을 작업할 때 정말 좋은 플러그인이다. 원래 HTML 파일을 작성하고 실행한 상태에서 코드를 수정하면 브라우저에서 새로고침을 해야 변경사항을 확인할 수 있다. 그러나 Live Server를 설치해두면 코드를 수정할 때마다 자동으로 브라우저에 변경점이 반영되어 즉시 확인할 수 있다.

Image Preview

Image Preview는 말 그대로 사진 소스를 미리 보여주는 역할을 한다. 코드 상에서 사진 파일의 경로에 커서를 올리면 사진을 위에 띄워준다.
코드에서 사진 자료가 많아질 때 올바르게 사진을 넣었는지 확인할 때 편리해질 것으로 기대한다.

Python Indent

이 플러그인은 파이썬 전용이다. 사실 기본 Python 확장만으로도 for, if, def 같은 구문 뒤에서 엔터를 치면 자동 들여쓰기가 지원된다. 그러나 복잡한 중첩 구문에서는 들여쓰기가 예상대로 맞지 않는 경우가 생길 수 있다. Python Indent를 사용하면 이런 상황에서 자동 보정을 더 정교하게 해주어 복잡한 들여쓰기 꼬임을 바로잡는 데 유용하다.

마무리

내가 실제로 쓰고있는 유용한 플러그인 몇 가지를 정리해보았다. 앞으로도 유용한 도구나 세팅을 발견하게 된다면 추가적으로 공유하도록 하겠다.