CodeLens를 사용하는 확장 기능

Name: Visual Studio Code
Author: Microsoft

2017년 2월 12일 Wade Anderson, @waderyan_

CodeLens는 Visual Studio Code에서 인기 있는 기능입니다. 이 기능의 핵심은 소스 코드에 "작업 가능한 문맥 정보가 삽입"되는 것입니다. 좀 길죠. 제가 설명해 드리겠습니다.

CodeLens는 코드 내의 링크입니다.

작업 가능 - 링크를 클릭하면 무언가가 실행됩니다.
문맥 - 링크는 표현하는 코드에 가깝습니다.
삽입 - 링크는 소스 코드 전체에 위치합니다.

animation showing CodeLens

VS Code에는 TypeScript용 CodeLens가 내장되어 있습니다. 사용자 설정에서 "typescript.referencesCodeLens.enabled": true로 활성화할 수 있습니다.

CodeLens in TypeScript

CodeLens 기능을 사용하여 자체 확장 기능을 만들 수 있습니다. 문서를 확인하여 시작하세요. 또한 Marketplace에서 CodeLens를 사용하는 인기 있는 확장 기능을 찾을 수 있습니다. 이 블로그 게시물에는 제가 좋아하는 몇 가지가 나열되어 있습니다.

팁: CodeLens Roundup 확장 팩을 설치하면 이러한 모든 확장 기능을 한 번에 설치할 수 있습니다. 확장 기능을 어떻게 번들로 묶나요? 확장 팩을 확인하세요.

Git Lens

Marketplace - Git Lens

작성자 - eamodio

이 풍부한 기능을 갖춘 확장 프로그램은 모든 Git 요구 사항을 충족합니다. eamodio는 CodeLens UI를 사용하여 가장 최근 커밋, 작성자 수, 인라인 블레임 주석을 표시하고 전체 기록 보기를 위한 피크 창을 제공합니다. 전체 기능 목록은 확장 프로그램의 README를 참조하세요. 별 5개 14개로 높은 평가를 받은 훌륭한 확장 프로그램입니다.

animation showing gitlens

Azure Application Insights

Marketplace - Azure Application Insights

작성자 - Microsoft

상상할 수 있듯이 VS Code 팀에서 인기 있는 기능입니다. 이 확장 프로그램을 사용하여 VS Code에서 직접 프로덕션 서비스에 대한 정보를 볼 수 있습니다!

app insights

CodeMetrics

Marketplace - CodeMetrics

작성자 - Kiss Tamás

복잡한 함수를 작성하는 것을 좋아하는 동료가 있다고 상상해 보세요. 그들은 그것이 멋지다고 생각하고 유지보수성은 덜 신경 씁니다. 이 확장 프로그램을 사용하여 그들에게 함수의 복잡성을 보여주고 작성하는 소스 코드에 대한 메트릭을 확인하세요.

code metrics

추가 보너스로 설명을 사용자 지정할 수 있습니다. 팀에서 사용하는 구성은 다음과 같습니다.

"codemetrics.basics.ComplexityLevelExtremeDescription": "😱",
"codemetrics.basics.ComplexityLevelHighDescription": "😳",
"codemetrics.basics.ComplexityLevelLowDescription": "🤓",
"codemetrics.basics.ComplexityLevelNormalDescription": "🤔",
"codemetrics.basics.ComplexityTemplate": "Complexity is {0} {1}"

보시다시피 이모티콘을 좋아합니다.

Regex Previewer

Marketplace - Regex Previewer

작성자 - Christof Marti

정규 표현식을 많이 작성하시나요? 이것은 정규 표현식을 빠르게 테스트할 수 있는 훌륭한 확장 기능입니다.

regex

Version Lens

Marketplace - Version Lens

작성자 - pflannery

npm, bower, dotnet, jspm을 포함한 많은 패키지 관리 시스템을 지원하므로 이 확장 프로그램은 매우 유용합니다. 확장 프로그램을 설치하고 어떤 패키지가 오래되었는지 확인하세요. 마우스 클릭 한 번으로 버전을 업그레이드할 수 있습니다.

version lens demo

Pro Tip - 확장 프로그램 미리보기

Marketplace - Extension Manifest Editor

작성자 - Microsoft DevLabs

확장 프로그램을 만들 때 게시하기 전에 확장 프로그램이 Marketplace에서 어떻게 보일지 확인하면 좋을 것 같다는 생각이 듭니다. Extension Manifest Editor를 사용하면 VS Code 내에서 확장 프로그램의 Marketplace 프레젠테이션을 미리 볼 수 있습니다.

manifest preview

Wade Anderson, VS Code 팀원 @waderyan_