목차
- 필수 vscode 확장 플러그인
- 유용한 vscode 확장 플러그인
- 마치며
-
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 확장 플러그인들을 정리해봤습니다.
-
많은 도움이 되었으면 좋겠습니다.
