3. [ 협업 ] 포맷팅 세팅 - Prettier 세팅 공유

협업을 위해서는

 

팀 내에서 사용할 공동의 Prettier Setting 으로 팀 내의 포맷팅을 일치시켜야한다.

 

 

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

Prettier · Opinionated Code Formatter

 

1. npm install prettier --save-dev

- prettier 를 설치한다.

- 개발에만 사용되므로, --save-dev 를 사용하여 개발종속성 형태로 설치하는 것을 잊지말자.

 

2. npm install eslint-config-prettier --save-dev

- eslint 는 기본적으로 Linting에 사용될것이다.

- 하지만 eslint 내에도, 포맷팅을 강제하는 설정이 있기때문에

  eslint 의 포맷팅 대신, Prettier 의 포맷팅을 강제로 따르는 plugin 을 설치한다.

 

3. Prettier 설정

- 내 VScode Extention 에는 Prettier 가 깔려있다.

 그리고 해당 설정파일은 node_module 의 prettier 안에있는 설정을 따른다.

- 하지만 그럼에도 불구하고, 루트폴더에 설정파일을 둠으로써 개인적인 설정파일을 먼저

  따르게 할 수 있다.

 

• Prettier는 프로젝트의 루트 디렉토리에 .prettierrc.확장자 파일을 통해서 설정을 할 수 있음
• 설정파일의 확장자 형식은 다양하게 지원하고 있습니다(JSON, YAML, JS, TOML)
• prettier 설정은 포맷팅에만 관련되어있어서 비교적 설정 룰들이 간단한 편

// .prettierrc.json

{
  "singleQuote": true,		// 일반 코드 안에서 Quote
  "jsxSingleQuote": true,	// jsx 코드 안에서 Quote
  "arrowParens": "avoid",	// 화살표함수, 파라미터 하나면 괄호제거
  "semi": false,
  "tabWidth": 2
}

 

 

4. Prettier 의 실행

 

npx prettier --write .

// prettier 를 실행하겠다 ( --write ), 모든파일에 대해 ( . )

 

 

이후 

Ctrl + Shift + P

를 통해 명령어 창에서 reload 하는 단축키 를 알아낸 후(ctrl + r)

새로고침해본다.

 

혹은

 

 

적용완료

 

5. Prettier 의 자동화 

 

1. 기존에 있던 파일중 변화되지 않은 파일에는 적용시키지 않기 위해 캐시파일을 남긴다.

 

npx prettier --write --cache .

// prettier 를 실행하겠다 ( --write ), 캐시파일을 남긴다 ( --cache )모든파일에 대해 ( . )

* 프리티어의 캐시파일은 node_module 안에 들어있어서, 프로젝트에서는 보이지 않는다.

 

실행 - 캐시된 것들이 보인다.

변경되지 않은 것들은 cahced 된 것들을 사용, 변경된 것은 (cached) 가 없다.

 

2. package.json 에 자동적으로 Prettier 가 실행되도록 명령어 넣기