25
4월
2019

VS CODE extension for FE

전통적으로 Javascript 개발 환경은 java처럼 복잡한 IDE 대신에 매우 가벼운 에디터로도 충분했습니다. 하지만 현대에는 frontend 개발의 주축이 되면서 매우 복잡해졌기 때문인지 Webstorm과 같은 강력한 IDE로 개발하는 경우도 많아졌습니다.

개발자에 따라 자바스크립트의 개발환경은 새롭고 강력한 IDE를 사용하는 환경, 전통적인 간단한 에디터를 그대로 사용하는 환경… 이렇게 두 분류로 나눠져 있다고 생각하는데요, 물론 이것은 개발 상황, 조직의 상황, 그리고 개인의 취향으로 어떤 것이든 선택할 수 있죠.

Webstorm이 IDE계의 왕좌에 있다고 한다면, Visual Studio Code(줄여서 vscode)는 가벼운 에디터를 선호하는 개발자에게 있어 끝판왕이라고 해도 과언이 아니라고 생각합니다.

microsoft에서 개발하고 있으며, Update log에 소개되는 추가 기능을 따라가기 힘들 정도로 업데이트가 활발한 것이 장점입니다. 아마 editplus, sublime text, atom 등을 사용하던 분들도 vscode로 많이 이동했을 거라고 생각합니다.

또한 vscopde는 플러그인으로 완성되는 에디터이기에, 그동안 사용했던 플러그인 중 나름 추천하는 플러그인을 소개해보려고 합니다.


추천 플러그인

Korean Language Pack for Visual Studio Code

당연하겠지만, 한국어 언어팩은 한국인 개발자라면 필수적입니다. 원래 다국어가 vscode에 내장되어 있었지만, 언젠가부터 언어팩을 별도로 설치하는 방향으로 수정되었습니다.

editorconfig for vscode

editorconfig에 대한 vscode의 플러그인입니다. 대부분의 IDE, editor에서는 어떤 방법이든 editorconfig를 지원하는데 vscode의 경우엔 플러그인으로 분리되어 있습니다.

.editorconfig의 기본 하이라이팅을 지원하기도 하지만 editorconfig에 설정된 내용을 기반으로 vscode의 editor setting을 override하는 역할도 합니다. 여러명이 함께 개발하는 프로젝트일 경우의 환경 차이를 극복할 수 있고, 특히 Windows와 MacOS의 line ending 차이로 인해 불필요하게 git diff가 발생하기도 하는데 이 문제를 해결할 수 있습니다.

ESLint

인터넷에서 따로 vscode plugin을 검색하지 않아도, vscode의 확장 탭에서 “자주 사용되는 확장 순서”로 정렬해서 검색할 때 상위권에 있는 플러그인들은 필수적입니다. 그중에서도 가장 상위권에 있는 플러그인이 바로 ESLint 인데요,

Javascript, ES6의 컨벤션, 문법 체크 등을 수행할 수 있으며, nodejs의 eslint 컴포넌트와 함께 lint (정적 검사) 기능을 수행하는 플러그인입니다.

Prettier

Prettier는 근래 나온 formatter 중에서는 매우 강력한 툴입니다. 많은 언어와 에디터를 지원합니다.
코드를 알아보기 어렵게 작성하더라도 formatting을 한번 실행하면 매우 깔끔하게 정리되는데요, 개발자의 취향에 따라서는 너무 코드가 많이 변경되기 때문에 불호가 있는 formatter이기도 합니다.

여러 명이 함께 일하는 조직에서는 초기 개발환경을 ESLint + Prettier + editorconfig 로 설정하고 시작하는 것이 여러모로 편리합니다.

Settings Sync

vscode의 환경설정과 플러그인 등 모든 것을 백업할 수 있는 플러그인이며, github gist를 사용합니다. 컴퓨터를 포맷하는 경우, 또는 다른 컴퓨터에 vscode를 추가로 설치하는 경우 등에 활용할 수 있습니다.

vscode의 전체 설정, 설치했던 플러그인과 개별 설정, keymap, 심지어 workspace까지 그대로 복원할 수 있습니다.

gitLens

이 플러그인 역시 협업할 때 좋은 플러그인인데, line 별로 git history를 확인할 수 있는 기능이 매우 강력합니다. 강력한 git diff 기능도 제공합니다.

Bracket Pair Colorizer 2

