집 >개발 도구 >VSCode >수집할 가치가 있는 VSCode 플러그인 10개(권장)

수집할 가치가 있는 VSCode 플러그인 10개(권장)

青灯夜游앞으로: 2021-04-20 19:09:483739검색

이 기사에서는 수집할 가치가 있는 10개의 VSCode 플러그인을 추천합니다. 도움이 필요한 친구들이 모두 참고할 수 있기를 바랍니다.

【추천 학습: "vscode tutorial"】

1 Import Cost

프로젝트에 종속성을 추가하는 경우가 종종 있습니다. 모듈식 개발이 오늘날 소프트웨어 개발의 핵심 부분이 되었지만 여전히 입력 시 주의를 기울이는 것이 가장 좋습니다. JavaScript 및 TypeScript용 Import Cost 플러그인을 사용하면 모든 종속성에 대한 알림을 실시간으로 받을 수 있습니다.

코드에 종속성을 인라인으로 추가하면 해당 크기가 표시됩니다. 예측 가능성을 제공하고 효과적인 종속성 관리에 도움이 되는 경량 플러그인입니다. 플러그인 문서에는 플러그인이 종속성 크기를 표시할 수 있도록 하는 다양한 가져오기 구문도 나열되어 있습니다.

다음은 이 플러그인을 개발하려는 원저작자의 동기를 자세히 설명하는 기사입니다.

2 파일 유틸리티

Visual Studio Code의 핵심 기능은 파일을 인코딩할 때 훌륭하게 작동하지만 프로젝트 및 종속성을 관리하는 데 있어서 Visual Studio Code를 향상해야 할 필요성을 느낄 수도 있습니다. File Utils 확장을 사용하면 명령 패널을 통해 파일 작업을 수행할 수 있습니다.

명령 팔레트를 불러와서 파일을 선택하여 간단한 파일 작업을 수행할 수 있습니다. 폴더 관련 기본 작업 외에도 파일 복사, 이동, 삭제, 이름 변경 등을 수행할 수 있습니다. Visual Studio Code의 범위를 벗어나지 않고도 프로젝트 파일을 관리할 수 있는 매우 유용한 플러그인입니다.

File Utils 확장을 사용하면 간단한 파일 작업을 수행할 수 있고, Project Manager 플러그인을 사용하면 여러 프로젝트를 추가로 관리할 수 있습니다. 첫째, 여러 프로젝트 작업을 지원하는 새로운 사이드바를 추가합니다. 둘째, 확장 기능은 Git, SVN 또는 Mercurial 리포지토리를 관리하는 데도 도움이 될 수 있습니다. 이를 통해 원격 저장소를 추가로 관리할 수 있습니다.

이 확장은 GUI 기반 기능 외에도 프로젝트에 사용할 수 있는 명령을 추가합니다. 설정을 조정하여 원하는 대로 기능을 추가로 사용자 정의할 수 있습니다.

원격 저장소 관리 및 대화형 명령과 같은 고급 기능을 갖춘 Project Manager 확장은 개발 주기를 연장할 수 있는 도구 상자의 도구 라이브러리를 제공합니다.

4 SVG Viewer

SVG는 Scalable Vector Graphics를 의미하며 SVG 파일은 웹용 벡터 이미지를 저장하는 텍스트 파일입니다. 텍스트 편집기에서 SVG 파일을 열면 일반적으로 해당 파일의 텍스트 내용이 표시됩니다. 이러한 파일을 직접 편집하는 경우 Visual Studio Code가 이러한 파일을 렌더링하는 방법을 확인할 수 있습니다.

SVG 뷰어 플러그인을 사용하면 SVG 파일을 시각화할 수 있으므로 다른 응용 프로그램을 사용하여 작업을 보는 시간을 절약할 수 있습니다. 기본적으로 SVG 파일을 빠르게 편집할 때 시간이 절약됩니다.

5 코드 철자 검사기

