Visual Studio Code의 JavaScript

Visual Studio Code에는 기본 JavaScript IntelliSense, 디버깅, 서식 지정, 코드 탐색, 리팩토링 및 기타 많은 고급 언어 기능이 포함되어 있습니다.

이러한 기능 대부분은 즉시 사용할 수 있으며, 일부는 최상의 경험을 위해 기본적인 구성이 필요할 수 있습니다. 이 페이지는 VS Code에서 제공하는 JavaScript 기능을 요약합니다. VS Code Marketplace의 확장 프로그램은 이러한 기본 기능의 대부분을 보강하거나 변경할 수 있습니다. 이러한 기능이 작동하는 방식과 구성 방법에 대한 자세한 가이드는 JavaScript 작업을 참조하십시오.

IntelliSense

IntelliSense는 지능형 코드 완성, 마우스 오버 정보 및 시그니처 정보를 제공하여 코드를 더 빠르고 정확하게 작성할 수 있습니다.

VS Code는 JavaScript 프로젝트, React, lodash, express와 같은 많은 npm 라이브러리, node, 서버리스 또는 IoT와 같은 다른 플랫폼에서 IntelliSense를 제공합니다.

JavaScript 작업에서 VS Code의 JavaScript IntelliSense, 구성 방법 및 일반적인 IntelliSense 문제 해결에 대한 도움말을 참조하십시오.

JavaScript 프로젝트 (jsconfig.json)

jsconfig.json 파일은 VS Code에서 JavaScript 프로젝트를 정의합니다. jsconfig.json 파일은 필수는 아니지만 다음과 같은 경우에 만드는 것이 좋습니다.

• 작업 영역의 모든 JavaScript 파일이 단일 JavaScript 프로젝트의 일부로 간주되지 않아야 하는 경우. jsconfig.json 파일을 사용하면 IntelliSense에 표시되는 일부 파일을 제외할 수 있습니다.
• 작업 영역의 JavaScript 파일의 하위 집합을 단일 프로젝트로 취급하도록 하려는 경우. 이는 imports 대신 암시적 전역 종속성을 사용하여 종속성을 처리하는 레거시 코드와 함께 작업하는 경우 유용합니다.
• 작업 영역에 프런트엔드 및 백엔드 JavaScript 코드와 같이 하나 이상의 프로젝트 컨텍스트가 있는 경우. 다중 프로젝트 작업 영역의 경우 각 프로젝트의 루트 폴더에 jsconfig.json을 만듭니다.
• TypeScript 컴파일러를 사용하여 JavaScript 소스 코드를 다운레벨 컴파일하려는 경우.

기본 JavaScript 프로젝트를 정의하려면 작업 영역 루트에 jsconfig.json을 추가합니다.

{
  "compilerOptions": {
    "module": "CommonJS",
    "target": "ES6"
  },
  "exclude": ["node_modules"]
}

더 고급 jsconfig.json 구성에 대해서는 JavaScript 작업을 참조하십시오.

코드 조각

VS Code에는 입력할 때 제안되는 기본 JavaScript 스니펫이 포함되어 있습니다.

Redux 또는 Angular와 같은 인기 프레임워크용 스니펫을 포함하여 추가 스니펫을 제공하는 많은 확장 프로그램이 있습니다. 자신만의 스니펫을 정의할 수도 있습니다.

JSDoc 지원

VS Code는 많은 표준 JSDoc 주석을 이해하고 이러한 주석을 사용하여 풍부한 IntelliSense를 제공합니다. 선택적으로 JSDoc 주석의 타입 정보를 사용하여 JavaScript를 타입 검사할 수도 있습니다.

