GitHub Copilot, Swimm, Prettier 등. 개발 팀을 위한 5가지 필수 Visual Studio Code 플러그인으로 생산성과 공동 작업을 향상하세요.

효율적이고 고품질의 개발에 대한 요구가 증가함에 따라 프로세스를 간소화할 수 있는 도구에 대한 필요성도 증가하고 있습니다. Visual Studio Code는 유연성과 광범위한 플러그인 라이브러리로 인해 개발자들 사이에서 엄청난 인기를 얻은 인기 있는 코드 편집기입니다. 올바른 플러그인의 도움으로 개발자는 생산성을 향상하고 개발 프로세스를 가속화할 수 있습니다.

이 기사에서는 개발자 팀에 필수적인 5가지 최고의 Visual Studio Code 플러그인에 대해 설명합니다 . 이 플러그인은 더 나은 코드를 작성하고, 더 효과적으로 협업하고, 전반적인 작업 흐름을 개선하는 데 도움이 됩니다. 초보자이든 숙련된 개발자이든 이 플러그인을 사용하면 직장 생활을 더 쉽고 생산적으로 만들 수 있습니다.

시작하자!

1. GitHub Copilot — AI 페어 프로그래머.

GitHub Copilot은 GitHub가 OpenAI 와 공동으로 개발한 AI 기반 코드 어시스턴트입니다 . OpenAI Codex 라고 하는 시스템은 OpenAI의 GPT-3(Generative Pre-trained Transformer) 기술을 기반으로 하며 자연어를 구문 분석하여 프로그래밍하는 동안 코드 제안 및 자동 완성을 제공합니다.

Copilot은 개발자가 수락하거나 거부할 수 있는 각 라인에 대해 빠르고 가장 적합한 코드 제안을 제공합니다. 지속적으로 문서를 검색하거나 StackOverflow 답변을 뒤적거릴 필요가 없습니다. 이 연구 에 따르면 이러한 진입 장벽을 제거하는 것만으로도 팀이 더 빠르게 이동하고, 반복하고, 개선하는 데 도움이 됩니다 .

일단 설정하면 GitHub Copilot은 입력하는 내용 및/또는 코드 주석의 컨텍스트를 기반으로 코드를 완성하기 위한 제안을 제공합니다. 필요에 따라 제안을 수락하거나 거부할 수 있습니다. 여기에서 쉽게 흐름에 들어가 TAB을 눌러 제안을 수락하고 다음 제안을 즉시 준비할 수 있습니다.

GitHub Copilot은 개발자의 인지 부하를 줄이고 코드를 작성할 때 시간을 절약하는 데 도움이 됩니다. 그러나 확장 프로그램은 지속적으로 학습되므로 일부 제안이 항상 정확하지 않을 수 있음을 기억하는 것이 중요합니다 . 하지만 좋은 점은 GitHub Copilot이 피드백을 통해 미래에 더 정확하게 배울 수 있다는 것입니다.

개인 정보를 보호하기 위해 GitHub Copilot은 개별 데이터를 수집하는 대신 여러 사용자의 데이터를 집계하는 연합 학습 모델을 사용합니다. 이 확장 프로그램은 문제나 우려 사항을 개발 팀에 직접 보고할 수 있는 방법도 제공합니다.

2. Swimm — 강력한 Docs-as-code!

모든 개발자는 컨텍스트와 함께 코드베이스를 이해하고 탐색하는 데 도움이 되는 문서를 받을 자격이 있습니다. 즉, 필요할 때 필요한 정보를 찾을 수 있어야 합니다. 그들은 특정 기능이나 모듈이 어떻게 작동하는지 알아보기 위해 코드를 리버스 엔지니어링하거나 슬랙, 이메일 서신, 코드 주석 및 Notion/Confluence 사이를 오가며 보물 찾기를 할 필요가 없습니다. 그것이 바로 Swimm입니다 . 연속 문서화 의 원칙으로 해결하는 것을 목표로 합니다 .

Swimm은 코드베이스를 문서화하는 기존 방식으로는 할 수 없는 일을 다음 세 가지 방식으로 수행합니다.

• 라이브 코드 스니펫을 직접 참조하는 코드 결합 문서를 작성하는 쉬운 방법을 제공합니다. 향상된 마크다운 및 템플릿을 사용하여 자습서, 사용 방법, 디자인 문서, 기술 참조 등 개발자의 요구 사항을 충족하는 내부 문서를 만들 수 있습니다.
• Swimm의 특허받은 자동 동기화 기능은 참조하는 코드가 변경될 때 이러한 문서를 자동으로 업데이트하여 코드와 해당 문서 사이의 드리프트를 방지합니다.
• 개발자에게 문서가 가장 필요한 문서에 대한 읽기 및 쓰기 액세스 권한을 모두 제공하여 문서 검색을 개선합니다. IDE 내에서 문서가 참조하는 코드와 함께 바로 액세스할 수 있습니다.

다음에 IDE를 시작할 때 로그인/등록하고 GitHub 리포지토리에 연결합니다. 이제 다음 중 하나를 수행할 수 있습니다.

a) 작업 중인 파일에 대한 새 문서 작성을 시작하십시오.

b) 또는 코드베이스를 살펴보고 '웨이브' 아이콘이 표시되면 해당 코드 섹션과 관련된 Swimm 문서가 있음을 알 수 있습니다. 그런 다음 클릭하여 IDE 내부 또는 새 브라우저 창(Swimm 웹앱)에서 해당 문서를 열 수 있습니다.

Swimm과 같은 솔루션 없이 내부 문서를 다루려고 하면 개발자에게 즉시 유용하기에는 너무 광범위하거나 너무 좁고, 자주 구식이며, 자주 단편화되고 발견하기 어려운 문서가 생성되는 경우가 많습니다. 프로세스 자체로서 문서를 신뢰하여 생산성을 크롤링합니다.

Swimm과 VSCode 플러그인은 개발자와 개발 팀이 다음을 달성하는 데 도움이 될 수 있습니다.

• 드리프트를 최소화하기 위해 자동 업데이트되는 코드 결합 문서 덕분에 코드베이스를 훨씬 더 빨리 이해할 수 있으므로 신규 개발자의 온보딩 시간이 55% 단축됩니다( 소스 ) .
• 작성하기 쉽고, 찾기 쉽고, 액세스하기 쉬운 문서로 개발자의 생산성을 50% 향상시킵니다( 소스 ).
• 인프라, API, 아키텍처 등과 관련된 엔지니어링 결정에 대한 관련 최신 내부 문서, 변경 사항 및 기록을 항상 제공하여 팀 간 협업을 활성화합니다.

3. Prettier — 독창적이고 자동화된 코드 포맷터입니다.

Prettier 는 코드 포맷터이며 시간을 절약하고 생산성을 높이며 프로젝트 전체에서 일관된 코드 스타일을 보장하려는 개발자를 위한 필수 도구입니다. JavaScript, TypeScript, CSS, HTML 등을 포함한 여러 프로그래밍 언어를 지원합니다.

단일 키 입력 조합(일반적으로 Alt + Shift + F 또는 저장할 때마다)에서 트리거되는 일관된 자동 적용 코드 서식(조직/프로젝트에 대해 사용자 지정할 수 있는 규칙 기반)을 사용하면 시간을 절약하고 Ctrl을 -C + Ctrl-V 문서에서 IDE로 훨씬 더 안정적이며 오류를 감지하고 빌드 실패로 끝나기 전에 수정합니다.

설치가 완료되면 프로젝트의 루트 디렉토리에 .prettierrc 파일을 생성하여 설정을 구성할 수 있습니다. 이 파일을 조직 전체에 배포하여 조직 전체에서 코드 형식의 일관성을 유지하거나 다른 사람의 스타일을 채택하려는 경우 다른 사람의 파일을 사용할 수 있습니다.

Prettier는 코드 가독성 보장에 대한 걱정을 덜어줍니다. 코드 가독성은 특히 대규모 코드베이스의 경우 코드 유지 관리 가능성과 직접적인 관련이 있기 때문에 이는 엄청난 문제입니다 .

4. 수입 비용 — 수입품의 크기를 계산합니다.

Import Cost 는 Wix 에서 만든 Visual Studio Code 확장 프로그램입니다 . 코드와 함께 가져오기 비용을 표시하고 각 가져오기 크기에 대한 분석을 제공하는 단순하고 최소한이지만 매우 유용한 확장입니다.

가져오기 비용을 사용하면 어떤 가져오기로 인해 코드가 커지는지 쉽게 식별하고 이를 최적화하기 위한 조치를 취할 수 있습니다. 이는 특히 대규모 라이브러리나 모듈을 다루는 경우 애플리케이션의 성능을 개선하는 데 도움이 될 수 있습니다.

일단 설치되면 가져오기의 크기를 자동으로 추적하기 시작하고 정보를 코드와 함께 인라인으로 표시합니다.

Import Cost를 사용하면 사용할 가져오기/번들과 피해야 할 항목에 대해 정보에 입각한 결정을 내릴 수 있습니다. 가져오기의 크기에 대한 정보를 제공함으로써 코드의 크기와 성능에 가장 큰 영향을 미치는 항목을 최적화하는 우선순위를 지정할 수 있습니다.

5. IntelliSense — 코드 제안 및 완성.

작업 중인 언어에 대한 Intellisense 확장 은 지능형 코드 완성, 구문 강조 표시 및 기타 유용한 기능을 제공하여 코드를 더 빠르고 효율적으로 작성할 수 있도록 도와줍니다.

복잡하고 현대적인 언어 및 개발 도구로 작업할 때 IntelliSense를 대체할 수 있는 것은 없습니다. 코드의 구문, 구조 및 물론 사용 중인 언어를 기반으로 컨텍스트 제안(코드 힌트) 및 자동 완성을 제공합니다. 입력할 때 관련 기능, 메서드, 속성 및 현재 컨텍스트와 관련된 기타 요소를 제안할 수 있습니다.

HTML/CSS, Javascript, TypeScript, Python, Rust, Go 등을 비롯한 다양한 프로그래밍 언어 및 환경을 위한 Intellisense 확장이 있으며 Visual Studio Marketplace에는 일반 프레임워크, 라이브러리 및 개발 도구를 위한 Intellisense 확장도 있습니다. React, Angular, Svelte, Django, Vue, Docker, NPM, Helm… 심지어 Tailwind CSS까지!

보너스 선택 — 썬더 클라이언트

Thunder 클라이언트는 편집기 내에서 HTTP 요청 및 테스트 API를 보낼 수 있는 Visual Studio Code 확장입니다.

Thunder Client의 주요 이점 중 하나는 요청을 저장하고 구성하는 기능입니다. 요청을 저장하고 컬렉션으로 그룹화하여 Postman 과 같이 쉽게 관리하고 팀과 공유할 수 있습니다 .

Thunder 클라이언트는 또한 여러 인증 방법, 자동 응답 유효성 검사 및 응답 시간 추적에 대한 지원을 포함하여 HTTP 요청 작업을 위한 광범위한 기능을 제공합니다. 또한 다양한 프로그래밍 언어에 대한 코드 스니펫을 생성할 수 있으므로 API 호출을 코드에 쉽게 통합할 수 있습니다.

Thunder Client가 설치되면 VS Code 사이드바에 새 아이콘이 추가되어 저장된 요청 및 컬렉션에 빠르게 액세스할 수 있습니다. 다음은 Thunder Client 플러그인 사용 방법 에 대한 자세한 안내입니다 .

Thunder Client는 API 테스트 및 개발 워크플로를 단순화하므로 개발 팀에게 유용한 도구입니다. 직관적인 인터페이스, 요청 관리, 다중 인증 지원 및 자동 응답 유효성 검사를 통해 Thunder Client는 API로 작업하는 모든 개발자 팀에게 필수품입니다.

마무리

이 기사에서는 개발자를 위한 최고의 VSCode 확장 5가지를 다루었습니다. 전반적으로 이들은 생산성, 코드 품질 및 협업을 향상시키는 필수 도구입니다.

GitHub Copilot은 AI 지원 코드 제안을 제공하여 더 많은 코드를 더 빠르게 작성할 수 있도록 도와줍니다. Swimm을 사용하면 IDE의 관련 코드 바로 옆에서 필요할 때 정확하게 코드 결합 자동 업데이트 문서를 쉽게 만들고 찾을 수 있습니다. Prettier를 사용하면 코드를 일관되고 자동으로 포맷하여 시간을 절약하고 오류를 줄일 수 있습니다. Import Cost는 가져온 모듈의 크기와 비용을 표시하여 프로젝트를 최적화하는 데 도움이 됩니다. 마지막으로 IntelliSense를 사용하면 관련 제안 및 코드 조각을 제공하여 더 빠르고 효율적으로 코드를 작성할 수 있습니다.

이러한 플러그인을 사용하면 작업 흐름을 단순화하고, 즉석에서 좋은 문서를 만들고, 코드 일관성을 개선하고, 고객의 요구를 충족하는 고품질 소프트웨어를 만들 수 있습니다.