prettier 익스텐션

https://prettier.io/docs/en/configuration.html

 

협업할때 코드줄이 중구난방일때가 있는데,

그럴때 많이 사용한다.

// settings.json 에 아래 코드 삽입 시 html 파일에서도 프리티어 동작
"editor.formatOnSave": true,
"[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
"[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
"[css]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
"[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }

설정에서 세팅

 

 

 

.prettierrc 템플릿

템플릿을 만들어서 저장해두면 우선순위로 사용하게 됨. 저장할때마다 아래 설정대로 자동 포맷팅이 실행됨.

 

{
    "printWidth": 120,
    "tabWidth": 2,
    "useTabs": false,
    "semi": true,
    "singleQuote": false,
    "bracketSpacing": true,
    "trailingComma": "none"
}

 

 

 

포맷은 이렇게 설정해 주면 됨.