IntelliSense

IntelliSense는 코드 완성, 매개 변수 정보, 빠른 정보, 멤버 목록 등 다양한 코드 편집 기능을 포괄하는 일반 용어입니다. IntelliSense 기능은 "코드 완성", "콘텐츠 지원", "코드 힌트"와 같은 다른 이름으로 불리기도 합니다.

프로그래밍 언어에 대한 IntelliSense

Visual Studio Code IntelliSense는 JavaScript, TypeScript, JSON, HTML, CSS, SCSS 및 Less에 대해 바로 사용할 수 있도록 제공됩니다. VS Code는 모든 프로그래밍 언어에 대해 단어 기반 완성을 지원하지만, 언어 확장을 설치하여 더 풍부한 IntelliSense를 사용하도록 구성할 수도 있습니다.

아래는 Visual Studio Marketplace에서 가장 인기 있는 언어 확장입니다. 확장 타일을 선택하여 설명을 읽고 리뷰를 확인한 후 자신에게 가장 적합한 확장을 결정하세요.

IntelliSense 기능

VS Code IntelliSense 기능은 언어 서비스를 통해 제공됩니다. 언어 서비스는 언어 의미론과 소스 코드 분석을 기반으로 지능적인 코드 완성을 제공합니다. 언어 서비스에서 가능한 완성 항목을 알면 입력할 때 IntelliSense 제안이 팝업으로 표시됩니다. 문자를 계속 입력하면 멤버 목록(변수, 메서드 등)이 입력한 문자를 포함하는 멤버만 표시하도록 필터링됩니다. 선택한 멤버를 삽입하려면 Tab 또는 Enter를 누르세요.

모든 편집기 창에서 ⌃Space (Windows, Linux Ctrl+Space)를 입력하거나 트리거 문자(예: JavaScript의 점 문자(.))를 입력하여 IntelliSense를 트리거할 수 있습니다.

원하는 경우 입력 중에 IntelliSense를 끌 수 있습니다. VS Code의 IntelliSense 기능을 비활성화하거나 사용자 지정하는 방법을 알아보려면 IntelliSense 사용자 지정을 참조하세요.

언어 서비스에서 제공하는 대로, ⌃Space (Windows, Linux Ctrl+Space)를 누르거나 > 아이콘을 선택하여 각 메서드에 대한 **빠른 정보**를 볼 수 있습니다. 해당 메서드의 설명 문서가 옆으로 확장됩니다. 확장된 문서는 계속 사용할 수 있으며 목록을 탐색하면서 업데이트됩니다. ⌃Space (Windows, Linux Ctrl+Space)를 다시 누르거나 닫기 아이콘을 선택하여 닫을 수 있습니다.

메서드를 선택한 후에는 **매개 변수 정보**가 제공됩니다.

적용 가능한 경우 언어 서비스는 빠른 정보 및 메서드 서명에서 기본 유형을 표시합니다. 이전 스크린샷에서 여러 any 유형을 볼 수 있습니다. JavaScript는 동적이어서 유형을 필요로 하거나 강제하지 않으므로 any는 변수가 어떤 유형이든 될 수 있음을 나타냅니다.

완성 유형

다음 스크린샷의 JavaScript 코드는 IntelliSense 완성을 보여줍니다. IntelliSense는 추론된 제안과 프로젝트의 전역 식별자를 모두 제공합니다. 추론된 기호가 먼저 표시되고 그 뒤에 전역 식별자(abc 단어 아이콘으로 표시됨)가 표시됩니다.

VS Code IntelliSense는 언어 서버 제안, 스니펫 및 간단한 단어 기반 텍스트 완성 등 다양한 유형의 완성을 제공합니다.

IntelliSense 사용자 지정

설정 및 키 바인딩을 통해 IntelliSense 환경을 사용자 지정할 수 있습니다.

설정

아래 표시된 설정은 기본 설정입니다. 설정 편집기(⌘, (Windows, Linux Ctrl+,))에서 이러한 설정을 변경할 수 있습니다.

