내 맘대로 추천하는 프론트엔드/리액트 개발자를 위한 편리한 VSCode Extension(확장 프로그램) 모음

 

 

이번 포스팅에서는 제가 Vscode에서 자주 사용하는 확장 프로그램에 대해 공유하려고 합니다. 저는 자바스크립트나 타입스크립트 뿐 아니라 대부분의 개발을 VSCode로 하는 편이라 설치한 것들이 프론트엔드 개발 관련 확장 프로그램 위주이긴 하지만, 추가로 사용해보면 좋을 듯 한 확장 프로그램도 함께 소개하려 합니다.

ESLint, Prettier는 너무나도 많이 사용되고 있기도 하고, 다른 포스팅에도 소개한 사례가 많아 제외하였습니다🙂

1. Beautify

marketplace.visualstudio.com/items?itemName=HookyQR.beautify

Beautify - Visual Studio Marketplace

Prettier를 사용하더라도, 다른 곳에서 복붙해오거나 설정이 되지 않은 부분을 작성하거나 하면 코드의 스타일이 깨지기 마련입니다. Beautify는 코드의 들여쓰기를 자동으로 정리해주는 확장기능입니다. 들여쓰기가 제대로 처리되어 있지 않은 코드들을 선택한 후 설정한 Beautify 명령어를 입력하면, 자동으로 정렬됩니다.

 

편-안

사실 저는 한 묶음 코드를 작성한 다음에는 무조건 Beautify를 돌리는 습관이 들어있습니다. 결국엔 제일 많이 사용하게 되는 확장 기능이기도 하네요.

 

 

2. Path Intellisense

marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense

Path Intellisense - Visual Studio Marketplace

Path intellisense는 파일이나 이미지의 경로를 지정해 줄 때, 자동으로 경로를 선택해서 지정할 수 있게 해줍니다. 폴더 구조가 복잡하고 파일이 많을수록 헷갈리는 경로 설정을 편하게 도와줍니다.

 

마우스 커서 죄송... 😅

옵션을 설정할 수도 있지만, 기본 옵션으로 사용한다면 프로젝트의 루트 폴더를 기준으로(workspace를 open한) 상대경로, 절대경로로도 작동합니다. 

 

 

3. Auto Rename Tag

marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag

Auto Rename Tag - Visual Studio Marketplace

Auto Rename Tag는 HTML/XML 태그에서 앞 태그를 바꾸면 뒷 태그까지도 자동으로 수정해주는 확장기능입니다.

원래는 일일이 앞을 변경하면 뒤 까지 찾아가서 변경해야 했는데, 이 확장기능을 이용하면 손쉽게 바꿀 수 있습니다.

다만 앞 태그를 수정하면 무조건 뒤 태그가 따라서 바뀌기 때문에, 이것저것 건드려볼때는 다소 귀찮을 수도 있다는 단점은 있습니다.

 

4. Live Server

marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer

Live Server - Visual Studio Marketplace

이 확장기능을 사용하면 HTML 파일을 로컬 서버에 올려줍니다. 설치하고 나면 HTML 파일에 커서를 올려놓고 우클릭했을때,

다음과 같이 Open With Live Server라는 탭이 나타나게 됩니다. 이를 사용하면 

코드를 수정했을 때 브라우저를 새로고침함으로써 수정사항을 바로 반영할 수 있게 됩니다. 단일 HTML 파일을 작업하거나 할 때 유용하게 사용하고 있습니다.

 

5. Highlight Matching Tag

marketplace.visualstudio.com/items?itemName=vincaslt.highlight-matching-tag

Highlight Matching Tag - Visual Studio Marketplace

태그를 선택하면 자동으로 매칭되는 태그를 찾아주는 확장기능입니다. 

매칭되는 태그가 노란색으로 하이라이트된다.

하지만 Highlight Matching Tag를 사용하면 이렇듯 어떤 태그가 서로 매칭되는지 확인할 수 있게 됩니다. 기본값은 노란색 밑줄이지만, 이 역시 설정할 수 있습니다.

"highlight-matching-tag.styles": {
  "opening": {
    "name": {
      "underline": "yellow"
    }
  }
}

저는 HTML 파일의 구조가 복잡해지면 아무리 Beautify를 돌려도 구분하기 힘든 경우가 많아서 자주 애용하는 편입니다,

 

6. Auto Import - ES6, TS, JSX, TSX

 

marketplace.visualstudio.com/items?itemName=steoates.autoimport

Auto Import - Visual Studio Marketplace

리액트 개발을 할 때 많이 사용하게 되는 확장기능입니다. (이전에는 ES6에서만 제공하다가 JSX,TSX,TS까지 확장되었습니다)

아직 import하지 않은 모듈의 메소드를 불러오거나, 리액트 컴포넌트를 불러오거나 할 때 자동으로 import 구문을 찾아서 추천해줍니다.

commonJS에서 require를 사용하는 것과는 달리 ES6, TS, JSX, TSX는 기본적으로 다른 모듈을 불러올 때 import를 사용하기 때문에 이 확장기능을 많이 사용하게 됩니다. 

이를 사용하지 않으면 매번 컴포넌트 import 구문을 추가해줘야 하기 때문에 매우 불편합니다.

 

 

7. Reactjs code snippets

marketplace.visualstudio.com/items?itemName=xabikos.ReactSnippets

Reactjs code snippets - Visual Studio Marketplace

이전에도 포스팅으로 소개한 적이 있는 확장기능입니다. enfanthoon.tistory.com/104

[VSCode] Code Snippets 기능 사용해보기(+ Reacjs code snippets 사용법)

React를 사용할 때 자주 사용하는 code snippets을 사용할 수 있게 됩니다.

예를 들어 rsc(React Stateless Component)를 입력하면 다음과 같이 함수형 컴포넌트의 PropTypes가 나오고 불러와 사용할 수 있습니다.

이 역시 리액트 개발을 하면서 굉장히 많이 사용하게 됩니다. 

 

 

 

제가 사용하는 확장기능중에서도 간단하면서도 편한 기능을 제공한다고 느낀 것들에 대하여 소개해보았습니다. 확장기능이라는 건 역시 개발자의 입맛에 맞춰 사용할 수만 있다면 정말 강력한 기능을 제공하는 것 같습니다 🙂

이상으로 포스팅을 마칩니다.

 

📚 출처

marketplace.visualstudio.com/