vscode에서 typescript eslint 사용

VSCode의 Eslint 플러그인이 기본 상태이면 .js, .jsx 파일에만 응답합니다.

만일 typescript 를 도입하면, cli상에서는 잘 움직이지만, 에디터상에서 붉게 표시되지 않기 때문에 어디에 에러가 일어나고 있는 것을 알기 어렵다.

따라서 eslint 설정에서 .ts, .tsx도 표시하도록 설정을 변경해야합니다.

다음 설정을 VSCode 설정에 추가합니다.

vscode/settings.json

{
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    { "language": "typescript", "autoFix": true },
    { "language": "typescriptreact", "autoFix": true }
  ]
}

기본값은 ["javascript","javascriptreact"]입니다.typescript를 추가하면 .ts 파일, typescriptreact를 추가하면 .tsx 파일에 VSCode의 Eslint가 반응하게 된다.autoFix 를 true 로 하면 자동 성형도 효과가 된다.

VSCode를 다시 로드하면 Eslint가 새빨갛게 화나게 한다.