Visual Studio Code 또는 VS Code는 개발자가 사용하는 가장 인기 있는 소스 코드 편집기 중 하나입니다. 소프트웨어 개발 프로젝트의 생산성을 높이기 위해 이 기사에서 언급한 최고의 VS Code 확장을 사용할 수 있습니다.
Visual Studio Code에서 소프트웨어 또는 웹 페이지 소스 코드 편집을 시작할 때 즉시 사용 가능한 환상적인 경험을 얻을 수 있습니다. 그러나 개발자는 이 거의 통합된 개발 환경(IDE) 코드 편집기에서 항상 더 많은 기능을 요구할 수 있습니다.
VS Code Marketplace는 모든 종류의 VS IDE 확장을 위한 목적지여야 합니다. 웹 앱 또는 Windows 앱 개발 프로젝트에서 활용할 수 있는 최고의 VS IDE 확장을 찾으려면 이 문서를 계속 읽으십시오.
목차
Visual Studio Code의 인기
에 따르면 와카타임 프로그래밍 통계에 따르면 개발자는 VS Code 편집기를 2,100만 시간 이상 사용했습니다. IntelliJ(>3백만 시간) 및 PhpStorm(>2백만 시간)과 같은 다른 도구의 코드 편집 시간을 비교할 때 2021년 최고의 코드 편집기였습니다.
대부분의 개발자가 다른 소스 코드 편집기보다 VS Code를 선호하는 몇 가지 이유는 다음과 같습니다.
#1. 완전 무료이며 오픈 소스이며 플랫폼 간 지원이 가능합니다. 즉, Linux, Windows 및 macOS에서 작동합니다.
#2. 편집기에는 내장 디버거가 있습니다. 따라서 더 적은 수의 클릭을 해야 합니다. 또한 앱을 전환할 필요 없이 단일 창에서 코딩 프로젝트와 디버거를 주시할 수 있습니다.
#삼. VS Code는 IntelliSense(예측 코딩이라고도 함)와 함께 기본 제공됩니다.
#4. 올바른 바로 가기 키, VS Code 확장 및 설정을 사용하여 VS Code 앱을 전체 스택 워크스테이션으로 쉽게 변환할 수 있습니다.
Visual Studio IDE 확장이란 무엇입니까?
VS Code는 버전 제어, 디버깅 및 작업 실행과 같은 소프트웨어 및 앱 개발 작업을 지원하는 매우 조직화된 소스 코드 편집기입니다. 대부분의 프로그래밍 언어에 대한 손쉬운 코드 빌드-디버그 주기를 위해 개발자에게 효율적인 플랫폼을 제공합니다. 그러나 복잡한 워크플로에는 Visual Studio와 같은 IDE가 필요합니다.
단점을 극복하기 위해 개발자는 VS Code 확장을 제안했습니다. 확장은 VS Code 앱에 설치하고 새로운 기능에 액세스할 수 있는 단순한 추가 기능입니다. VS IDE 확장은 주로 생산성을 높이고 코딩을 더 쉽고 완벽하게 만듭니다.
IDE 확장이 유용한 이유는 무엇입니까?
주로 VS Code 확장을 사용하여 다양한 소프트웨어 및 앱 개발 프로젝트에 대한 도구의 사용성을 향상시킬 수 있습니다. 프로젝트에서 VS Code에 없는 특정 기능이 필요한 경우 시장에서 확장 기능을 검색할 수 있습니다.
또한 확장 기능은 앱 개발 팀의 생산성을 높이는 데 도움이 됩니다. 코드 완성 확장을 사용하면 코딩 중 불필요한 실수를 피할 수 있습니다.
또한 패키지 호스팅 사이트에서 DevOps 프로젝트의 저장소를 가져오는 데 도움이 되는 고급 확장 패키지 설치 프로그램이 있습니다. 간단히 말해서 확장을 사용하면 VS Code를 전체 서비스 IDE로 변환할 수 있습니다.
이제 최고의 VS 코드 편집기를 살펴보겠습니다.
설정 동기화
확인하실 수 있습니다 설정 동기화 개발 프로젝트 중에 여러 컴퓨터에서 조각, 설정, 테마, 키 바인딩, 파일 아이콘, 작업 영역 등을 동기화해야 하는 경우 Visual Studio 마켓플레이스의 VS IDE 확장입니다. 확장은 GitHub Gists를 활용합니다.
몇 가지 훌륭한 기능은 다음과 같습니다.
- 기존 GitHub 계정 Gist 및 토큰을 사용할 수 있습니다.
- 최신 설정 변경 사항을 자동으로 다운로드합니다.
- 파일에 변경 사항이 있을 때 자동 업로드 설정.
확장 프로그램은 이미 3백만 개 이상의 설치를 보았습니다. 또한 추가 기능은 모든 종류의 개발 작업에 무료입니다. 그러나 원하는 경우 이 도구의 개발자를 지원할 수 있는 방법이 있습니다.
라이브 서버
VS Code에서 웹 사이트 개발 작업을 하고 있고 지금까지 작업을 시각화해야 하는 경우 다음을 사용할 수 있습니다. 라이브 서버. 개발 중인 웹사이트만을 위한 로컬 및 임시 서버를 생성합니다. 이 확장을 사용하여 동적 및 정적 웹사이트 페이지를 모두 시각화할 수 있습니다.
몇 가지 두드러진 기능은 다음과 같습니다.
- 웹사이트 시각화를 위한 라이브 및 다시 로드 가능한 브라우저 기반 웹 서버.
- 사용자는 추가 기능의 상태 표시줄에서 한 번의 클릭으로 서버를 중지하거나 시작할 수 있습니다.
- Chrome 디버깅 첨부 파일과 호환됩니다.
이 도구는 무료로 사용할 수 있으며 지금까지 2,300만 개 이상의 설치를 목격했습니다.
Visual Studio 코드 원격 – SSH
원격 – SSH VS Code용 애드온을 사용하면 SSH 서버가 있는 원격 PC를 IDE로 사용할 수 있습니다. 다양한 상황에서 문제 해결 및 개발을 크게 향상시킬 것입니다. 몇 가지 주목할만한 기능은 다음과 같습니다.
- 로컬 컴퓨터에서 액세스하여 정교한 원격 워크스테이션에서 앱과 소프트웨어를 개발하십시오.
- 로컬 컴퓨터의 성능에 영향을 주지 않으면서 다양한 개발 환경 간에 즉시 교체할 수 있습니다.
- 여러 원격 시스템의 기존 IDE에서 공동 작업합니다.
가장 좋은 점은 로컬 워크스테이션에 소스 코드를 배포할 필요가 없다는 것입니다. 추가 기능은 원격 컴퓨터에서 직접 명령 및 기타 VS IDE 확장을 실행합니다.
Prettier – 코드 포맷터
팀의 모든 개발 프로젝트에서 공통 스타일 가이드를 구현하려면 다음을 시도해야 합니다. 더 예쁘다 VS 코드용 애드온. 다음은 알아야 할 이 부가 기능의 몇 가지 기능입니다.
- 의견이 있는 코드 서식 확장
- 많은 코드 편집기와 통합
- 이 도구를 사용하면 스타일 토론이 무용지물이 됩니다.
- 에너지와 시간을 절약할 수 있습니다.
때로는 개발자로서 일관성 없는 코드베이스에서 작업해야 할 수도 있습니다. VS Code에서 이 확장을 사용하여 기존 코드베이스를 쉽게 정리하고 다시 포맷할 수 있습니다.
npm
JavaScript 프로젝트에서 작업하는 경우 시도해야 합니다. npm 패키지 관리자로. 이제 작업을 VS Code 편집기로 전환해야 할 때 그렇게 할 수 있습니다. npm 확장을 사용하면 다른 IDE와 마찬가지로 VS Code 편집기에서 npm 지원 가능성을 즐길 수 있습니다.
빌드된 명령 중 일부는 다음과 같습니다.
- 이 확장을 설치한 후 사용한 마지막 npm 스크립트를 호출합니다.
- npm 스크립트 실행
- 실행 중인 스크립트 종료
- npm 설치 실행
이것은 5백만 개 이상의 설치를 기록한 Microsoft에서 개발한 VS Code 확장입니다.
프로젝트 매니저
소프트웨어 개발 프로젝트 관리자이고 VS Code에서 여러 DevOps 프로젝트를 감독하는 경우 다음을 시도해야 합니다. 프로젝트 매니저. 이 도구를 사용하면 프로젝트를 사용할 수 있는 위치에 관계없이 한 컴퓨터에서 모든 프로젝트에 액세스할 수 있습니다.
프로젝트를 쉽게 구성할 수 있도록 프로젝트를 정의하는 조항이 있습니다. 몇 가지 주목할만한 기능은 다음과 같습니다.
- 폴더 또는 작업 공간을 프로젝트로 저장
- 고급 조직을 위해 프로젝트에 태그 지정
- 새 창 또는 동일한 창에서 모든 프로젝트 열기
- 이름이 바뀌거나 삭제된 프로젝트를 쉽게 식별
또한 확장 프로그램은 2백만 개 이상의 설치를 목격했습니다.
소나린트
소나린트 코딩 문제가 나타나기 전에 수정할 수 있는 오픈 소스 Visual Studio 확장입니다. 추가 기능은 Visual Studio에서 코드를 작성할 때 보안 취약성과 버그를 강조 표시합니다. 인터페이스는 간단하며 텍스트 편집기의 맞춤법 검사 앱처럼 작동합니다.
또한 이 도구는 명확한 해결 지침을 제공합니다. 따라서 워크플로가 프로그램에 커밋되기 전에 코드를 수정할 수 있습니다. 또한 VS Code의 확장은 C++, C, Java, HTML, PHP, JavaScript, TypeScript 및 Python과 같은 다양한 프로그래밍 언어 분석을 지원합니다.
스타일린트
VS Code에서 코딩 오류, 문체 오류, 버그 및 기타 의심스러운 구성에 플래그를 지정하는 자동화된 도구를 찾고 있습니까? 당신은 시도 할 수 있습니다 스타일린트, 설치하기 쉬운 VS Code용 린터 확장. 플래그 지정 외에도 개발 팀이 사전 승인된 코드 스타일 지정 규칙을 준수하여 소프트웨어 또는 앱 코드에서 정크 및 쓰레기를 방지하도록 합니다.
몇 가지 주목할만한 기능:
- 개인화된 규칙 생성을 위한 플러그인 지원
- 최신 CSS 기능 및 구문의 경우 170개 이상의 기본 제공 규칙이 있습니다.
- 때로는 패턴을 이해하면 코드 문제를 자동으로 수정합니다.
VS Marketplace는 이 추가 기능에 대해 700K 설치를 보여줍니다.
CSS 엿보기
ID 또는 클래스에 연결된 속성을 검사하기 위해 .css 파일로 전환해야 하는 번거로움을 없애고 싶으십니까? 당신은 시도해야합니다 CSS 엿보기 VS 코드용 애드온. HTML 파일에서 CSS 코드의 호버 이미지를 볼 수 있습니다.
확장은 또한 ID와 클래스 이름을 하이퍼링크로 변환합니다. 따라서 이러한 하이퍼링크를 클릭하면 CSS의 ID 정의 및 클래스에 즉시 액세스할 수 있습니다.
이 추가 기능은 3백만 개 이상의 설치를 기록했습니다. 도구를 VS Code에 무료로 설치할 수 있습니다.
폴라코드
폴라코드 소프트웨어 또는 앱 코드의 아름다운 스크린샷을 즉시 생성할 수 있는 VS Code용 애드온입니다. 그런 다음 결과 구성 요소를 사용하여 공동 작업자, 친구 또는 클라이언트와 코딩 작업을 공유할 수 있습니다. 가장 좋은 점은 기존 VS Code 테마와 코드 글꼴을 모두 유지한다는 것입니다. 애드온은 코드를 전문적으로 보이는 멋진 레이아웃에 넣습니다.
확장 프로그램에는 컨테이너 또는 코드 조각의 크기를 조정하는 끌기 기능이 있습니다. 오른쪽 하단 모서리를 잡고 드래그하기만 하면 됩니다. 이미지 모양을 제어하는 데 사용할 수 있는 다른 명령은 polacode.shadow, polacode.target, polacode.backgroundColor 등입니다.
GitLens — VS 코드 확장
GitLens, 무료 VS Code 확장은 코더가 프로그래밍 코드를 더 잘 이해할 수 있도록 도와줍니다. 코드 블록 또는 코드 줄을 변경한 이유, 시기 및 사용자를 빠르게 찾을 수 있습니다.
또한 코드 기록을 검토하여 코드 조각이 왜 그리고 어떻게 발전했는지에 대한 실행 가능한 통찰력을 얻을 수도 있습니다. 따라서 프로젝트 리더는 코드베이스의 진화 또는 역사를 쉽게 탐색할 수 있습니다.
확장 프로그램은 GitLens+로도 사용할 수 있습니다. 두 가지 구독 모드가 있습니다. 무료 계정으로 로그인하여 GitLens+ 개발자와 데이터를 공유하거나 유료 계정을 개설할 수 있습니다. 공개 repos에는 무료 계정을 사용하고 비공개 repos에는 유료 계정을 사용할 수 있습니다.
수입 비용
수입 비용 가져온 타사 라이브러리의 파일 크기를 시각화할 수 있는 VS Code 추가 기능입니다. VS Code 편집기에서 라이브러리를 가져오자마자 가져오기 비용 값을 표시합니다.
코드를 입력하면 라이브러리 크기가 인라인으로 표시됩니다. 가져온 라이브러리 파일 크기를 보기 위해 웹팩을 활용합니다. 몇 가지 주목할만한 기능은 다음과 같습니다.
- 전체 콘텐츠 가져오기를 위한 라이브러리 크기
- 기본 가져오기를 위한 보기 크기
- Typescript 및 JavaScript 프로그래밍 언어와 호환됩니다.
추가 기능은 1백만 개 이상의 설치를 기록했습니다.
경로 인텔리센스
일반적으로 소프트웨어나 앱 개발 프로젝트에서 작업할 때 여러 파일을 처리해야 합니다. 코드를 작성할 때 자신의 메모리에 있는 파일 이름을 있는 그대로 입력해야 합니다. 이제 파일 이름에 하이픈이 포함되어 있으므로 이를 기억하는 것이 어려운 작업이 됩니다. 여기에서 빠른 도움을 받을 수 있습니다. 경로 인텔리센스.
코드베이스에서 파일 이름을 자동 완성하는 확장입니다. 이 도구는 첫 글자를 감지하면 찾고 있는 파일을 즉시 제안합니다. 또한 숨김 파일을 표시하는 데 도움이 될 수 있습니다.
JavaScript 디버거(야간)
DAP(디버그 어댑터 프로토콜) 기반 자바스크립트 프로그램 디버거. 이 도구를 사용하면 Chrome, Node.js, WebView2, Edge, VS Code 추가 기능 등을 디버그할 수 있습니다. VS Code 버전 1.46부터 JavaScript 디버거가 기본 디버그 추가 기능이었습니다. Microsoft는 또한 Visual Studio IDE용 도구를 점진적으로 출시하고 있습니다.
이 VS Code 확장은 Microsoft의 오픈 소스 도구입니다. 상업적 또는 비상업적 개발 목적으로 자유롭게 사용할 수 있습니다. 이 도구는 지금까지 600,000번 이상의 설치를 기록했습니다.
마지막 단어
지금까지 Microsoft Visual Studio Code 작업을 좋아한다면 사용해야 하는 최고의 VS Code 확장을 발견했습니다. 오픈 소스 코드 편집기 생태계에서 선두적인 이름입니다. 프로젝트 요구 사항에 따라 위의 VS IDE 확장을 설치할 수 있습니다.
이 최고의 VS IDE 확장 목록은 이러한 도구를 검색하는 데 투자한 시간을 절약하는 데 도움이 됩니다. 이제 어떤 확장이 좋은지 이미 알고 있으므로 프로젝트에 더 많은 시간을 할애할 수 있습니다.
또한 모든 프로그래머가 알아야 할 최고의 IDE를 확인할 수도 있습니다.