{
    // Controls if quick suggestions should show up while typing
    "editor.quickSuggestions": {
        "other": true,
        "comments": false,
        "strings": false
    },

     // Controls whether suggestions should be accepted on commit characters. For example, in JavaScript, the semi-colon (`;`) can be a commit character that accepts a suggestion and types that character.
    "editor.acceptSuggestionOnCommitCharacter": true,

    // Controls if suggestions should be accepted on 'Enter' - in addition to 'Tab'. Helps to avoid ambiguity between inserting new lines or accepting suggestions. The value 'smart' means only accept a suggestion with Enter when it makes a textual change
    "editor.acceptSuggestionOnEnter": "on",

    // Controls the delay in ms after which quick suggestions will show up.
    "editor.quickSuggestionsDelay": 10,

    // Controls if suggestions should automatically show up when typing trigger characters
    "editor.suggestOnTriggerCharacters": true,

    // Controls if pressing tab inserts the best suggestion and if tab cycles through other suggestions
    "editor.tabCompletion": "off",

    // Controls whether sorting favours words that appear close to the cursor
    "editor.suggest.localityBonus": true,

    // Controls how suggestions are pre-selected when showing the suggest list
    "editor.suggestSelection": "first",

    // Enable word based suggestions
    "editor.wordBasedSuggestions": "matchingDocuments",

    // Enable parameter hints
    "editor.parameterHints.enabled": true,
}

탭 완성

편집기에서 탭 완성을 지원하며, Tab을 누르면 가장 적합한 완성이 삽입됩니다. 이는 제안 컨트롤이 표시되든 그렇지 않든 상관없이 작동합니다. 또한 제안을 삽입한 후 Tab을 누르면 다음으로 적합한 제안이 삽입됩니다.

기본적으로 탭 완성은 비활성화되어 있습니다. editor.tabCompletion 설정을 사용하여 활성화할 수 있습니다. 이러한 값은 다음과 같습니다.

• off - (기본값) 탭 완성 비활성화.
• on - 모든 제안에 대해 탭 완성이 활성화되며 반복적인 호출은 다음으로 적합한 제안을 삽입합니다.
• onlySnippets - 탭 완성은 현재 줄 접두사와 일치하는 정적 스니펫만 삽입합니다.

지역 보너스

제안의 정렬은 확장 정보와 현재 입력 중인 단어와의 일치도에 따라 달라집니다. 또한 editor.suggest.localityBonus 설정을 사용하여 커서 위치에 더 가까운 제안을 우선하도록 편집기에 요청할 수 있습니다.

이전 스크린샷에서 count, context, colocated가 나타나는 범위(루프, 함수, 파일)에 따라 정렬되는 것을 볼 수 있습니다.

제안 선택

기본적으로 VS Code는 제안 목록의 첫 번째 제안을 미리 선택합니다. 다른 동작을 원하면(예: 제안 목록에서 가장 최근에 사용된 항목을 항상 선택) editor.suggestSelection 설정을 사용할 수 있습니다.

사용 가능한 editor.suggestSelection 값은 다음과 같습니다.

• first - (기본값) 항상 목록의 첫 번째 항목을 선택합니다.
• recentlyUsed - 접두사(입력하여 선택)가 다른 항목을 선택하지 않는 한 이전에 사용한 항목이 선택됩니다.
• recentlyUsedByPrefix - 이전에 해당 제안을 완성한 접두사를 기반으로 항목을 선택합니다.

가장 최근에 사용된 항목을 선택하는 것은 동일한 완성을 여러 번 빠르게 삽입할 수 있기 때문에 매우 유용합니다.

"입력하여 선택"은 현재 접두사(커서 왼쪽에 있는 텍스트)를 사용하여 제안을 필터링하고 정렬하는 것을 의미합니다. 이 경우 recentlyUsed의 결과와 다르면 우선 순위가 지정됩니다.

