etc - vscode 확장 플러그인

doohyunlm·2021년 8월 3일
3

etc

목록 보기
4/8
post-thumbnail

목차


  1. 필수 vscode 확장 플러그인
  2. 유용한 vscode 확장 플러그인
  3. 마치며

  • vscode를 좀 더 유용하게 사용할 수 있게 만들어주는 확장 플러그인들이 있습니다.

  • format을 자동으로 적용해주거나 git gragh를 보여주는등 좋은 확장 플러그인들을 소개해보겠습니다.




1. 필수 vscode 확장 플러그인


  • 상당히 유용하며 거의 필수로 설치하여 사용하는 플러그인들입니다.

Prettier

  • 협업을 한다면 사용 안 할 수가 없는 Prettier입니다.

  • Formatter로써 자동으로 각 설정에 맞게 변환시켜줍니다.


Prettier 설정

settings.json < .editorconfig < .prettierrc

  • Prettier 적용 순서로 .prettierrc가 가장 강력하기에 보통 프로젝트 진행시 이 파일에 설정 값을 저장해 사용합니다.

  • 설정 설명(많은 설정이 있지만 주로 사용하는 설정들만 작성)

|명칭|설명|default|추천|
|:---:|:---:|:---:|:---:|
|prettier.printWidth|한줄에 있을 수 있을 글자 수를 설정합니다. 넘게 되면 줄바꿈하여 코드를 정렬합니다.|80|120|
|prettier.tabWidth|텝을 눌렀을 때 몇칸이 띄어지는지를 설정합니다.|2|4|
|prettier.singleQuote|홑따옴표를 쓸건지 설정합니다. "->'|false|false|
|prettier.trailingComma|객체, 배열, 함수 등의 후행에 쉼표를 찍을지 제어합니다.|none|none|
||none - 쉼표 X, es5 - ES5에서 유효한 후행 쉼표, all - 가능하면 후행 쉼표|||
|prettier.semi|코드 마지막에 세미콜른 여부를 결정합니다.| true|true|
|prettier.useTabs|탭이 있는 줄을 들여쓰기 할지 결정합니다.|false|false|




Log File Highlighter

  • 로그를 각 INFO,WARN,ERROR로 분류해서 다른 색깔을 보여줍니다.

  • 로그 파일의 내용을 구분해주기 때문에 좀 더 명확하게 로그 파일을 확인 할 수 있을 뿐더러 에러를 파악하기 쉽게 만들어 줍니다.




GitLens — Git supercharged

  • Git을 사용하는 사람중 vscode에서 안쓰는 사람이 없다는 GitLens입니다.

  • 시각적으로 commit log를 볼 수 있으며 각 파일에 대한 비교도 가능합니다.

  • 커서만 올려도 누가 커밋했는지 알 수 있기에 git 사용에는 필수적이라고 생각합니다.




Git Graph

  • Git Graph를 분기점등으로 색깔 및 그래프 변화를 보여줘 좀 더 git을 편하게 볼 수 있도록 도와주는 확장 플러그인입니다.




Path Intellisense

  • VScode를 사용중에 파일이나 이미지 등의 경로를 지정할때 자동으로 경로를 선택해서 지정할 수 있게 해주는 아주 편리한 플러그인입니다.

  • 첫글자로 .을 입력하면 상대경로, /로 입력하게 되면 절대 경로로 예시를 제공해줍니다.




Color Highlight

  • css/web에서 색상을 찾아서 표시해주는 플러그인입니다.

  • Marker Type을 Outline으로 변경하면 좀 더 깔끔하게 사용할 수 있습니다.




Bracket Pair Colorizer

  • 코드에서 사용되는 괄호를 짝을 맞춰 다르게 설정해주는 플러그인입니다.

  • 끝나는 부분이나 닫히는 부분이 명확하게 보여 좀 더 코딩하게 편하게 만들어 줍니다.




indent-rainbow

  • 코드의 들여쓰기 횟수에 따라 색을 다르게 보여줍니다.




Code Spell Checker

  • 영문으로 작성된 코드의 오타를 잡아주어 휴먼에러를 줄일 수 있습니다.




XML tools

  • xml 하이라이터입니다.

  • 좀 더 xml이 분간이 쉽게 색상을 변경해줍니다.




2. 유용한 vscode 확장 플러그인


REST Client

  • backend에서 api을 작성시 post-man이나 Insomnia로 테스트를 해야하는데 REST Client를 사용하면 front 테스트 코드 작성이나 툴이 없어도 api를 테스트 가능합니다.
@url = localhost:3001

### member
GET http://{{url}}/member/1
content-type: application/json

###
# @name login
POST http://{{url}}/login
Content-Type: application/json

{
    "user_email": "test@gmail.com",
    "password": "ngwrekjgnwergnu345h2354923-rewof"
}

### 
  • 위의 예시처럼 코드를 작성하고 원하는 경로로 맞추어 놓게 되면 backend에서도 간편하게 api를 테스트 해볼 수 있습니다.

파일명은 *.http 형식으로 작성하시면 됩니다. *에 원하는 명칭을 집어넣으시면 됩니다.




Debugger for Chrome

  • 바로 크롬에서 코드를 변경하면 확인 가능하게 보여주는 플러그인입니다.

  • 프론트에서 작성할 때 유용합니다.




Remote – ssh

  • ssh를 사용할 수 있게 해주는 확장 플러그인입니다.

  • EC2연결등 ssh를 사용할 때 유용하게 사용할 수 있습니다.




Markdown All in One

  • 마크다운 언어를 사용할 수 있게 해주는 플러그인입니다.

  • vscode 오른쪽에 보면 마크다운을 작성하면서 어떻게 나오는지에 대한 미리보기 기능을 제공합니다.




Turbo Console Log

  • 콘솔로그를 만들어 주는 유용한 확장 플러그인입니다.

|명령어|설명|
|:---:|:---:|
| ctrl + alt + L|console.log 생성|
|shift + alt + c|생성된 console.log 일괄 주석 처리|
|shift + alt + u|생성된 console.log 일괄 주석 처리 해제|
|shift + alt +d|생성된 console.log 들을 소스에서 일괄 삭제|




Korean language pack for

  • vscode를 한국어로 사용할 수 있게 해주는 플러그인입니다.




3. 마치며


  • 제가 사용하며 유용했던 vscode 확장 플러그인들을 정리해봤습니다.

  • 많은 도움이 되었으면 좋겠습니다.

profile
백엔드 개발자

0개의 댓글