💽 TypeScript 코딩하는데 유용한 VSCode 확장팩 추천

...

타입스크립트 확장팩 모음

이번 포스팅에서는 VSCode에서 Typescript를 코딩하는데 있어 편리하며 가독성이 좋게 사용할수 있는 확장팩을 여러분들께 소개해 본다. 아래 소개하는 익스텐션들은 필자가 직접 설치해서 사용해본 결과 만족스러워서 소개하는 것이니 검증된 것이라고 봐도 된다. 아무래도 타입스크립트를 개발한 본고장(마이크로 소프트)이 밀어주는 에디터 이기 때문에, 왠만한 유료 IDE보다 훨씬 편하고 기능이 더 많다.

만일 더 좋은 익스텐션을 발견하게 된다면 지속적으로 포스팅을 업데이트 하는 방향으로 할 계획이다.

Code Runner + ts-node

C/Java 와 같이 타입스크립트 파일을 바로 컴파일하여 실행 결과를 얻을수 있다.

따로 자바스크립트 변환(컴파일) 필요가 없어, 곧바로 타입스크립트 코드를 테스트할때 유용하다.

타입스크립트 직접 실행을 위해선, npm으로 ts-node 를 설치하고, Code Runner 확장팩을 설치한뒤, 상단 우측의 ▶ 버튼을 누르면 출력 터미널에 실행 결과가 뜨게 된다.

> npm install -g ts-node

Code Runner - Visual Studio Marketplace

Extension for Visual Studio Code - Run C, C++, Java, JS, PHP, Python, Perl, Ruby, Go, Lua, Groovy, PowerShell, CMD, BASH, F#, C#, VBScript, TypeScript, CoffeeScript, Scala, Swift, Julia, Crystal, OCaml, R, AppleScript, Elixir, VB.NET, Clojure, Haxe, Obj-C,

marketplace.visualstudio.com

TypeScript Hero

VSCode에서 import를 편리하게 구성할 수 있게 해주는 확장이다.

설정된 규칙에 따라 import 구문을 정렬하고 사용 되지 않는 모듈은 자동으로 제거한다.

TypeScript Hero - Visual Studio Marketplace

Extension for Visual Studio Code - Additional toolings for typescript

marketplace.visualstudio.com

TypeScript Toolbox

타입스크립트 최적화 또는 자동 가져오기, getter, setter, 생성자 생성 등과 같은 많은 기능을 제공하는 올인원 확장이다.

TypeScript Toolbox - Visual Studio Marketplace

Extension for Visual Studio Code - Add and Optimize Imports, Generate Getters / Setters and Constructors

marketplace.visualstudio.com

TypeScript Toolbox — 간단 클릭으로 누락된 모듈 import

AnnotationLens³

자바스크립트, 타입스크립트 클래스에서 오버로딩된 메소드의 부모 코드를 바로 참조할수 있는 확장이다.

이 확장을 사용하면 CodeLens 주석 형식으로 클래스 멤버 재정의 및 구현에 대한 정보를 볼 수 있다.

메서드 또는 필드가 재정의되면 재정의된 메서드 또는 필드에 ~~@Override <name>~~ 대한 미리보기 창을 열고 클래스 또는 인터페이스 이름을 나타내는 클릭 가능한 텍스트가 나타난다.

AnnotationLens³ - Visual Studio Marketplace

Extension for Visual Studio Code - Clickable @Override and @Implement CodeLens annotations for JS and TS.

marketplace.visualstudio.com

Move TS

Move Ts 익스텐션은 프로젝트의 일부 파일을 리팩토링하고 재구성하는 데 도움이 되는 확장 플러그인 이다.

만일 특정한 ts 파일을 다른 폴더에 이동하면 import 경로를 수정해야만 했다. 이 확장은 이동 중인 파일과 이동 중인 구성 요소를 가져오는 파일에 대한 import 경로를 자동으로 업데이트 한다.

사용 방법 : 프로젝트 탐색기 창에서 파일 또는 폴더를 마우스 오른쪽 버튼으로 클릭하고 Move TypeScript 을 선택

Move TS - Move TypeScript files and update relative imports - Visual Studio Marketplace

Extension for Visual Studio Code - extension for moving typescript files and folders and updating relative imports in your workspace

marketplace.visualstudio.com

Path Intellisense

경로를 자동 탐색하는데 도움이 되는 플러그인이다.