자바스크립트는 괄호의 사용이 많아서, 컨벤션을 잘 정리하지 않으면 코드를 알아보기 어렵다는 단점이 있는데 이를 조금 보완해주는 플러그인입니다.

괄호를 각각 다른 컬러로 하이라이팅하고 커서가 위치했을 경우 같은 컬러의 선으로 이어줘서 조금 더 알아 보기 쉽게 해줍니다. 쓰다보면 가끔 라인의 색상이 어긋나는 경우도 있지만, 금방 원래대로 돌아옵니다.

원래 v1 버전이 있으나 현재 v2가 테스트 중(現 2019.04)입니다.

Auto Rename Tag

html, xml에서 태그를 수정할때 여는 태그, 또는 닫는 태그 어느쪽을 수정하더라도 반대편의 태그도 함께 자동으로 수정해주는 플러그인입니다. 별도의 커맨드 실행 없이 자동으로 적용됩니다.

HTML은 당연하고, react 의 jsx 를 개발할 때 컴포넌트 명의 수정에 대해서도 생산성 향상의 효과가 큽니다.

Better comments

보통 주석은 한가지 색상으로 하이라이팅되지만, 이 플러그인을 사용할 경우 prefix에 따라 여러 색상으로 주석을 보여줍니다.

색상과 prefix 모두 커스텀할 수 있지만, 너무 많은 색상이 있을 경우엔 약간씩 하이라이팅 오류가 생기기도 하고 혼동이 오기도 하기 때문에… 저같은 경우 TODO만 설정하여 사용하고 있습니다.

Import Cost

import하는 모듈 컴포넌트 등의 사이즈를 옆에 표시해줍니다. 색상도 함께 설정할 수 있습니다.

npm Intellisense

package.json을 통해 설치된 npm module 들의 자동완성을 지원합니다.

또 커맨드 팔레트를 통해서 npm module을 인스톨하거나 import 문을 자동완성 해주는 기능도 있습니다.

Markdown Preview Github Styling

markdown은 별도의 도구 없이 문서를 바로 작성할 수 있는 마크업 언어의 일종입니다. 하지만 표준이 없기 때문에 사이트 / 도구에 따라 변환되는 방식이나 표시 방식이 다르고, 커스텀화된 문법도 차이가 있습니다.

개발자라면 대부분 github 에서 markdown(.MD) 파일을 접하게 될텐데요, 이 플러그인은 github 스타일로 markdown 파일을 미리보기로 보여줍니다. 그래서 preview 화면을 보면서 바로 github에 대응하는 markdown을 작성할 수 있습니다.


Language / Framework support

vscode는 javascript 는 처음부터 하이라이팅을 지원하지만, 기본 내장되지 않은 언어는 플러그인으로 지원합니다.

그리고, 각종 Language support plugin 이외에도 최근 많은 인기를 가지고 있는 Vue.js, React 등의 개발을 도와주는 플러그인도 많이 있습니다.


테마

테마는 구글에서 vscode theme로만 검색해도 best theme in 2019 류의 아티클을 쉽게 찾을 수 있습니다. 그런 글을 통해서 여러 테마를 설치해보고 자신이 맘에 드는 것을 찾으면 됩니다.

저도 여러 테마를 거쳐 쓰게 된 것은 one dark pro, monokai pro 등인데요, 이 테마들은 기본적으로 지원이 잘 되는 테마이며 marketplace에서도 최상위권에 있는 테마이기도 합니다.

  • One Dark Pro
    github의 atom 에디터 때문에 유명해진 색상 조합입니다.
  • Monokai Pro
    5개의 테마와 5개의 파일아이콘 테마를 지원합니다. 개인적으로 좋아하는 커피색 위주의 색상 조합도 있는데요, 단점이 하나 있습니다. 테마 자체의 기능 제한이 없는데 업데이트 할 때에 9.95€ 의 기부 팝업이 뜨는 것이 좀 귀찮습니다.

파일 아이콘 테마

파일 아이콘 테마 역시 검색으로 굉장히 많이 찾을 수 있고, 상위권에 있는 테마들이 역시 지원되는 파일의 종류도 많고 괜찮습니다.

파일 아이콘 테마는 지원되는 파일 종류가 얼마나 되는지가 중요한데요, 주로 vscode-icons (vscode팀 자체 제작), Material icons가 인기가 많습니다.

댓글 남기기

이메일은 공개되지 않습니다. 필수 입력창은 * 로 표시되어 있습니다

%d 블로거가 이것을 좋아합니다: