prettier [파헤치기 편]

 

왜why 내 Prettier는 이상하게 동작하는 걸까?

 
빠르게 문제 해결 부분만 보기

문제	추측 가능한 원인	해결
npm 으로prettier 설치하지 않았는데, 강제 포맷팅이 된다	1. prettier extension 설치 2. default formatter로 prettier 지정	1. root 경로에 .vscode 폴더를 생성 2. 그 하위에 settings.json 파일 생성 3. 아래 내용을 입력 후 저장 {   "prettier.requireConfig": true }
npm으로 prettier을 설치했는데, 옵션을 아무것도 설정하지 않은 경우. {} 이 상태. 왜 프리티어가 적용되는 걸까?	prettier의 기본 속성이 적용	.prettierrc파일에 포맷팅하고 싶은 속성과 옵션을 설정한다. https://prettier.io/docs/en/options.html#bracket-line

 

들어가기 전 [요약]

1. 호기심의 발단
2. 그리고 내 문제
   • eslint경고 (노랑색 밑줄)
   • eslint대로 잠깐!!! 포맷팅됨. 순식간임.. [gif 첨부]
   • prettier(?)가 포맷팅 되는 것 같은 깜빡임
3. 깊어지는 의문
   • 어라..? 나.. npm i -D prettier 안했는데..?
   • 지금 강제 포맷팅된 원인이... prettier... 인건가?
4. 가설
   • Prettier extension 조사하기
     • global VS workspace
   • settings.json 살펴보기
     • 'ctrl' + ','
     • 입력창에 default formatter 검색. (내 경우엔 Prettier로 설정되어있었음)
   • 사용자마다 VSCode 환경 설정이 다르면 어떻게 관리가 가능하지?
     • 통합 가능한 방법 모색 그것이 바로 .vscode 폴더 생성, 그 하위 경로에 settings.json파일 생성
     • "prettier.requireConfig": true
5. 아 이제 prettier 속성이 차단되는군
6. npm i -D prettier 이후, 분기점 발생
   • (1) .prettierrc 파일 생성 ☞ config 파일이 없는 것과 동일. 즉, prettier 속성이 어느것도 반영되지 않음
   • (2) {} // 빈 중괄호만 작성 ☞ prettier의 기본 속성이 적용. 원하지 않는 prettier의 기본 옵션으로 포맷팅 됨
   • (3) 문제가 발생하는 prettier 속성의 옵션 변경 ☞ 기본 속성에서 문제가 되는 옵션을 바꿨기 때문에, 내가 원하는 포맷팅 가능
7. 성공적, 소감

 

[본론]

▶호기심의 발단

 

1. vscode의 Prettier extension과 npm install prettier ~ 은 무슨 차이?
2. vscode의 settings.json에서 User설정과 Workspace 설정이 분리되어 있는데, 어떤 차이?
3. 결국 npm을 하지 않으면 extension의 내용으로 반영되는 건가?
4. extension과 npm으로 설치한 패키지에 우선순위가 있는건가?
5. extension은 왜 설치하는거지?

1. Prettier Extension for vscode VS npm package Prettier (CLI)

• Prettier Extension for vscode
  • VSCode 내에서 Prettier를 사용할 수 있게 하는 확장 프로그램
  • 코드를 저장할 때 자동으로 포맷팅
  • 설정파일(settings.json)에서 Prettier 관련 설정 추가 가능
  • GUI로 사용자가 Prettier 활용 가능
• npm package Prettier (CLI)
  • npm 패키지로 설치
  • .prettierrc 또는 package.json에 Prettier설정 저장, 설정 파일을 통해 동작
  • Prettier Extension이 vscode에 설치되어 있더라도, Prettier 패키지가 설치되어 있지 않으면 자동으로 .prettierrc 파일 설정을 인식하지 못할 수 있다.

2. User 설정 VS Workspace 설정

• User 설정
  • 전역적으로 모든 프로젝트에 적용되는 설정
  • .vscode 폴더 > settings.json 파일에 저장됨
  • npm install로 패키지를 설치하지 않아도 설정이 적용 됨
• Workspace 설정
  • 특정 프로젝트나 작업 영역에 대한 설정
  • .vscode 폴더 > settings.json 파일에 저장됨
  • 프로젝트에 종속되기 때문에 npm 패키지가 필요한 경우, 패키지 설치가 필요