VSCode 자체 기능에서도 폴더 탐색 기능이 들어있지만, 타입스크립트 import 과정에선 이 확장 플러그인이 좀더 뛰어나다고 한다.

단, vscode 자체 탐색기능을 끄기 위해서 아래와 같이 설정 추가가 필요하다.

/* vscode setting.json에 추가 설정 */

"typescript.suggest.paths": false,
"javascript.suggest.paths": false

Path Intellisense - Visual Studio Marketplace

Extension for Visual Studio Code - Visual Studio Code plugin that autocompletes filenames

marketplace.visualstudio.com

TsConfig 호환 설정

타입스크립트와 이 확장 익스텐션을 같이 쓸 경우, ts.config.compilerOptions.baseUrl을 매핑으로 사용된다.

// tsconfig
{
	"baseUrl": "src",
}

하지만 만약 tsconfig의 basUrl 속성에 따라 가고 싶지않으면, setting.json에 다음 구문을 추가한다.

"path-intellisense.ignoreTsConfigBaseUrl": true,

JSON to TS

복사된 JSON 코드를 TypeScript 인터페이스로 간단 변환 해준다.

Convert from clipboard (Shift + Ctrl + Alt + V)
Convert from selection (Shift + Ctrl + Alt + S)

JSON to TS - Visual Studio Marketplace

Extension for Visual Studio Code - Convert JSON object to typescript interfaces

marketplace.visualstudio.com

JSON to TS — Convert from clipboard (Shift + Ctrl + Alt + V)

Add jsdoc comments

typescript 또는 javascript 파일에서 하나 이상의 매개변수를 포함하는 함수 매개변수 설명 주석을 추가해 준다.

Add jsdoc comments - Visual Studio Marketplace

Extension for Visual Studio Code - Adds jsdoc @param and @return tags for selected function signatures in JS and TS

marketplace.visualstudio.com

Typescript string literal enums Tools

타입스크립트에서 enum 타입을 좀 더 편하게 다루게 해준다.

Typescript string literal enums Tools - Visual Studio Marketplace

Extension for Visual Studio Code - Useful refactor of string literal enums with TypeScript.

marketplace.visualstudio.com

classdiagram-ts

타입스크립트 클래스 구성을 클래스 다이어그램으로 자동 변환해준다.

classdiagram-ts - Visual Studio Marketplace

Extension for Visual Studio Code - Generates class diagram for typescript projects

marketplace.visualstudio.com

TS interface from class

만일 타입스크립트의 클래스 멤버 구성을 인터페이스로 따로 타입을 분리해 만들어야 할때, 일일히 치지말고 이 확장팩으로 한번에 구성이 가능하다.

TS interface from class - Visual Studio Marketplace

Extension for Visual Studio Code - Generates interface from selected typescript class

marketplace.visualstudio.com

Sass/Less/Typescript/Jade/Pug Compile-Superhero

~~tsc --watch~~ 컴파일 명령어 없이, ts 파일을 저장만 하면 자동으로 바로 js파일과 js.map 파일을 생성해주는 말그대로 super hero 플러그인 이다.

타입스크립트 뿐만 아니라 less, sass, scss, typescript, jade, pug 및 jsx 파일도 지원해주는 강력한 확장 플러그인 이다.

저장 시 자동 컴파일, sass, scss, typescript, jade, pug 및 jsx
less, scss, scss에 대한 자동 접두사 지원
크롬 브라우저에서 미리보기 위해 html 파일 열기 지원
.js, .css 및 .html 파일 축소 지원

Sass/Less/Typescript/Jade/Pug Compile-Superhero - Visual Studio Marketplace

Extension for Visual Studio Code - Really easy to compile ts, tsx, scss, less, jade, pug and es6+ on save, without using a build task.

marketplace.visualstudio.com

/* vscode setting.json에 추가 설정 */

// 컴파일 경로 설정
"compile-hero.javascript-output-directory": "", // 현재 경로에 저장
"compile-hero.pug-output-directory": "",
"compile-hero.typescriptx-output-directory": "",
"compile-hero.typescript-output-directory": "",
"compile-hero.sass-output-directory": "",
"compile-hero.jade-output-directory": "",
"compile-hero.html-output-directory": "",
"compile-hero.less-output-directory": "",

// 컴파일 언어 설정 (js와 html 컴파일은 끔)
"compile-hero.javascript-output-toggle": false,
"compile-hero.html-output-toggle": false,

// min 파일 생성 설정
"compile-hero.x-generate-minified-css": false,
"compile-hero.x-generate-minified-js": false,