> For the complete documentation index, see [llms.txt](https://yamoo9.gitbook.io/typescript/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://yamoo9.gitbook.io/typescript/cli-env/ide-editors.md).

# IDE / 에디터

## 개발 IDE / 에디터 <a href="#dev-ide" id="dev-ide"></a>

웹 애플리케이션 개발을 위한 IDE(통합 개발 환경)로 Visual Studio Code 또는 동일한 사용자 경험을 제공하는 온라인 에디터를 설치해 사용합니다.

{% embed url="<https://code.visualstudio.com/>" %}
오프라인 도구
{% endembed %}

{% embed url="<https://stackblitz.com/>" %}
온라인 도구
{% endembed %}

## Visual Studio Code 확장 <a href="#visual-studio-code-extensions" id="visual-studio-code-extensions"></a>

{% embed url="<https://marketplace.visualstudio.com/items?itemName=loiane.ts-extension-pack>" %}
VSCode Typescript 확장 팩
{% endembed %}

Typescript 확장 기능 중, **가장 많이 사용 되는 패키지 중 일부 패키지를 묶은 확장 팩**입니다.

#### 확장 패키지 목록 <a href="#extentions-list" id="extentions-list"></a>

* [TSLint](https://marketplace.visualstudio.com/items?itemName=eg2.tslint) \
  TypeScript linter로 TS 코드 오류 등을 실시간으로 확인할 수 있습니다.<br>

* [TypeScript Hero](https://marketplace.visualstudio.com/items?itemName=rbbit.typescript-hero) \
  설정된 규칙에 따라 `import` 구문을 정렬하고 사용 되지 않은 것은 제거합니다 \
  Windows / Linux : **Ctrl + Alt + O**\
  MacOS : **Ctrl + Opt + O**<br>

* [json2ts](https://marketplace.visualstudio.com/items?itemName=GregorBiswanger.json2ts) \
  복사된 JSON 코드를 TypeScript 인터페이스로 변환합니다.\
  **Ctrl + Alt + V**

* [Move TS](https://marketplace.visualstudio.com/items?itemName=stringham.move-ts) \
  프로젝트의 일부 파일을 리팩토링 하고 재구성하는데 도움이 되는 훌륭한 확장 프로그램입니다. 경로가 변경된 파일의 `import` 및 컴포넌트를 가져 오는 파일을 자동으로 수정합니다. 프로젝트 탐색기 창에서 파일이나 폴더를 마우스 오른쪽 버튼 클릭 후 'Move TypeScript'를 선택해 사용합니다.<br>

* [Path Intellisense](https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense) \
  VSCode는 자동 가져 오기 기능이 뛰어나지만 일부 파일을 수동으로 가져와야 하는 경우가 있습니다.이 확장을 사용해 이를 보완할 수 있습니다.<br>

* [TypeScript Importer](https://marketplace.visualstudio.com/items?itemName=pmneo.tsimporter)\
  작업 영역 파일에서 TypeScript 정의를 자동으로 검색하고 알려진 모든 기호를 완료 항목으로 제공하여 코드 완성을 허용합니다.<br>

* [Prettier - JavaScript formatter](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) \
  Javascript / Typescript / CSS 코드 포멧을 보기 좋게 만들어 줍니다.<br>

* [Debugger for Chrome](https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome) \
  크롬을 사용하여 디버깅 하고 VSCode에 중단점(Breakpoint)을 추가 할 수 있습니다.