4. 우선순위

 (1) Workspace 설정이 우선
 (2) User설정은 Workspace 설정으로 덮어쓴다
 
https://github.com/prettier/prettier-vscode/issues/1506

Allow prettier to be disabled globally · Issue #1506 · prettier/prettier-vscode

 

 

좌: User, 우: Workspace

 
User에서 Use Tabs를 언체크한 경우 = settings에서 아예 사라짐

User에서 Use Tabs를 체크한 경우 = settings에 기록됨

 
disabled를 선택한 경우, User, workspace 모두 Nosettings Found

 
 
아니 그런데, 왜 useTabs 속성은 User 설정에선 false이고 workspace에서는 true인데 반영이 안된는 걸까?
음??? vscode 버그..?
https://github.com/prettier/prettier-vscode/issues/1856

useTabs workspace setting does not override useTabs user setting · Issue #1856 · prettier/prettier-vscode

https://eslint.org/blog/2023/10/deprecating-formatting-rules/

Deprecation of formatting rules - ESLint - Pluggable JavaScript Linter

 
5. 왜 extension을 설치하는거지?
VSCode 내에서 Prettier와 상호작용하기 편리한 인터페이스를 제공

• 코드 저장 시 자동으로 포맷팅되도록 설정
• 특정 파일이나 폴더에 대한 Prettier 설정을 지정

 

▶그리고 내 문제

깜빡이는 원인이 뭘까?

package.json에 prettier는 설치되지 않은 상태.

 

▶깊어지는 의문

원인을 모르겠다. prettier는 설치되어있지 않은데 prettier가 하는.. 코드 포맷팅이 저절로 강제되고 있다?
 

▶가설

조건에 변화를 주고 하나씩 검토하기로 했다.
 

1. 기본

Default Formatter: Prettier
Prettier extension enabled globally
User Require Config: false
.vscode > settings.json : {} //

 

또야~

그대로...

그런데, output의 prettier를 확인해보면 prettier가 동작하고 있다. falling back

2. 수정

Default Formatter: None

Prettier extension enabled globally
User Require Config: false
.vscode > settings.json : empty

이렇게 default formatter 설정에서 prettier대신 None을 선택하면, output으로 아무것도 출력되지 않는다. 즉, prettier가 실행되지 않는다.

바뀌었다~~!

 
 

if...??

만약 팀원이 default formatter로 Prettier를 사용하고 있다면?

또는 extension이 적용되고 있다면?

그런데 require config가 false라면?

또야~

 

 

 
이럴 때,
root 경로에 .vscode 폴더를 생성하고, settings.json 파일을 만든다.
그리고 아래와 같이 작성한다.

그러면 짜잔 하고~ eslint 설정대로 포맷팅 된다.

 

이렇게 했을 때 prettier가 강제포맷팅을 하지 않게 되는 이유

settings.json파일의 prettier.requireConfig:true 라는 코드가 prettier의 설정파일이 있어야, 설정 파일의 설정대로 포맷팅을 한다는것을 의미한다.

▶아 이제 prettier 속성이 차단되는군

 

중간 결론

일단, Prettier extension은 save할 때 auto formatting 기능을 지원해준다.
즉, cli로 prettier --write [파일명].[확장자] 를 쓰지 않아도 된다는 장점(이 있다고 소개하고 있다.)
 
그런데, VSCode의 prettier extension에서 global/workspace에서 팀원마다 각자 설정한 내용들이 다를 수 있다..?

