생산성 향상을 위한 VSCode extensions 12개 추천

0. Font 설정

• File - Preferences - Settings - Font Size 설정
  • 17이 가장 보기 좋은 것 같다. (개인 의견)

1. Ponicode

• Ponicode는 단위 테스트를 생성하는 AI 기반 확장 팩이다. ML 생성 테스트 시나리오와 직관적인 그래픽 인터페이스 덕분에 기능에 대한 단위 테스트를 빠르고 쉽게 생성, 시각화 및 실행할 수 있다.
• Ponicode는 가장 테스트해야 하는 기능을 보여주므로 코드의 견고성을 높이고 버그를 조기에 감지하기 위해 테스트 노력을 집중할 수 있다.
• Ponicode는 테스트 파일을 작성하여 단위 테스트의 반복적인 부분을 처리한다.
• 또한 테스트 시나리오에 대한 관련 입력을 생성하고 제안해준다.

2. Dracula Official

• 테마이다. 여러가지를 써봤지만 이 테마가 색깔도 아기자기하고 내게 가장 맞았다. 그리고 코드를 작성할 때 집중력을 높여준다.

3. Debugger for Chrome

4. Bracket Pair Colorizer 2

• 이걸 사용하면 일치하는 브래킷을 색상으로 식별할 수 있다. 괄호가 많아지면 복잡해지는 걸 방지해준다.
• 확장 프로그램이던 컬러 브라켓을 vscode에서 직접 지원하기 시작하였다.

https://github.com/CoenraadS/Bracket-Pair-Colorizer-2#readme

• ctrl + shift + p를 누른 후 settings를 친 후 들어가서 (settings.json) 다음과 같이 입력해 준다.

{
  
    "editor.bracketPairColorization.enabled": true,
    "editor.guides.bracketPairs":"active",
    "bracket-pair-colorizer-2.colors": [
    "Gold",
    "Orchid",
    "LightSkyBlue"
]

}

4. Prettier

• 코드를 자체 규칙으로 이쁘게 만들어 준다.

5. Code Spell Checker

• camelCase 코드와 잘 작동하는 기본 맞춤법 검사기이다.
• 이 맞춤법 검사기의 목표는 잘못된 긍정의 수를 낮게 유지하면서 일반적인 맞춤법 오류를 잡아내는 데 도움이 된다.

6. Code Runner

• 코드를 실행하려면:
• 단축키 Ctrl+Alt+N 사용
• 또는 F1 키를 누른 다음 실행 코드를 선택/입력한다.
• 또는 텍스트 편집기를 마우스 오른쪽 버튼으로 클릭한 다음 편집기 컨텍스트 메뉴에서 코드 실행을 클릭한다.
• 또는 편집기 제목 메뉴에서 코드 실행 버튼 클릭
• 또는 파일 탐색기의 컨텍스트 메뉴에서 코드 실행 버튼을 클릭한다.
• 실행 중인 코드를 중지하려면:
• 단축키 Ctrl+Alt+M 사용
• 또는 F1 키를 누른 다음 Stop Code Run을 선택/입력한다.
• 또는 에디터 타이틀 메뉴에서 Stop Code Run 버튼 클릭
• 또는 출력 채널을 마우스 오른쪽 버튼으로 클릭한 다음 컨텍스트 메뉴에서 코드 실행 중지를 클릭한다.

7. Color Picker

8. Live Server

9. Live Share

• 코드를 공동으로 수정, 작업할 수 있다. 팀플이나 협업한다면 굉장히 좋은 도구 중 하나이다. (거의 필수가 아닐까 싶다.)

10. Material Icon Theme

11. Markdown Preview Enhanced

• 마크다운을 vscode에서 실시간으로 보여준다. 블로그 작업할 때 매우 유용하다.

12. Markdown All in One