마지막 옵션인 recentlyUsedByPrefix를 사용하면 VS Code는 특정 접두사(부분 텍스트)에 대해 어떤 항목이 선택되었는지 기억합니다. 예를 들어 co를 입력하고 console을 선택하면 다음번에 co를 입력할 때 console 제안이 미리 선택됩니다. 이렇게 하면 co -> console, con -> const와 같이 다양한 접두사를 서로 다른 제안에 빠르게 매핑할 수 있습니다.

제안의 스니펫

기본적으로 VS Code는 스니펫과 완성 제안을 하나의 컨트롤에 표시합니다. editor.snippetSuggestions 설정을 사용하여 동작을 수정할 수 있습니다. 제안 컨트롤에서 스니펫을 제거하려면 값을 "none"으로 설정합니다. 스니펫을 보려면 제안에 상대적인 순서를 지정할 수 있습니다. 맨 위("top"), 맨 아래("bottom") 또는 알파벳순으로 정렬된 인라인("inline")입니다. 기본값은 "inline"입니다.

키보드 단축키

여기에 표시된 키 바인딩은 기본 키 바인딩입니다. 다른 키 바인딩을 할당하려면 키 바인딩 편집기(⌘K ⌘S (Windows, Linux Ctrl+K Ctrl+S))를 사용하세요.

AI로 완성도 향상

GitHub Copilot은 편집기에서 입력할 때 코딩 제안을 제공합니다. Copilot에게 코딩 방법, 버그 수정 방법 또는 다른 사람의 코드가 작동하는 방식과 같은 코딩 관련 질문을 할 수도 있습니다.

시작하기

1. GitHub Copilot 확장을 설치하세요.

2. 이 Copilot 빠른 시작에서 주요 기능을 살펴보세요.

문제 해결

IntelliSense가 작동하지 않는 경우 언어 서비스가 실행되고 있지 않을 수 있습니다. VS Code를 다시 시작하면 문제가 해결될 것입니다. 언어 확장을 설치한 후에도 IntelliSense 기능이 누락된 경우 언어 확장 리포지토리에 문제를 제기하세요.

특정 언어 확장이 VS Code IntelliSense 기능의 모든 것을 지원하지 않을 수 있습니다. 어떤 기능이 지원되는지 알아보려면 확장의 README를 검토하세요. 언어 확장에 문제가 있다고 생각되면 일반적으로 VS Code Marketplace를 통해 확장의 문제 리포지토리를 찾을 수 있습니다. 확장 세부 정보 페이지로 이동하여 **지원** 링크를 선택하세요.

다음 단계

IntelliSense는 VS Code의 강력한 기능 중 하나일 뿐입니다. 계속해서 자세히 알아보세요.

• 디버깅 - 애플리케이션 디버깅을 설정하는 방법을 알아보십시오.
• 언어 확장 만들기 - 새로운 프로그래밍 언어에 대한 IntelliSense를 추가하는 확장을 만드는 방법을 알아보세요.
• VS Code의 GitHub Copilot - AI와 GitHub Copilot을 사용하여 코딩을 향상시키는 방법을 알아보세요.

자주 묻는 질문

왜 제안이 표시되지 않나요?

다양한 이유로 발생할 수 있습니다. 먼저 VS Code를 다시 시작해 보세요. 문제가 지속되면 언어 확장 설명서를 참조하세요. JavaScript 관련 문제 해결은 JavaScript 언어 주제를 참조하세요.

메서드 및 변수 제안이 보이지 않는 이유는 무엇인가요?

이 문제는 JavaScript에서 타입 선언(타이핑) 파일이 누락되어 발생합니다. 대부분의 일반 JavaScript 라이브러리는 선언 파일과 함께 제공되거나 타입 선언 파일을 사용할 수 있습니다.

사용하는 라이브러리에 대한 해당 npm 또는 yarn 패키지를 설치했는지 확인하세요. JavaScript와 함께 작동하는 방법을 설명하는 문서에서 IntelliSense에 대해 자세히 알아보세요. 다른 언어의 경우 확장 설명서를 참조하세요.