Angular에서 개발할 때 유용한 플러그인 "TSLint"와 "Prettier"에 대해 설명합니다.

・TSLint란 Typescript용의 정적 코드 해석 툴
・Prettier란 코드 포맷터

VSCode 확장으로 설치

1. 파일 > 사용자 설정 > 확장 기능을 선택합니다.


2. 검색란에 TSLint를 입력합니다 (Prettier도 마찬가지입니다)


3. 설치 버튼을 눌러 설치합니다.


　 이것으로 설치가 완료되었습니다.

설정

디폴트에서는 1행당의 문자수가 TSLint에서는 140문자, Prettier에서는 80문자가 되어 있어, 일치하지 않는 데다 80문자에서는 소스가 보기 어려워져 버린다(나의 개인적 취미일지도 모르지만) 때문에 설정 변경

・TSLint에서의 설정
프로젝트 아래에 tslint.json이라는 파일이 있기 때문에 해당 파일을 열고 "max-line-length"의 값을 수정합니다.
　 자신은 150자로 했습니다.

  "max-classes-per-file": false,
    "max-line-length": [true, 150],
    "member-ordering": [
      true,
      {
        "order": ["static-field", "instance-field", "static-method", "instance-method"]
      }
    ],

"그 이외의 설정에 대해서는 htps : // Papanchi r. 기주 b. 이오 / ts ぃ t / 루 ぇ s /

・Prettier에서의 설정
프로젝트 아래에 .prettierrc를 만들고 거기에 값을 설정합니다.

{
  "printWidth": 150
}

"그 이외의 설정에 대해서는 htps : // p r r. 이오/도 cs/엔/오 p치온 s. HTML

사용법

・Prettier는 저장시(Ctrl+S)에 자동 성형해 줍니다
TSLint는 편집 영역이나 문제 탭에 지적 내용이 나오므로 그에 맞게 수정하십시오