대개 개발자가 직면한 많은 예외는 변수, 함수 및 패키지 이름의 철자 오류를 수정하여 해결할 수 있습니다. 또한 설명, 지침 또는 문서를 작성할 때 맞춤법 오류가 발생할 수 있습니다. 이 패키지는 파일의 오류를 강조 표시하고 다양한 인기 프로그래밍 언어의 철자를 검사하는 데 도움이 됩니다. 특정 파일 형식에 대해 코드 맞춤법 검사기를 사용하도록 설정을 조정할 수도 있습니다.

설치 시 영어를 지원하지만, 8개 언어 및 의학용어 사전을 추가로 제공합니다. 전체적으로 이것은 훌륭한 Visual Studio Code 확장 라이브러리에 작지만 강력한 추가 기능입니다.

6 Remote — SSH

개발의 분산 특성으로 인해 코드를 업데이트하고 테스트하려면 원격 서버에 로그인해야 할 수도 있습니다. 타사 SSH 클라이언트를 통해 쉽게 관리할 수 있지만 애플리케이션을 완전히 종료하지 않고도 서버에서 원격으로 작업할 수 있는 Visual Studio Code 확장이 있습니다.

Microsoft의 Remote-SSH 플러그인을 사용하면 로컬 시스템에 코드를 포함하지 않고도 원격 개발 환경에 연결할 수 있습니다. 또한 여러 원격 환경 간에 교환할 수 있으므로 여러 원격 시스템에서 여러 작업을 수행할 수 있습니다. 또한 플러그인은 Linux, Windows 또는 macOS 기반의 원격 시스템에 대한 연결을 지원합니다. 요즘에는 원격 서버에서 개발하는 것이 중요하므로 "원격 SSH 플러그인"은 Visual Studio Code의 필수 확장입니다.

7 후행 공백 시각화 도우미

좋은 프로그래밍 방법은 코드에 후행 공백이 포함되지 않도록 하는 것입니다. 후행 공백은 개행 문자 앞에 있는 코드 줄에서 공백이 아닌 마지막 문자 뒤의 공백 또는 탭 문자(본질적으로 보이지 않음)로 구성됩니다. Trailing Whitespace Visualizer 플러그인은 코드에서 이러한 모든 후행 공백을 강조 표시합니다.

수집할 가치가 있는 VSCode 플러그인 10개(권장)

후행 공백은 코드에 완전히 불필요한 추가 항목이며 이로 인해 파일 크기가 커지므로 제거하는 것이 좋습니다. 이 플러그인은 코드에서 해당 항목을 강조 표시할 뿐만 아니라 다른 팀 구성원이 작성한 코드를 사용할 때도 강조 표시합니다.

8 Chrome용 디버거

프런트 엔드 JavaScript 코드로 작업할 때 코드가 올바른지 테스트하는 일반적인 방법은 브라우저에서 수행하는 것입니다. Chrome 개발자 도구는 콘솔을 통해 JavaScript를 디버그하는 실용적인 방법을 제공합니다. Chrome용 디버거 플러그인은 Visual Studio Code를 Chrome 개발자 도구 프로토콜을 지원하는 Chrome 또는 Chromium 기반 브라우저에 통합합니다.

IDE를 떠나지 않고도 코드의 오류를 식별할 수 있는 많은 디버깅 기능이 있습니다. 즉, Chrome 디버거 확장 프로그램은 일반적인 디버깅 프로세스 중에 시간을 절약해 줍니다.

9 ESLint

ESLint는 정적 JavaScript 코드 분석기입니다. 코드를 스캔하여 구문 오류와 비효율적인 프로그래밍 방식을 찾습니다. ESlint Visual Studio 확장은 ESLint를 Visual Studio Code IDE와 통합하여 JavaScript 코드의 주문형 분석을 가능하게 합니다. 그러나 ESLint를 시스템에 로컬 또는 전역으로 설치해야 합니다.