vscode를 새로 설치할 때마다 필수적으로 추가하는 extension과 유용해보이는 extension을 적어보겠습니다.

필수 extension

prettier

자동으로 코드를 정렬해주는 formatter

설정하기

1. pretiier 다운로드
2. ctrl(command) + ',' 단축키로 설정 창 열기
3. 설정에서 'editor: default formatter' 검색
4. Prettier - Code formatter 선택
   
5. 설정에서 'editor: format on save' 검색
6. 체크 박스 적용
   

Material Icon Theme

icon theme 확장 프로그램

cf. icon 이미지를 보려면 참고하세요.

Auto Rename Tag

페어링 된 태그의 이름이 자동으로 바뀝니다.

Auto Close Tag

닫기 태그를 자동으로 추가해줍니다.

CSS Peek

html 화면에서 바로 css 코드를 볼 수 있는 기능이 있습니다.

사용하기

• Peek: CSS 파일을 인라인으로 로드하고 바로 편집 할 수 있습니다. (ctrl+shift+F12)
• Go To: CSS 파일로 직접 이동하거나 새 편집기에서 엽니다 (F12, 혹은 'ctrl' 누른 뒤 클릭)
• Hover: symbol 위에 마우스 오버하면 정의를 표시합니다. (ctrl+hover)

유용한 extension

Live Server

포트를 열어 서버를 띄우고 새로고침 없이 변경된 값을 적용하는 확장 프로그램

사용하기

html 파일 오른쪽 클릭 → Open with Live Server

CodeWhisperer

AI를 기반으로 코드를 자동 추천, 생성 해주는 프로그램입니다. Copilot과 비교하려면 참고하세요.

설정하기

1. aws toolkit 설치
2. CodeWhisperer start 클릭 후 등록과 로그인 진행
   
3. 설정에서 'codewhisperer' 검색
4. share code whisperer content with aws 항목 체크 해제 (선택사항)

AICodeHelper

GPT 인공지능을 활용하여 코드에 주석을 달아주고, 코드 검토를 수행하고, 코드를 리팩토링하고 생성하는 확장 프로그램

설정하기

1. AICodeHelper 다운로드
2. API 키 발급
3. ctrl(command) + ',' 단축키로 설정 창 열기
4. 설정에서 'aicodehelper' 검색
5. Gptkey 항목에 발급받은 API 키 입력
6. Language 항목에서 english를 korean으로 수정
   

사용하기

• Ctrl+Alt+Shift+z: 주석 달기
• Ctrl+Alt+Shift+r: 리팩토링
• Ctrl+Alt+Shift+c: 코드 리뷰
• Ctrl+Alt+Shift+g: 자연어 → 코드 변경
• Ctrl+Alt+Shift+m: 코드 관련 외 질문

mac: Shift+Ctrl+Option

참고사항

• AICodeHelper는 OpenAI사의 gpt-3.5-turbo 모델을 사용합니다.
• 이 모델의 이용 요금은 1K tokens당 $0.002입니다.
• AICodeHelper로 1회 요청시 사용할 수 있는 최대 토큰량은 gpt-3.5-turbo의 제한량인 4096토큰입니다.
• 자세한 요금정보는 https://openai.com/pricing 에서 확인 가능합니다.
• API의 사용량은 https://platform.openai.com/account/usage 에서 확인 가능합니다.
• "You exceeded your current quota, please check your plan and billing details." 에러가 나타나면 참고하세요. 만약 처음 이용하는데 이 메세지가 나온다면 OpenAI로부터 받은 무료 크레딧이 존재하는지를 먼저 확인하세요.

GitHub Copilot vs AICodeHelper

GitHub Copilot의 경우는 개발자의 작업 흐름을 판단하여 앞으로 어떤 식의 코드를 개발자가 필요로 할지 예측하여 코드를 생성해주는 점이 매우 큰 강점이라고 합니다.
AICodeHelper의 장점은 이미 만들어져있는 코드에 대한 후속 작업을 할 때 편리하다고 합니다.
상황에 적절하게 이용하면 좋겠습니다.

Peacock

두 개 이상의 vscode를 실행할을 때, 각 프로젝트의 색상을 변경할 수 있는 확장 프로그램입니다. 작업 중인 프로젝트를 빠르게 식별할 수 있습니다.

사용하기

1. Create/Open a VSCode Workspace (Peacock only works in a Workspace)
2. Press F1 to open the command palette
   Type Peacock
3. Choose Peacock: Change to a favorite color
4. Choose one of the pre-defined colors and see how it changes your editor

customizing

settings > peacock: favorite colors에서 설정 가능합니다.

---

참고

https://green-grapes.tistory.com/entry/VSCode-prettier-설정하기
https://www.youtube.com/watch?v=SQPLPPb_LuE&t=8s&ab_channel=코드깎는노인
https://www.youtube.com/watch?v=GOQlZAJc5HM&ab_channel=BytePancake
https://bo-10000.tistory.com/170
https://eunyoe.tistory.com/59
https://www.youtube.com/watch?v=lDeBfV16Lfo&ab_channel=코드깎는노인