Prettier

Prettier is a code formatter

🔷 VSCode Settings

---

: 별도의 extension 없이도 vscode내에서 제공하는 settings를 설정해서 prettier와 같은 code formatting을 할 수 있다.

command + , 를 통해서 settings 탭에 들어가면 commonly used에서 tab, quote style과 같은 것을 선택할 수 있다. 보이지 않는 경우에는 검색도 가능하다.

체크박스나 드롭다운을 이용해서 선택을 한 후에는 우측 상단에 첫번째 아이콘을 클릭하면 settings.json 파일이 보일 것이다. 방금 설정한 것들이 json 파일로 저장이 된 형태인데 반대로 settings.json에 코드를 작성해서 설정을 할 수도 있다. 그래서 원한다면 다른 사람의 설정을 그대로 복붙해서 설정을 완료할 수도 있다.

{
	"editor.tabSize": 2,
	"javascript.preferences.quoteStyle": "single",
	"typescript.preferences.quoteStyle": "single",
}

🔷 VSCode Extension

---

Prettier - Code formatter - Visual Studio Marketplace

위의 extension을 설치하면 좀 더 많은 formatting을 손쉽게 할 수 있다. extension을 설치한 후에 해야할 설정들은 다음과 같다.

1. cmd + , 를 통해서 settings 탭에 들어간다.

2. format on save를 검색해서 다음과 같이 설정을 한다.

   이 설정은 파일을 저장했을 때 formatting (prettier)이 작동되도록 하는 것이다.

   이렇게 하지 않으면 script를 쓰고 그것을 매번 실행해서 formatting을 해야하는데 너무 귀찮은 작업이다!

   

3. default formatter도 설치한 prettier로 바꿔준다.
   prettier extension을 설치하지 않으면 안보이기 때문에 반드시 설치를 해준 후에 설정을 해야한다.
   format on save를 할 때 어떤 formatter을 기본적으로 적용시킬 것인지 설정하는 것이라고 생각하면 된다.

   ![Screen Shot 2022-11-05 at 2.23.07 PM.png](https://s3-us-west-2.amazonaws.com/secure.notion-static.com/da788c97-8eb7-473b-b78a-8d2faca205a2/Screen_Shot_2022-11-05_at_2.23.07_PM.png)

1. settings.json 을 열어서 이제 원하는 prettier 코드를 작성을 해주면 된다.

   option들은 아래 링크에서 확인이 가능하다.

   Options · Prettier

   만약 각각의 option들이 정확히 어떤 차이를 주는지 모르겠다면 공식문서에서 제공하는 playground를 사용해보는 것을 추천한다. 각각의 option들의 기본값은 무엇이고 option들을 변경했을 때 어떤 차이를 가져오는지 눈으로 확인할 수 있다. 마지막으로 마음에 드는 option들을 선택했다면 맨 하단에 copy config json 버튼을 클릭하면 최종 option들을 vscode settings.json으로 복붙가능하다.

   Prettier

   또한 다른 사람들은 어떻게 쓰는지 궁금하다면 구글링해서 다른 사람들 것을 참고해서 작성하는 것도 추천한다. 일단 복사해서 붙여넣은 후 option에 hover하면 vscode에서 해당 option이 무엇을 의미하는지 간단하게 알려주기도 한다!

   주의할 것은 vscode extension prettier일 경우 settings.json안에 작성하며 option명들 앞에 prettier. 이 붙인다. 현재 나의 settings.json을 공유하자면 다음과 같다.

   {
   	"prettier.useEditorConfig": false,      //editorConfig 사용할지 여부 (아래에 설명..)
   	"prettier.printWidth": 120,             //코드 한줄의 최대 길이 설정 (기본값:80)
   	"prettier.tabWidth": 2,                 //tab 간격 설정 (기본값:2)
   	"prettier.useTabs": true,               //tab 사용여부 설정 (기본값: false)
   	"prettier.semi": true,                  //맨뒤에 semicolon 여부 설정 (기본값: true)
   	"prettier.singleQuote": true,           //quote style 설정 (기본값: false)
   	"prettier.trailingComma": "all",        //배열, 객체, 함수 등의 마지막에 , 여부 설정 (기본값: es5)
   	"prettier.bracketSpacing": true,        //{} 사이에 spacing 설정 여부 (기본값: true)
   	"prettier.bracketSameLine": false,      // > 를 같은 줄에 넣을지 여부 (기본값: false)
   	"prettier.arrowParens": "avoid",        //arrow function의 parameter에 괄호 설정 여부 (기본값: always)
   	"prettier.endOfLine": "auto",           //os마다 차이가 있는 줄의 마지막을 통일 시켜주는 설정 (기본값: lf)
   }

   또한, 위의 1-3 단계가 번거로우면 setting.json에 바로 코드로 작성할 수도 있다.
   1-3 단계를 벌써 거쳤다면 이미 아래와 같은 코드가 있을 것이다.

   {
   	"editor.formatOnSave": true,
   	"editor.defaultFormatter": "esbenp.prettier-vscode"
   }

🔷 Prettierrc 파일

---

개인 프로젝트를 하는 경우에는 위에서 설명한 extension이나, vscode 자체 설정을 이용하면 된다. 하지만, 여러명과 같이 협업을 하게 되는 경우에 각기 다른 code formatting을 이용하게 되면 코드가 통일성 없어 보일 수 있다. 그래서 여러명이서 함께 하는 프로젝트일 경우 같은 prettier option을 공유하여 코드에 통일성을 준다.

팀 프로젝트에서 쓰는 prettier option을 위에서 했던 방식처럼 settings.json에 복붙해서 사용해도 되지만 프로젝트 여러개일 경우 여러 버전의 prettier option을 동시에 사용불가능하다. 이때, 사용하는 것이 바로 .prettierrc 파일이다.

프로젝트에 .prettierrc 파일을 만들어서 해당 파일안에 팀원들이 공통으로 사용할 prettier option들을 적으면 된다. 그러면 프로젝트를 vscode에서 열어서 작업을 하면 vscode가 자동적으로 내부에서 설정한 prettier option들을 무시하고 .prettierrc에 정의된 prettier option들을 토대로 formatting을 한다.

→ prettier 적용 우선순위 : .prettierrc > .editorconfig > settings.json

위와 같은 우선순위가 적용된다고 생각하면 된다. 여기서 주의할 것은 settings.json 과 prettierrc가 merge 되는 형식이 아니라서 prettierrc가 적용될때 settings.json이 아예 무시가 된다.

위에서 settings.json에 useEditorConfig라는 prettier option을 false로 설정했는데 이것이 바로 .editorconfig 파일을 적용할지 여부를 설정하는 것이다. 주로 쓰이지 않기 때문에 false로 설정했지만 만약 필요한 경우 true로 설정할 수 있다.

{
	"printWidth": 120,
	"useTabs": true,
	"tabWidth": 4,
	"semi": true,
	"singleQuote": true,
	"trailingComma": "all",
	"bracketSpacing": true,
	"bracketSameLine": false,
	"arrowParens": "avoid",
	"endOfLine": "auto"
}

이전의 vscode prettier extension 설정과 다른 점은 앞에 prettier. 이 붙지 않고 바로 option명을 쓴다는 점이다.

How to configure Prettier and VSCode