Angular 언어 지원 서비스

Angular 언어 지원 서비스는 코드 편집기에서 Angular 템플릿의 자동 완성, 오류 표시, 힌트, 코드 탐색 기능을 사용할 수 있도록 합니다. 별도의 HTML 파일에 작성한 외부 템플릿과 인라인 템플릿 모두에서 동작합니다.

Angular 언어 지원 서비스용 컴파일러 옵션 설정하기

최신 언어 지원 서비스 기능을 활성화하려면 다음 예제처럼 tsconfig.json의 strictTemplates 옵션을 true로 설정하세요:

"angularCompilerOptions": {
  "strictTemplates": true
}

자세한 내용은 Angular 컴파일러 옵션 가이드를 참고하세요.

기능

편집기는 Angular 파일을 열었다는 것을 자동으로 감지합니다. 이후 Angular 언어 지원 서비스를 통해 tsconfig.json 파일을 읽고 애플리케이션의 모든 템플릿을 찾은 다음, 열어 놓은 템플릿에 언어 지원 서비스를 제공합니다.

언어 지원 서비스에는 다음 기능이 포함됩니다:

자동 완성 목록
AOT 진단 메시지
빠른 정보 표시
정의로 이동

자동 완성

자동 완성은 입력하는 동안 문맥에 맞는 후보와 힌트를 제공해서 개발 시간을 줄여 줍니다. 다음 예제는 문자열 바인딩에서 자동 완성을 사용하는 모습입니다. 입력 중에 Tab 키를 누르면 자동 완성할 수 있습니다.

엘리먼트 안에서도 자동 완성할 수 있습니다. 컴포넌트 셀렉터로 사용하는 엘리먼트는 자동 완성 목록에 표시됩니다.

오류 검사

Angular 언어 지원 서비스는 코드의 실수를 미리 알려줄 수 있습니다. 다음 예제에서 Angular는 orders가 무엇인지, 어디에서 왔는지 알 수 없습니다.

빠른 정보 표시와 코드 탐색

빠른 정보 표시 기능을 사용하면 마우스를 올려 컴포넌트, 디렉티브, 모듈이 어디에서 왔는지 확인할 수 있습니다. 그런 다음 "Go to definition"을 클릭하거나 F12를 누르면 해당 정의로 바로 이동합니다.

편집기에서 Angular 언어 지원 서비스 사용하기

Angular 언어 지원 서비스는 현재 Visual Studio Code, WebStorm, Sublime Text, Zed, Neovim, Eclipse IDE의 확장 기능으로 제공됩니다.

NOTE: Angular 팀은 Visual Studio Code 확장 기능을 유지보수하고 배포하며, Visual Studio Code와 Cursor, Antigravity 같은 VS Code 기반 편집기를 지원합니다. 다른 편집기의 통합 기능은 해당 편집기 공급업체나 커뮤니티가 유지보수합니다. 해당 통합 기능에만 발생하는 문제는 각 유지보수 담당자에게 보고하세요.

Visual Studio Code

Visual Studio Code에서는 확장 기능 마켓플레이스에서 확장 기능을 설치하세요. 편집기 왼쪽 메뉴 패널의 Extensions 아이콘으로 마켓플레이스를 열거나, VS Quick Open (Mac에서는 ⌘+P, Windows에서는 CTRL+P)을 열고 "? ext"를 입력하세요. 마켓플레이스에서 Angular 언어 지원 서비스 확장 기능을 검색한 뒤 Install 버튼을 클릭하세요.

Visual Studio Code와 Angular 언어 지원 서비스의 통합 기능은 Angular 팀이 유지보수하고 배포합니다.

Visual Studio

Visual Studio에서는 확장 기능 마켓플레이스에서 확장 기능을 설치하세요. 편집기 상단 메뉴에서 Extensions를 선택한 뒤 Manage Extensions를 선택하면 마켓플레이스가 열립니다. 마켓플레이스에서 Angular 언어 지원 서비스 확장 기능을 검색한 뒤 Install 버튼을 클릭하세요.

Visual Studio와 Angular 언어 지원 서비스의 통합 기능은 Angular 팀의 도움을 받아 Microsoft가 유지보수하고 배포합니다. 여기에서 프로젝트를 확인할 수 있습니다.

WebStorm

WebStorm에서는 Angular and AngularJS 플러그인을 활성화하세요.

WebStorm 2019.1부터는 @angular/language-service가 더 이상 필요하지 않으므로 package.json에서 제거해야 합니다.

Sublime Text

Sublime Text에 플러그인으로 설치한 언어 지원 서비스는 인라인 템플릿만 지원합니다. HTML 파일에서 자동 완성을 사용하려면 커스텀 Sublime 플러그인이 필요합니다(또는 현재 플러그인을 수정해야 합니다).

인라인 템플릿에서 언어 지원 서비스를 사용하려면 먼저 TypeScript 지원 확장 기능을 추가한 다음 Angular 언어 지원 서비스 플러그인을 설치해야 합니다. TypeScript 2.3부터는 언어 지원 서비스에서 사용할 수 있는 플러그인 모델을 제공합니다.