함수 선언 앞에 /**을 입력하고 JSDoc 주석 스니펫 제안을 선택하여 함수에 대한 JSDoc 주석을 빠르게 만듭니다.

JSDoc 주석 제안을 비활성화하려면 "javascript.suggest.completeJSDocs": false를 설정합니다.

마우스 오버 정보

JavaScript 기호를 마우스로 가리켜 타입 정보 및 관련 문서를 빠르게 확인합니다.

⌘K ⌘I (Windows, Linux Ctrl+K Ctrl+I) 키보드 단축키는 현재 커서 위치에서 이 마우스 오버 정보를 표시합니다.

시그니처 도움말

JavaScript 함수 호출을 작성할 때 VS Code는 함수 시그니처에 대한 정보를 표시하고 현재 완성 중인 매개변수를 강조 표시합니다.

함수 호출 내에서 ( 또는 ,를 입력하면 시그니처 도움이 자동으로 표시됩니다. 수동으로 시그니처 도움을 트리거하려면 ⇧⌘Space (Windows, Linux Ctrl+Shift+Space)를 누릅니다.

자동 가져오기

자동 가져오기는 프로젝트 및 종속성에서 사용 가능한 변수를 제안하여 코딩 속도를 높입니다. 이러한 제안 중 하나를 선택하면 VS Code에서 자동으로 파일 맨 위에 해당 가져오기를 추가합니다.

현재 프로젝트의 모든 JavaScript 기호에 대한 제안을 보려면 입력을 시작하기만 하면 됩니다. 자동 가져오기 제안은 어디에서 가져올지 표시합니다.

이러한 자동 가져오기 제안 중 하나를 선택하면 VS Code에서 가져오기를 추가합니다.

이 예에서 VS Code는 Button을 material-ui에서 파일 맨 위로 가져옵니다.

자동 가져오기를 비활성화하려면 "javascript.suggest.autoImports"를 false로 설정합니다.

붙여넣을 때 가져오기 추가

편집기 간에 코드를 복사하고 붙여넣을 때 VS Code는 코드가 붙여넣어질 때 자동으로 가져오기를 추가할 수 있습니다. 정의되지 않은 기호가 포함된 코드를 붙여넣으면 붙여넣기 컨트롤이 표시되어 일반 텍스트로 붙여넣거나 가져오기를 추가할 수 있습니다.

이 기능은 기본적으로 활성화되어 있지만 javascript.updateImportsOnPaste.enabled 설정을 전환하여 비활성화할 수 있습니다.

붙여넣기 컨트롤을 표시하지 않고 붙여넣기를 기본 동작으로 만들려면 editor.pasteAs.preferences 설정을 구성합니다. 붙여넣을 때 항상 가져오기를 추가하려면 text.updateImports.jsts 또는 text.updateImports를 포함합니다.

가져오기 정리

가져오기 정리 소스 작업은 JavaScript 파일의 가져오기를 정렬하고 사용되지 않는 가져오기를 제거합니다.

소스 작업 컨텍스트 메뉴 또는 ⇧⌥O (Windows, Linux Shift+Alt+O) 키보드 단축키를 사용하여 가져오기 정리를 실행할 수 있습니다.

JavaScript 파일을 저장할 때 가져오기를 자동으로 정리할 수도 있습니다.

"editor.codeActionsOnSave": {
    "source.organizeImports": "explicit"
}

파일 이동 시 가져오기 업데이트

JavaScript 프로젝트에서 다른 파일에서 가져온 파일을 이동하거나 이름을 바꾸면 VS Code에서 이동된 파일을 참조하는 모든 가져오기 경로를 자동으로 업데이트할 수 있습니다.

javascript.updateImportsOnFileMove.enabled 설정이 이 동작을 제어합니다. 유효한 설정 값은 다음과 같습니다.

• "prompt" - 기본값. 파일 이동마다 경로를 업데이트할지 묻습니다.
• "always" - 항상 경로를 자동으로 업데이트합니다.
• "never" - 경로를 자동으로 업데이트하지 않고 묻지도 않습니다.

서식

VS Code의 기본 JavaScript 서식 지정기는 합리적인 기본값으로 기본적인 코드 서식 지정을 제공합니다.

javascript.format.* 설정은 기본 서식 지정기를 구성합니다. 또는 기본 서식 지정기가 방해가 되는 경우 "javascript.format.enable"을 false로 설정하여 비활성화합니다.

더 전문적인 코드 서식 지정을 위해서는 Marketplace에서 JavaScript 서식 지정 확장 프로그램을 설치해 보세요.

JSX 및 자동 닫기 태그

VS Code의 모든 JavaScript 기능은 JSX에서도 작동합니다.

일반 *.js 파일과 *.jsx 파일 모두에서 JSX 구문을 사용할 수 있습니다.

VS Code에는 JSX 태그 자동 닫기와 같은 JSX별 기능도 포함되어 있습니다.

JSX 태그 닫기를 비활성화하려면 "javascript.autoClosingTags"를 false로 설정합니다.

코드 탐색

코드 탐색을 통해 JavaScript 프로젝트를 빠르게 탐색할 수 있습니다.

• 정의로 이동 F12 - 기호 정의의 소스 코드로 이동합니다.
• 정의 보기 ⌥F12 (Windows Alt+F12, Linux Ctrl+Shift+F10) - 기호 정의를 보여주는 보기 창을 엽니다.
• 참조로 이동 ⇧F12 (Windows, Linux Shift+F12) - 기호에 대한 모든 참조를 표시합니다.
• 타입 정의로 이동 - 기호를 정의하는 타입으로 이동합니다. 클래스 인스턴스의 경우 인스턴스가 정의된 위치가 아닌 클래스 자체를 표시합니다.

기호로 이동 명령을 사용하여 기호 검색을 통해 탐색할 수 있습니다. 명령 팔레트(⇧⌘P (Windows, Linux Ctrl+Shift+P))에서.

• 파일 내 기호로 이동 ⇧⌘O (Windows, Linux Ctrl+Shift+O)
• 작업 영역 내 기호로 이동 ⌘T (Windows, Linux Ctrl+T)

이름 변경

커서 아래의 기호를 JavaScript 프로젝트 전체에서 이름 바꾸려면 F2를 누릅니다.

리팩터링

VS Code에는 함수 추출 및 상수 추출과 같은 편리한 JavaScript 리팩토링 기능이 포함되어 있습니다. 추출할 소스 코드를 선택한 다음 편집기 여백의 전구 아이콘을 클릭하거나 (⌘. (Windows, Linux Ctrl+.))를 눌러 사용 가능한 리팩토링을 확인합니다.

사용 가능한 리팩토링은 다음과 같습니다.

• 메서드 또는 함수로 추출.
• 상수로 추출.
• 명명된 가져오기 및 네임스페이스 가져오기 간 변환.
• 새 파일로 이동.

리팩토링 및 개별 리팩토링에 대한 키보드 단축키 구성 방법에 대한 자세한 내용은 리팩토링을 참조하십시오.

또한 기본적으로 활성화된 editor.codeActionWidget.includeNearbyQuickFixes 설정은 커서 위치에 관계없이 ⌘. (Windows, Linux Ctrl+.) (명령 ID editor.action.quickFix)에서 가장 가까운 빠른 수정을 활성화합니다.

이 명령은 리팩토링되거나 빠른 수정을 통해 수정될 소스 코드를 강조 표시합니다. 일반 코드 작업 및 수정이 아닌 리팩토링은 여전히 커서 위치에서 활성화할 수 있습니다.

사용되지 않는 변수 및 도달할 수 없는 코드

사용되지 않는 JavaScript 코드(예: 항상 true인 if 문의 else 블록 또는 참조되지 않은 가져오기)는 편집기에서 흐리게 표시됩니다.

커서를 놓고 빠른 수정 명령(⌘. (Windows, Linux Ctrl+.))을 트리거하거나 전구 아이콘을 클릭하여 이 사용되지 않는 코드를 빠르게 제거할 수 있습니다.

사용되지 않는 코드 흐리게 표시를 비활성화하려면 "editor.showUnused"를 false로 설정합니다. JavaScript에서만 사용되지 않는 코드 흐리게 표시를 비활성화할 수도 있습니다.

"[javascript]": {
    "editor.showUnused":  false
},
"[javascriptreact]": {
    "editor.showUnused":  false
},

저장 시 코드 작업

editor.codeActionsOnSave 설정을 사용하면 파일이 저장될 때 실행되는 코드 작업 집합을 구성할 수 있습니다. 예를 들어 다음과 같이 설정하여 저장 시 가져오기 정리를 활성화할 수 있습니다.

// On explicit save, run fixAll source action. On auto save (window or focus change), run organizeImports source action.
"editor.codeActionsOnSave": {
    "source.fixAll": "explicit",
    "source.organizeImports": "always",
}

현재 지원되는 열거형은 다음과 같습니다.

• explicit (기본값): 명시적으로 저장할 때 코드 작업을 트리거합니다. true와 동일합니다.
• always: 명시적으로 저장할 때와 창 또는 포커스 변경으로 인한 자동 저장 시 코드 작업을 트리거합니다.
• never: 저장 시 코드 작업을 트리거하지 않습니다. false와 동일합니다.

editor.codeActionsOnSave을 실행 순서대로 코드 작업 배열로 설정할 수도 있습니다.

다음은 몇 가지 소스 작업입니다.

• "organizeImports" - 저장 시 가져오기 정리를 활성화합니다.
• "fixAll" - 저장 시 모든 가능한 수정 사항을 한 번에 계산합니다(ESLint를 포함한 모든 공급자용).
• "fixAll.eslint" - ESLint에 대한 자동 수정만 수행합니다.
• "addMissingImports" - 저장 시 누락된 모든 가져오기를 추가합니다.

자세한 내용은 Node.js/JavaScript를 참조하십시오.

코드 제안

VS Code는 Promise에 대한 .then 호출 체인을 async 및 await를 사용하도록 변환하는 것과 같은 일반적인 코드 단순화를 자동으로 제안합니다.

제안을 비활성화하려면 "javascript.suggestionActions.enabled"를 false로 설정합니다.

AI로 완성도 향상

GitHub Copilot은 코드를 더 빠르고 스마트하게 작성하도록 도와주는 AI 기반 코드 완성 도구입니다. VS Code의 GitHub Copilot 확장을 사용하여 코드를 생성하거나 생성된 코드를 통해 배울 수 있습니다.

GitHub Copilot은 수많은 언어와 다양한 프레임워크에 대한 제안을 제공하며, 특히 Python, JavaScript, TypeScript, Ruby, Go, C# 및 C++에서 잘 작동합니다.

Copilot 시작 방법에 대한 자세한 내용은 Copilot 설명서에서 확인할 수 있습니다.

Copilot 확장을 설치하고 활성화한 후 JavaScript 프로젝트에서 테스트해 볼 수 있습니다.

새 파일을 만듭니다. 명령 팔레트(F1)에서 파일: 새 파일 명령을 사용할 수 있습니다.

JavaScript 파일에 다음 함수 헤더를 입력합니다.

function calculateDaysBetweenDates(begin, end) {

Copilot은 다음과 같은 제안을 제공합니다. Tab을 사용하여 제안을 수락합니다.

인라인 힌트

인라인 힌트는 코드를 이해하는 데 도움이 되도록 소스 코드에 추가적인 인라인 정보를 추가합니다.

매개변수 이름 인라인 힌트는 함수 호출에서 매개변수의 이름을 표시합니다.

이를 통해 각 인수의 의미를 한눈에 이해하는 데 도움이 되며, 특히 부울 플래그를 사용하거나 매개변수를 혼동하기 쉬운 함수에 유용합니다.

매개변수 이름 힌트를 활성화하려면 javascript.inlayHints.parameterNames를 설정합니다. 세 가지 가능한 값이 있습니다.

• none — 매개변수 인라인 힌트를 비활성화합니다.
• literals — 리터럴(문자열, 숫자, 부울)에 대한 인라인 힌트만 표시합니다.
• all — 모든 인수에 대한 인라인 힌트를 표시합니다.

변수 타입 인라인 힌트는 명시적인 타입 주석이 없는 변수의 타입을 표시합니다.

설정: javascript.inlayHints.variableTypes.enabled

속성 타입 인라인 힌트는 명시적인 타입 주석이 없는 클래스 속성의 타입을 표시합니다.

설정: javascript.inlayHints.propertyDeclarationTypes.enabled

매개변수 타입 힌트는 암시적으로 타입이 지정된 매개변수의 타입을 표시합니다.

설정: javascript.inlayHints.parameterTypes.enabled

반환 타입 인라인 힌트는 명시적인 타입 주석이 없는 함수의 반환 타입을 표시합니다.

설정: javascript.inlayHints.functionLikeReturnTypes.enabled

참조 CodeLens

JavaScript 참조 CodeLens는 클래스, 메서드, 속성 및 내보낸 개체에 대한 인라인 참조 수를 표시합니다.

참조 CodeLens를 활성화하려면 "javascript.referencesCodeLens.enabled"를 true로 설정합니다.

참조 수를 클릭하여 참조 목록을 빠르게 탐색합니다.

린터

Linters는 의심스러운 코드를 경고합니다. VS Code에는 내장 JavaScript 린터가 포함되어 있지 않지만, 마켓플레이스에는 많은 JavaScript 린터 확장 프로그램이 있습니다.

타입 검사

일반 JavaScript 파일에서도 TypeScript의 고급 타입 검사 및 오류 보고 기능을 활용할 수 있습니다. 이는 일반적인 프로그래밍 실수를 잡는 좋은 방법입니다. 이러한 타입 검사는 누락된 가져오기 추가 및 누락된 속성 추가를 포함한 일부 흥미로운 JavaScript 빠른 수정도 가능하게 합니다.

TypeScript는 .ts 파일에서와 마찬가지로 .js 파일에서도 타입을 추론하려고 시도합니다. 타입이 추론되지 않으면 JSDoc 주석으로 명시적으로 지정할 수 있습니다. TypeScript가 JavaScript 타입 검사에 JSDoc을 사용하는 방법에 대한 자세한 내용은 JavaScript 작업에서 확인할 수 있습니다.

JavaScript의 타입 검사는 선택 사항이며 옵트인입니다. ESLint와 같은 기존 JavaScript 유효성 검사 도구를 내장 타입 검사 기능과 함께 사용할 수 있습니다.

디버깅

VS Code는 훌륭한 JavaScript 디버깅 지원을 제공합니다. 중단점 설정, 개체 검사, 호출 스택 탐색, 디버그 콘솔에서 코드 실행. 자세한 내용은 디버깅 토픽을 참조하십시오.

클라이언트 측 디버깅

Edge 및 Chrome용 내장 디버거와 같은 브라우저 디버거 또는 Firefox 디버거를 사용하여 클라이언트 측 코드를 디버그할 수 있습니다.

서버 측 디버깅

내장 디버거를 사용하여 VS Code에서 Node.js를 디버그합니다. 설정이 간편하며 Node.js 디버깅 튜토리얼이 도움이 될 것입니다.

인기 확장 프로그램

VS Code는 훌륭한 JavaScript 지원을 제공하지만 확장 프로그램을 통해 디버거, 스니펫, 린터 및 기타 JavaScript 도구를 추가로 설치할 수 있습니다.

다음 단계

자세한 내용은 계속 읽어보세요.

• JavaScript 작업 - VS Code의 JavaScript 지원 및 일반적인 문제 해결 방법에 대한 자세한 정보.
• jsconfig.json - jsconfig.json 프로젝트 파일에 대한 자세한 설명.
• IntelliSense - IntelliSense 및 언어에 효과적으로 사용하는 방법에 대해 자세히 알아보십시오.
• 디버깅 - 애플리케이션 디버깅을 설정하는 방법을 알아보십시오.
• Node.js - Express Node.js 애플리케이션을 만들기 위한 워크플로우.
• TypeScript - VS Code는 JavaScript 코드에 구조와 강력한 타입을 제공하는 TypeScript에 대한 훌륭한 지원을 제공합니다.

자주 묻는 질문

VS Code가 JSX 및 React Native를 지원합니까?

VS Code는 JSX 및 React Native를 지원합니다. npmjs 타입 선언 파일 리포지토리에서 자동으로 다운로드된 타입 선언(타이핑) 파일에서 React/JSX 및 React Native에 대한 IntelliSense를 얻을 수 있습니다. 또한 Marketplace에서 인기 있는 React Native 확장을 설치할 수 있습니다.

React Native에 대한 ES6 가져오기 문을 활성화하려면 allowSyntheticDefaultImports 컴파일러 옵션을 true로 설정해야 합니다. 이는 컴파일러가 합성 기본 멤버를 생성하도록 하여 IntelliSense를 얻을 수 있도록 합니다. React Native는 백그라운드에서 Babel을 사용하여 기본 멤버가 포함된 올바른 런타임 코드를 생성합니다. React Native 코드 디버깅도 수행하려면 React Native 확장을 설치할 수 있습니다.

VS Code가 Dart 프로그래밍 언어 및 Flutter 프레임워크를 지원합니까?

예, Dart와 Flutter 개발 모두에 대한 VS Code 확장 프로그램이 있습니다. Flutter.dev 설명서에서 자세한 내용을 확인할 수 있습니다.

외부 라이브러리에 대한 IntelliSense가 작동하지 않습니다.

Automatic Type Acquisition은 npm(package.json에 지정됨), Bower(bower.json에 지정됨)로 다운로드된 종속성 및 폴더 구조에 나열된 많은 일반 라이브러리(예: jquery-3.1.1.min.js)에 대해 작동합니다.

ES6 스타일 가져오기가 작동하지 않습니다.

ES6 스타일 가져오기를 사용하고 싶지만 일부 타입 선언(타이핑) 파일이 아직 ES6 스타일 내보내기를 사용하지 않는 경우 TypeScript 컴파일러 옵션 allowSyntheticDefaultImports를 true로 설정합니다.

{
  "compilerOptions": {
    "module": "CommonJS",
    "target": "ES6",
    // This is the line you want to add
    "allowSyntheticDefaultImports": true
  },
  "exclude": ["node_modules", "**/node_modules/*"]
}

압축/난독화된 JavaScript를 디버그할 수 있습니까?

예, 가능합니다. Node.js 디버깅 토픽에서 JavaScript 소스 맵을 사용하여 작동 방식을 확인할 수 있습니다.

ES6가 아닌 구문을 사용할 때 구문 유효성 검사를 비활성화하려면 어떻게 해야 합니까?

일부 사용자는 제안된 파이프라인(|>) 연산자와 같은 구문 구문을 사용하기를 원합니다. 그러나 이러한 구문은 현재 VS Code의 JavaScript 언어 서비스에서 지원되지 않으며 오류로 표시됩니다. 이러한 향후 기능을 계속 사용하려는 사용자를 위해 javascript.validate.enable 설정을 제공합니다.

javascript.validate.enable: false를 사용하면 모든 기본 구문 검사를 비활성화합니다. 이렇게 하는 경우 소스 코드를 유효성 검사하기 위해 ESLint와 같은 린터를 사용하는 것이 좋습니다.

Flow와 같은 다른 JavaScript 도구를 사용할 수 있습니까?

예, 하지만 Flow의 타입 및 오류 검사와 같은 일부 언어 기능은 VS Code의 기본 JavaScript 지원과 충돌할 수 있습니다. VS Code의 기본 JavaScript 지원을 비활성화하는 방법에 대한 자세한 내용은 JavaScript 지원 비활성화를 참조하십시오.