개발을 할 때 vs code를 사용하여 개발하기 때문에 확장프로그램은 거의 필수인 것 같다. 내게 필요한 것을 찾아 설치하여 사용하면 코딩할 때 많은 도움을 받을 수 있다. 그래서 내가 평소에 사용하는 확장프로그램을 정리해보려고 한다.
확장프로그램은 모두 다 설치할 필요가 없으며 원하는 것만 찾아서 설치하면 된다.
Prettier
프리티어는 개발할 때 아주 유용하게 쓰이는 포맷 중 하나로 VSCode에서 코드를 예쁘게 정렬해준다. 내가 줄을 이상하게 맞춰도 저장할 때 자동 저장해주어 코드를 깔끔하게 정리해준다. Prettier 설정은 개인에게 맞는 방식대로 설정하면 되는데 자동저장, 따옴표 설정 등 원하는 것들을 찾아서 설정할 수 있다.
기본적인 셋팅 방법은 VSCode 에서 찾아서 설치해준 후 설정에 들어가서 변경할 수 있다.
1. 가장 먼저 Default Formatter가 prettier로 설정되어있는지 확인 (설정 -> default formatter 검색)
2. format on save를 검색하여 체크해주면 저장시 자동으로 정렬해준다. (설정 -> format on save 검색)
3. 추가적으로 설정을 원하는 규칙들은 설정에서 바꿔주면 된다. (settings.json 파일을 열고 설정하는 방법도 있다.)
ESLint
ESLint 는 코드 문법적인 에러도 잡아주고 일관된 코드 스타일 포멧을 유지시켜준다. 개발자가 개발할 때 자바스크립트 코드를 분석하여 에러를 잡아주기 때문에 개발할때 아주 유용한 툴이라고 할 수 있다. 간단한 포맷팅도 가능해서 Prettier을 설치하지 않고도 기본 포맷팅을 사용할 수 있다.
ESLint가 포맷팅과 문법수정 등에 초점이 맞추어져있다면 Prettier는 포맷팅에 특화되어있는 확장프로그램이라고 생각하면 된다.
그렇기 때문에 eslint와 prettier을 같이 사용하는 경우에는 충돌이 날 수 있어 이를 알맞게 설정해줘야한다. 예전에는 Prettier로 포맷팅 설정을 해줘서 사용했었지만 지금은 ESLint의 자동 포맷팅을 사용하기에 굳이 프리티어를 설치하지 않았다.
하지만 협업을 할 때 코드 컨벤션을 맞추기 위해서는 Prettier를 동일하게 설정해준다거나 하는 작업이 필요하다. 각자가 다르게 설정되어있다면 서로 수정했을때 코드가 지저분해지는 문제가 발생하기 때문이다.
Git Graph
git graph는 연결된 레파지토리의 git 그래프를 볼 수 있도록 해주는데 어떤 브랜치에서 어떻게 머지가 되었고 이런 부분들을 다 볼 수 있어 좋다. 커밋내역부터 날쨔, 누가 커밋했고 머지했는지 등에 대해서까지 모두 확인이 가능하다.
VSCode 왼쪽에서 메뉴 탭에서 소스 제어 부분을 클릭해준 후, 깃 그래프 아이콘을 클릭하면 아래와 같은 깃 그래프가 나타난다. 색도 예쁘고 한눈에 보기 편해서 꼭 깔아서 사용하는 확장프로그램 중 하나이다.
REST Client
Rest clients는 VSCode에서 HTTP request를 직접 보내고 그에 따른 response를 확인할 수 있도록 도와주는 확장프로그램이다.
REST Client는 다음과 같은 특징을 가지고 있으며 아래와 같이 사용한다.
1. .http 또는 .rest 확장자 파일을 생성해 바로 테스트해볼 수 있는데 플러그인 설치 후 .http or .rest 파일을 생성한다.
2. 그 후 REST API 요청을 보내면 되는데 아래와같이 작성한다. 기본 구조는 HTTP method / Request URL / HTTP 프로토콜 버전이다.
GET https://reqres.in/api/users HTTP/1.1
이런식으로 작성하면 바로 위에 Send Request라고 나타나는데 이를 클릭하면 아래와 같이 데이터를 잘 받아오는 것을 알 수 있다. Rest api는 https://reqres.in/ 을 이용했다.
HTTP/1.1 200 OK
Date: Fri, 07 Oct 2022 05:27:49 GMT
Content-Type: application/json; charset=utf-8
Transfer-Encoding: chunked
Connection: close
X-Powered-By: Express
Access-Control-Allow-Origin: *
Etag: W/"3e4-2RLXvr5wTg9YQ6aH95CkYoFNuO8"
Via: 1.1 vegur
Cache-Control: max-age=14400
CF-Cache-Status: HIT
Age: 4773
Report-To: {"endpoints":[{"url":"https:\/\/a.nel.cloudflare.com\/report\/v3?s=52wkLtssySDeugjOo3wwmdxwbFrPj%2FiW1ea%2FeBppotGyok65sYd42PHBsOvIpyJDQwxVNHdb5RXXl63DXuZjGBMEjsOvHLGD1KjMohIBd%2BGZBMPUrFRZMm%2BgNg%3D%3D"}],"group":"cf-nel","max_age":604800}
NEL: {"success_fraction":0,"report_to":"cf-nel","max_age":604800}
Vary: Accept-Encoding
Server: cloudflare
CF-RAY: 75643ad4fd688a57-NRT
Content-Encoding: gzip
{
"page": 1,
"per_page": 6,
"total": 12,
"total_pages": 2,
"data": [
{
"id": 1,
"email": "george.bluth@reqres.in",
"first_name": "George",
"last_name": "Bluth",
"avatar": "https://reqres.in/img/faces/1-image.jpg"
},
{
"id": 2,
"email": "janet.weaver@reqres.in",
"first_name": "Janet",
"last_name": "Weaver",
"avatar": "https://reqres.in/img/faces/2-image.jpg"
},
{
"id": 3,
"email": "emma.wong@reqres.in",
"first_name": "Emma",
"last_name": "Wong",
"avatar": "https://reqres.in/img/faces/3-image.jpg"
},
{
"id": 4,
"email": "eve.holt@reqres.in",
"first_name": "Eve",
"last_name": "Holt",
"avatar": "https://reqres.in/img/faces/4-image.jpg"
},
{
"id": 5,
"email": "charles.morris@reqres.in",
"first_name": "Charles",
"last_name": "Morris",
"avatar": "https://reqres.in/img/faces/5-image.jpg"
},
{
"id": 6,
"email": "tracey.ramos@reqres.in",
"first_name": "Tracey",
"last_name": "Ramos",
"avatar": "https://reqres.in/img/faces/6-image.jpg"
}
],
"support": {
"url": "https://reqres.in/#support-heading",
"text": "To keep ReqRes free, contributions towards server costs are appreciated!"
}
}Error Lens
개발을 하다보면 VSCode 화면에 빨간줄이나 노란줄 등이 뜨는 것을 볼 수 있다. 그럴 때는 커서를 올리면 어떤 부분 때문에 줄이 발생했는지를 볼 수 있는데, Error Lens를 설치하면 코드 옆에 실시간으로 오류와 경고를 보여준다.
이와 같이 실시간으로 에러와 경고를 볼 수 있기 때문에 불필요한 코드를 없애는데도 많은 도움을 준다.
회고
오늘은 이렇게 평소 사용하던 확장프로그램에 대해 정리해보았는데, 없어도 불편하지는 않지만 한번 쓰다가 안쓰게되면 허전한 것들인 것 같다. 개발시간도 단축해주고 오류도 편하게 잡을 수 있으니 개발하기엔 너무 좋은 플러그인들인 것이다. 개발환경을 셋팅하면서 이렇게 기본적인 VSCode 플러그인도 셋팅을 하게 되는데 사람들이 많이 쓰는 것은 많이쓰는 이유가 있다.
