[ typescript ] ts파일을 작성하기 위한 Visual Studio Code 셋팅 (ESLint, TSLint 등)

작업 순서(ts파일을 js파일로 컴파일 하기 위해 시도)

• ESLint 플러그인 설치

• TSLint(deprecated) 플러그인 설치

• open settings에 eslint 관련 코드 추가

  {
  // ... <-- 기존 내용을 꼭 유지한 상태에서 아래 내용을 추가하고 이 주석은 제거할 것
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "eslint.alwaysShowStatus": true,
  "eslint.workingDirectories": [
    {"mode": "auto"}
  ],
  "eslint.validate": [
    "javascript",
    "typescript"
  ],
  }

• format on save 체크 해제 확인

• tsconfig.json 파일 생성

    tsconfig.json 파일을 직접 생성 또는 



tsc --init 입력

• ts파일을 js파일로 컴파일하기 위한 설치

  npm i typescript -g

• 위에까지 작업한 후, ts파일을 열어보니 아직 에러를 출력하지 않음

• 그래서 아래와 같은 작업을 수행해봄.

• npm i 하니까 package-lock.json 파일이 생성되었고 ts파일에 에러가 출력되기 시작.

아직 해결되지 않음. 아래 이어서 진행하기.

npm init -y

• 위의 명령어를 입력하면 package.json 파일이 생성된다.
• 아직 입력한 사항이 없어서 1만 확인될 것이다.

"devDependencies": {  
"@babel/core": "7.11.6",  
"@babel/preset-env": "7.12.1",  
"@babel/preset-typescript": "7.12.7",  
"@typescript-eslint/eslint-plugin": "4.2.0",  
"@typescript-eslint/parser": "4.2.0",  
"eslint": "7.17.0",  
"eslint-plugin-prettier": "3.3.1",  
"prettier": "2.2.1",  
"typescript": "4.1.3"  
}

• 기존에 있던 코드 밑에 위의 코드를 추가해서 입력해준다.

• 그리고나서 아래의 명령어 입력.

  npm i

• 그러면 package.json 파일에 입력한 내용을 설치하게 된다.

• dependencies 버전은 자동입력으로 가능하다. 그래서 최신 버전을 자동으로 입력했음.

• 이제 Visual Studio Code에서 typescript를 입력했을 때, 잘못된 문법에 대해서 오류를 미리 알려준다!
• 타입을 명시적으로 정의해주어 api 자동완성 기능을 사용하기 편리해졌다!