VS CODE 확장 기능 2탄 (VS CODE Extensions)

vs code extentions에 대해서 작성한 글에 이어서 현재 제가 사용하고 있는 확장기능에 대해서 작성합니다

 

1. HTML Snippets

출처 : https://marketplace.visualstudio.com/items?itemName=abusaidm.html-snippets

확장기능 이름처럼 html snippet으로 html이나 jsx 파일에서 태그들을 쉽게 작성할 수 있게 해줍니다. 그림처럼 태그를 입력한 후 tab키를 누르면 코드가 작성됩니다. 만약 실수로 창을 껐다면 ctrl + space를 누르면 창이 다시 나타납니다

 

2. Reactjs code snippets

출처 : https://marketplace.visualstudio.com/items?itemName=xabikos.ReactSnippets

react를 사용할 때 컴포넌트 등을 쉽게 만들 수 있는 스니펫입니다. 저는 주로 rsc 단축어를 많이 사용합니다

 

3. Path Intellisense

출처: https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense

Path Intellisense는 path를 가이드해주는 확장기능입니다.

 

4. Prettier - Code formatter

prettier는 가장 유명한 코드 포멧터입니다. 저장시에 자동으로 코드 정렬이 되지 않는다면 ctrl + , 를 누른 다음 on save를 검색한 후 Editor: Format On Save 를 체크하시면 됩니다.

 

.prettierignore 파일을 생성해서 prettier 적용을 제외할 수 있습니다

# Ignore artifacts:
build
coverage

# Ignore all HTML files:
*.html

 

5. vscode-styled-components

출처: https://marketplace.visualstudio.com/items?itemName=jpoissonnier.vscode-styled-components

vscode-styled-components는 styled component 사용시에 작성한 css 부분에 가독성을 높여줍니다. 해당 확장기능을 사용하면 css 자동완성 및 오탈자도 체크가 되어 코딩할 때 편리합니다.

 

6. Bracket Pair Colorizer

출처: https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer

Bracket Pair Colorizer는 브라켓을 시각화 해줍니다. 여러 확장 기능이 있지만 개인적으로 제일 나은것 같습니다. 버전 2도 나왔습니다

 

7. Remote - SSH

출처: https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.remote-ssh

원격으로 서버를 접속하는 확장기능으로 제일 유용한 확장기능이라고 생각합니다. ec2 등 외부 서버에 접속을 할 때 사용하고 있고, 외부 서버의 폴더 트리 및 코드 파일을 vs code에서 확인이 가능합니다.

 

단점은 vs code가 무거운 감이 있어서 원격 접속시 원격 서버의 사양이 낮다면 자주 접속이 끊길 수 있습니다. 그리고 초기 세팅이 처음하는 분이라면 복잡할 수 있습니다

 

접속 설정 방법은 code.visualstudio.com/docs/remote/ssh-tutorial를 참고 해보세요.

pem키 설정은 jcon.tistory.com/103을 참고하세요