react typescript Prettier 적용하기, Prettier로 여러 파일 한번에 포맷팅하기

settings.json
1
2
3
4
5
6
7
8
9
10
{
// ...
"[typescript]": {
"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
"[typescriptreact]": {
"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode"
}
  • settings.json에 추가시켜준다
  • 저장할 때마다 자동으로 포맷팅되는 것을 확인할 수 있다

일괄적으로 포맷팅하기

  • prettier 없이 개발했다가 코드 포맷팅을 일괄적으로 하고싶을 때가 있다

.prettierrc
1
2
3
4
5
6
7
{
"singleQuote": true,
"parser": "typescript",
"semi": true,
"printWidth": 120,
"tabWidth": 2
}
  • .prettierrc 파일을 생성한다

npx prettier -w **/*.tsx

  • terminal에 위 명령을 치면
  • prettier가 일회성으로 설치되면서 지정한 확장자에 대해 포맷팅을 일괄적으로 실행해준다
  • .prettierrc prettier config file을 참고해서 실행되니
  • 원하는 디렉터리만, 또는 무시할 디렉터리, 파일들을 설정해서 사용할 수 있다

참고

react typescript Prettier 적용하기, Prettier로 여러 파일 한번에 포맷팅하기

https://chinsun9.github.io/2020/11/12/react-typescript-Prettier-적용하기/

Author

chinsung

Posted on

2020-11-12

Updated on

2021-08-04

Licensed under

댓글