...그렇지... 당장 나도 결과물이 다른걸...

 
이럴 때, VSCode에서 제공하는 기본 속성들을 무시할 수 있게
.vscode 폴더를 만들고, settings.json 파일을 생성한다.
그러면, npm i -D prettier를 하지 않았을 때, prettier가 VSCode의 extension에서 제공하는 기본 설정들을 따르지 않게 할 수 있다.
기본 설정이라 함은 아마 이렇게 구성되어 있지 않을까?
(참고: https://prettier.io/docs/en/options.html#single-attribute-per-line)

// .json
{
  "arrowParens": "always",
  "bracketSpacing": true,
  "endOfLine": "lf",
  "htmlWhitespaceSensitivity": "css",
  "insertPragma": false,
  "singleAttributePerLine": false,
  "bracketSameLine": false,
  "jsxBracketSameLine": false,
  "jsxSingleQuote": false,
  "printWidth": 80,
  "proseWrap": "preserve",
  "quoteProps": "as-needed",
  "requirePragma": false,
  "semi": true,
  "singleQuote": false,
  "tabWidth": 2,
  "trailingComma": "es5",
  "useTabs": false,
  "embeddedLanguageFormatting": "auto",
  "vueIndentScriptAndStyle": false,
  "parser": "None" // 내 경우 vue
}

 

▶npm i -D prettier 이후, 분기점 발생

여기까지는 npm으로 prettier를 설치하지 않았을 때이고,
 
npm i -D prettier를 했을 때 eslint랑 prettier랑 대립각이 있다면? eslint보다 prettier가 강력해서. prettier를 따르게 된다.

사실 강력하다는 단어보다는,

일단 eslint로 포맷팅 되었다가 prettier로 포맷팅 된다면 저장할 때 순서가 그렇게 되는게 아닐까?
 
[현재 settings.json 파일 상황]

{

  "prettier.requireConfig": true

}

 
아직 .prettierrc 파일을 생성하지 않은 상태라면, prettier의 어떤 속성도 반영되지 않는다.
그런데, .prettierrc 파일을 생성하면? 이때까진 문제없다.
.prettierrc 파일에
{}
중괄호가 생기는 순간 기본 옵션들이 반영된다. 즉, 화면에는 아무것도 안보이지만, 사실은 위에 작성한 기본 속성들이 반영된다는 의미.

눈치를 챘던 건,
코드에서 마지막에 세미콜론을 삭제해도 세미콜론이 붙었다.

기본 속성의 옵션에서
“semi”:true 옵션이 반영되었기 때문

(그 외에도 확인해봄)



그러면 이렇게 빈 {} 중괄호만 있으면 결국 기본 옵션들을 허용한다는 의미가 된다.
eslint와 prettier가 대립하는 부분이 있을 때 prettier의 옵션들을 하나씩 읽어보니 문제가 되는 속성들이 두개 있었다.

1. "singleAttributePerLine": false,

여기서, eslint는 속성에 줄바꿈을 요구하고 있다.
그런데 안바뀌어...
 
prettier가 이렇게 강제로 포맷팅 해버리는 속성을 찾아보면
singleAttributePerLine이 false옵션이기 때문에 그렇게 되는 것.
 
prettier 문서를 읽어보니 이 속성이 문제 같았다. 기본 속성이 false라면 한 라인에 한개의 속성을 강요하지 않음

그래서 true로 바꿔주니까 잘 적용됐다.
 
  2. "bracketSameLine": false,
Html 태그의 마지막 괄호 > 를 줄바꿈 하지 않도록 eslint를 설정해주었는데, prettier는 마음에 안들었나보다.
그래서 또 문서를 읽었다. 기본은 false인데, false는 줄바꿈이 되어있는 것을 확인할 수 있다.

여기서 헷갈릴 수 있는 부분이있는데,
소제목이 Bracket Line인데 그래서 .prettierrc파일에 BracketLine으로 속성을 작성하면 안된다...

표 가장 우측의 API Override에 적혀있는 bracketSameLine을 .prettierrc 파일 속성으로 작성해주어야 한다.

▶성공적

이 속성들을 true로 바꿔주니, 옵션에 설정한대로 formatting이 되었다~~~ eslint와 화해했어!!! 드디어!!!
 

.prettierrc에 일부 속성만 넣어주면, 나머지 속성은 기본 옵션으로 적용되니까 문제가 생기는 것 같다.

 

오늘 문서를 읽어보니 옵션이 몇개 없는 것 같아서,

최대한 모든 속성의 옵션을 명시적으로 작성해주는게 잠재적인 문제를 방지할 수 있을 것 같기도 하다.

 

그리고 (package.json 파일의 pretiier 속성보다, .vscode 폴더의 settings.json 보다, VSCode extension에 작성된것 보다) .prettierrc 파일의 우선순위가 가장 높기 때문에,

 

.prettierrc 파일에 모든 속성의 옵션을 적용해주면 우선순위가 낮은 설정들을 덮어씌우고,

해당 설정대로 prettier가 동작하게 될 것이라 생각된다.