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 없이 개발했다가 코드 포맷팅을 일괄적으로 하고싶을 때가 있다

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을 참고해서 실행되니
• 원하는 디렉터리만, 또는 무시할 디렉터리, 파일들을 설정해서 사용할 수 있다

참고

• Prettier Configuration File

• 각 프로젝트마다 다른 vscode세팅값을 주고 싶을 때 유용하다

따라하기

• Ctrl + Shift + P 단축키를 누르고 setting을 입력한다
• Preferences: Open Settings (UI)를 선택한다

• 세팅 화면이 나오면 상단 User, Workspace 탭이 있는데 Workspace탭을 클릭한다

• 나는 예시로 이 프로젝트에서는 node_modules라는 폴더를 vscode 탐색기에서 보여주고 싶지 않다

• exclude를 검색하면 Files: Exclude가 나오는데, Add Pattern 버튼을 눌러 node_modules를 추가한다

• 우측 탐색기에서 node_modules 파일이 더 이상 보이지 않으며, .vscode라는 폴더와 그 아래 settings.json이라는 파일이 생성된 것을 확인할 수 있다
• 이렇게 프로젝트별로 다른 vscode 세팅값을 가질 수 있다