Prettier

Formatting

• 탭 간격을 일관적으로
• 세미콜론 여부를 일관적으로
• 코드를 보기 편리하고 일관적으로
• e.g. Prettier

Prettier

• formatting 도구

Prettier 설치

$ npm i -D prettier
$ npx prettier  
$ npx prettier index.js # index.js를 검사
$ npx prettier index.js --write # 검사 + 수정

Prettier Congiguration

• configuration
• 설정하지 않으면 기본설정 사용
• JSON, JS, YAML 등으로 option 설정
• JSON(.prettierrc)
• JS(.prettierrc.js or prettier.config.js)

Prettier Options

• options
• trailingComma: "<es5|none|all>"
• tabWidth : 탭 너비
• semi : 세미콜론 사용
• singleQuote : 싱글 Quote

e.g.) .prettierrc

{
  "semi":false, 
  "singleQuote": true ,
  "tabWidth": 2
}

cli로 코드 검사, 수정

$ npx prettier index.js # 검사만
$ npx prettier index.js --write # 검사 + 수정

vscode 설정

• .vscode.settings.json
• vscode에 prettier extension 설치시 동작

{
  "[javascript]": {
    "editor.formatOnSave": true,
    "editor.defaultFormatter": "esbenp.prettier-vscode" ,
    "editor.tabSize": 2,
    "editor.insertSpaces": true,
    "editor.detectIndentation": false
  },
  "[jsonc]": {// json with comments
    "editor.formatOnSave": true, // 저장될때마다 포매터 동작
    "editor.defaultFormatter": "esbenp.prettier-vscode" ,
    "editor.tabSize": 2,
    "editor.insertSpaces": true,
    "editor.detectIndentation": false
  }
}

---

References

• prettier docs