[TypeScript] TS 환경 설정 Visual Studio Code (TypeScript Configuration in Visual Studio Code)

우선 TypeScript 백문이 불 여일 타 라고 docs가 너무 잘되어있는 사이트가 있어서 한번 다 입력하면서 이것저것 내용들을 작성해볼까 합니다. 기존에 바닐라 JS도 TS로 이어서.. 진행하려고 합니다. 

 

앞으로 작성할 Type Script 일지에 관련된 URL을 2가지만 적고 가려고합니다.

 

// TypeScript Documentation korea Language 

https://typescript-kr.github.io/pages/tutorials/TypeScript%20in%205%20minutes.html

TypeScript 한글 문서

 

TypeScript 설치 

Node.js와 NPM 이 설치되어있다는 가정하에 다음 명령어로 설치합니다.

npm i -g typescript

TypeScript 설치 확인 

npm ls -g --depth=0

TypeScript @3.4.5 가 확인됩니다.

자 설치가 확인됐으면 Lint를 설치하러 갑니다.

사실 Lint를 없어도 TypeScript는 tsc라는 명령어를 통해서 컴파일을 하게 되는데 이 부분에서 에러가 있다면 알아서 다 잡아줍니다. (에러가 있다고 컴파일이 안되진 않습니다. 경고를 통해서 알려줄 뿐)

 

test.tsc 파일을 생성하고 아래와 같은 코드를 입력합시다. 

function greeter(person:string){
	return 'hello, ' + person;
}

greeter(1);

와 같이 적었을 경우 에러를 vsc자체에서는 보여주지 않습니다. 하지만 tsc 명령어를 통해서 빌드하게 되면 아래와 같이 에러 부분을 보여주게 됩니다.

 

아래의 명령어를 입력하게 되면 TypeScript 가 컴파일을 해주게 됩니다.

tsc test.ts

에러는 났지만 정상적으로 컴파일이 된 상태 

이외 기본적인 튜토리얼들은 TypeScript 공식을 참조 

 

하지만 언제나 많은 코드들을 매번 컴파일하는 거보다 에디터에서 미리 볼 수 있으면 좋기 때문에 Visual Studio Code에 확장으로 TSLint를 설치합니다.

 

TSlint 

Ctrl + Shift + X (입력)

가장 다운로드 많은 것을 설치하자!(deprecated 는 제외)

이제 위의 greeter를 다시 가보면 아래 사진과 같이 잘못된 부분을 잡아 주는 효과를 볼 수 있습니다.

 

TSLint의 효과!!

사실 Lint는 해당 내용보다는 autofix라고 해서 자동으로 값이나 필요한 구문들을 도와주는 기능이 핵심이라고 볼 수 있습니다. (C 나 JAVA에서 Assist라고도 하는)

 

tslint 확장을 제어하기 위해서 tslint 모듈도 설치합니다.

 

npm i -g tslint

tslint --init

tslint.json 에 있는 설정을 통해서 여러 가지 룰이나 룰에 적용되는 위치 등을 설정할 수 있습니다. (tslint.json이나 tsconfig.json 은 경험을 쌓다가 한 번에 정리하도록 하겠습니다.)

 

tslint 사용 전에 eslint와 문제로 인해서 vsc에서 수정하여야 할 부분이 있습니다.

settings 관련 내용

https://code.visualstudio.com/docs/getstarted/settings

 

Ctrl + Shift + P  -> settings 입력 - > 기본 설정 : 설정 열기 (JSON)

 

설정 파일(settings.json)에 아래 값을 입력합니다.

 "editor.formatOnSave": false,
  "tslint.autoFixOnSave": true, 

Unknown configuration setting 이 뜨게 되는 경우가 있는데요 

 

네... deprecated 됐다고 합니다.  프리티어로 변경합시다.

https://marketplace.visualstudio.com/items?itemName=eg2.tslint

TSLint (deprecated) - Visual Studio Marketplace

npm uninstall -g tslint 

제거 

 

VSCode Prettier Configuration( 프리티어 세팅 )

 

1. Prettier VSC에서 설치 

2. Ctrl + Shift + P  -> settings -> 기본 설정 (JSON)

"editor.formatOnSave": true 입력

3. npm 프리티어 설치 

npm i tslint-config-prettier

4. tslint.json 수정

{
  "defaultSeverity": "error",
  "extends": ["tslint:latest", "tslint-config-prettier"],
  "jsRules": {},
  "rules": {
    "semicolon": true
  },
  "rulesDirectory": []
}

5. test.js 작성 

let test = "test" 

6. 저장 시 자동으로 ; 가 붙는 현상 확인 

 

 

tslint.json rules

https://palantir.github.io/tslint/rules/

tsconfig.json 

https://www.typescriptlang.org/docs/handbook/tsconfig-json.html

tsconfig Schema 타입 스크립트 스키마 파일입니다.

http://json.schemastore.org/tsconfig

 

---

tsconfig.json

TypeScript에서 사용되는 환경 설정이라고 보시면 됩니다. 컴파일 옵션 (webpack 유사)

해당 파일을 생성하기 위해서 아래의 명령어를 입력합니다.

tsc --init

tsconfig.json

위의 옵션들은 너무 설명들이 많은데 간단하게 옆에 주석처리는 되어있습니다.

그리고 또 하나 문제점이 같은 위치에 ts와 js가 나눠져 있는데  코드를 작성하는 부분과 빌드된 부분들을 나눠야 할 것으로 보입니다.

 

결론은 TypeScript 세팅을 위해서

 

1. VSC에서 프리티어 확장을 설치 

2. npm에서 TypeScript (글로벌)와  tslint-config-prettier를 설치 후 vscode settings.json 에 

              "editor.formatOnSave": true, 추가 

3. tsc--init으로 tsconfig.json 생성 tslint.json으로 기본 룰 생성 

2. npm i prettier 설치

3. package.json 내에 prettier key 설정

package.json

 

  "prettier": {
    "printWidth": 80,
    "useTabs": false,
    "tabWidth": 2,
    "bracketSpacing": true,
    "semi": true,
    "singleQuote": false
  }
}

 

4. editor.formatOnSave true 설정

 

TypeScript 시작 전 환경 설정 완료

 

** 추가 사항  저는 사실 TypeScript 만 프리티어가 적용됐으면 하는데  기존에 사용하던 js들도 적용이 되서

아래와 같이 기본 formatOnSave는 true로 놓고  javascript 만 false하였습니다. 

 

 "editor.formatOnSave": true,
  "[javascript]": {
    "editor.formatOnSave": false
  }

위 방법 또는

 "editor.formatOnSave": false
"[typescript]": {
    "editor.formatOnSave": true,
  },