로컬 node_modules 디렉터리에 최신 TypeScript를 설치하세요:
```
npm install --save-dev typescript
```
같은 위치에 Angular 언어 지원 서비스 패키지를 설치하세요:
```
npm install --save-dev @angular/language-service
```
패키지를 설치한 뒤 프로젝트 tsconfig.json의 "compilerOptions" 섹션에 다음 내용을 추가하세요.
tsconfig.json
```
"plugins": [
  {"name": "@angular/language-service"}
]
```
편집기의 사용자 환경설정(Cmd+, 또는 Ctrl+,)에 다음 내용을 추가하세요:
Sublime Text 사용자 설정
```
"typescript-tsdk": "<path to your folder>/node_modules/typescript/lib"
```

이렇게 하면 Angular 언어 지원 서비스가 .ts 파일에서 진단과 자동 완성 기능을 제공합니다.

Eclipse IDE

Angular Language Server가 포함된 "Eclipse IDE for Web and JavaScript developers" 패키지를 바로 설치할 수 있습니다. 다른 Eclipse IDE 패키지를 사용한다면 Help > Eclipse Marketplace에서 Eclipse Wild Web Developer를 찾아 설치하세요.

Neovim

Node.js 기반 Conquer of Completion

Angular 언어 지원 서비스가 사용하는 tsserver는 LSP 명세를 정확히 따르지 않습니다. 따라서 Neovim이나 Vim에서 JavaScript, TypeScript, Angular를 사용한다면 Conquer of Completion(COC)이 Angular 언어 지원 서비스와 tsserver를 가장 충실하게 구현한 도구일 수 있습니다. COC는 tsserver의 구현 방식에 맞춘 VSCode의 tsserver 구현을 가져왔기 때문입니다.

coc.nvim 설정하기

Angular 언어 지원 서비스 설정하기

설치한 뒤 Vim 명령줄에서 CocConfig를 실행해서 coc-settings.json 설정 파일을 열고 angular 프로퍼티를 추가하세요.

각각 tsserver와 ngserver가 들어 있는 디렉터리를 가리키도록 전역 node_modules 경로를 올바르게 지정하세요.

CocConfig 예제 파일 coc-settings.json

{
  "languageserver": {
    "angular": {
      "command": "ngserver",
      "args": [
        "--stdio",
        "--tsProbeLocations",
        "/usr/local/lib/node_modules/typescript/lib/CHANGE/THIS/TO/YOUR/GLOBAL/NODE_MODULES",
        "--ngProbeLocations",
        "/usr/local/lib/node_modules/@angular/language-server/bin/CHANGE/THIS/TO/YOUR/GLOBAL/NODE_MODULES"
      ],
      "filetypes": ["ts", "typescript", "html"],
      "trace.server.verbosity": "verbose"
    }
  }
}

도움말: 위의 /usr/local/lib/node_modules/typescript/lib와 /usr/local/lib/node_modules/@angular/language-server/bin은 전역 Node 모듈의 실제 위치를 가리켜야 하며, 환경에 따라 경로가 다를 수 있습니다.

Neovim 내장 LSP

nvim-lspconfig 플러그인을 사용하면 Neovim에서 Angular 언어 지원 서비스를 사용할 수 있습니다.

Zed

Zed에서는 확장 기능 마켓플레이스에서 커뮤니티가 유지보수하는 확장 기능을 설치하세요.

언어 지원 서비스의 동작 방식

언어 지원 서비스를 지원하는 편집기를 사용하면 편집기가 별도의 언어 지원 서비스 프로세스를 시작하고 Language Server Protocol을 사용하는 RPC로 통신합니다. 편집기에 내용을 입력하면 편집기가 언어 지원 서비스 프로세스에 정보를 보내 프로젝트 상태를 추적합니다.

템플릿에서 자동 완성 목록을 요청하면 편집기는 먼저 템플릿을 HTML 추상 구문 트리(AST)로 파싱합니다. Angular 컴파일러는 이 트리를 해석해서 템플릿이 속한 모듈, 현재 스코프, 컴포넌트 셀렉터, 템플릿 AST 안에서 커서가 있는 위치 등의 문맥을 파악합니다. 그런 다음 해당 위치에 올 수 있는 심볼을 결정합니다.

문자열 바인딩 안에서는 과정이 조금 더 복잡합니다. div 안에 {{data.---}}라는 문자열 바인딩이 있고 data.--- 뒤의 자동 완성 목록이 필요하다면, 컴파일러는 HTML AST만으로 답을 찾을 수 없습니다. HTML AST는 "{{data.---}}"라는 문자가 있는 텍스트가 존재한다는 것만 알려줄 수 있습니다. 이때 템플릿 파서는 템플릿 AST 안에 표현식 AST를 생성합니다. Angular 언어 지원 서비스는 해당 문맥 안의 data.---를 확인한 다음, TypeScript 언어 지원 서비스에 data의 멤버를 요청하고 가능한 후보 목록을 반환합니다.

더 알아보기

구현에 대한 자세한 내용은 Angular 언어 지원 서비스 소스를 참고하세요.
설계 시 고려 사항과 의도는 설계 문서를 참고하세요.

tsconfig.json

Sublime Text 사용자 설정

CocConfig 예제 파일 coc-settings.json