vscode에서 typescript 포맷터 (prettier)를 사용하는 방법

개발할 때 editor로 vscode를 사용하고 있습니다.
react를 사용하여 개발하고 있으며,
typescript를 도입하기 시작했을 때부터,
코드 형식이 더 이상 시작되지 않으며,
이것과 시험했으므로 비망록으로 남겨 둡니다.

Prettier - Code formatter 설치



아래 페이지에서 "Install"버튼을 눌러 설치합니다.
ぁtps://마르케 tp.ゔぃすあ lsつぢお。 이 m/있어 ms? 있어 m 핥기 = 에 s ben p. p r rvs 여기

vscode의 extensions로 「prettier」로 검색해도 좋지만, 많이 나와 모르기 때문에 하지 않는다.
(나는, 여기에서 이상한 것을 인스톨 해 버려, 공식 문서를 봐도, 잘 설정할 수 없어, 망설였습니다...)

settings.json



vscode의 "View > Command Palette"

"settings.json"을 검색하고,
Open Settings(JSON)을 클릭합니다.


그러면 vscode 설정 파일 인 settings.json이 열리므로,
다음을 추가한다.

settings.json
{
  ...,
  ...,
  // 下記の2行を追記
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
}

시도해보기



Ctrl + S로 파일을 저장할 때
Alt + Shift + F로 코드 성형 바로 가기를 실행할 때
에 제대로 변환되게 되었습니다!


기타 설정



상세하게 설정하려면, 「.prettierrc」를 프로젝트의 루트 디렉토리에 배치하면 좋을 것 같습니다.

좋은 웹페이지 즐겨찾기