[RN] VSCode prettier 적용, 오류 해결

확장 프로그램 손 보는 데 많은 시간이 걸렸다... 이곳저곳 손 보면서 기 좀 빨렸더니 나도 prettier이 이제 실행이 됐다!

 

나는 확장 프로그램에서 prettier를 설치하고 루트 디렉터리의 .vscode>settings.json에서 필요한 속성들을 입력하는 방식을 택했다. 설정(mac; cmd + ',')-prettier에서 필요한 것들을 체크하면 settings.json에 자동 반영된다고 한다. 나도 처음에 몇몇 개는 자동 반영이 되었지만 나중에는 잘 되지 않아서 답답한 마음에 직접 추가했다. 결정적인 문제 또한 이 파일에서 수정하면서 해결했다. 계속...

 

1. default formatter (기본 포맷터) 를 prettier로 설정한다. 

처음에 null로 되어 있으면 실행이 안될텐데 default formatter를 prettier로 설정하여야 한다. 

 

2.  format on save에 체크한다. 

파일을 포맷하면서 자동으로 포맷을 해 준다.

 

이후 필요한 속성들을 선택해 주면 된다. 보통 이렇게까지 하면 대부분의 문제는 해결되는 것처럼 보였다. 

근데 나는 이렇게해도 singleQuote가 적용이 안 되길래 아직도 prettier에 문제가 있음을 느꼈다..

 

3. default formatter 외 설정된 포맷터 옵션을 잘 살핀다.

지금 잘 돌아가는 settings.json은 아래와 같은데 그 전에는 이전에 이것저것 만지다 반영된 포맷터 설정들이 포함되어 있었고, 그 중에 javascript 포맷터로 prettier가 아닌 것이 들어가 있었다. 그렇기 때문에 작성한 코드의 언어 포맷터가 다르게 설정되어 당연스럽게도 반영이 안 되던 것이었다. 그래서 prettier로 맞게 고치거나, 이마저도 중복된 속성이니 삭제 후 default formatter를 따른다. 

 

https://stackoverflow.com/questions/52586965/why-does-prettier-not-format-code-in-vs-code 비슷한 사례

 

저장 단축키를 누른 후 제대로 포맷이 되었는지 확인한다.

 

+  .prettierrc 파일

.prettierrc 등 (별도의 파일) - 프로젝트를 진행하는 팀마다 원하는 포맷 스타일이 다를 수도 있다. 그렇기 때문에 프로젝트별로 포맷 스타일을 지정해 주기 위해 원하는 속성만을 골라 반영할 수 있다. 나의 경우 settings.json이 눈에 보이는 위치에 있어서 바로 확인이 가능했었지만 아닌 경우도 있는 듯 싶어서 이런 상황을 대비하기 위해서도 .prettierrc를 사용하여 한눈에 포맷 스타일을 확인할 수 있다. 그리고 프로젝트가 다른 컴퓨터에서 실행되었을 때도 일관된 결과를 얻을 수 있다. 적용하고자 하는 파일이 있다면 속성에서 Require Config를 통해 파일 요구 여부를 체크해도 좋을 것 같다. 

 

+ prettier 체크 표시

스택 오버플로우에서의 질의에서는 아래와 같은 코멘트가 달려 있었다. 

• 체크 하나: prettier가 활성화되어 현재 환경에서 실행 중임을 표시 
• 더블 체크: Prettier 확장에 나온 규칙에 따라 현재 문서가 괜찮은 상태임을 표시

https://stackoverflow.com/questions/67187505/what-is-the-meaning-of-the-double-v-markedprettier-on-the-vscode

(A Single Check represents that Prettier is enabled and working in your current environment and double-check symbol represents that your current document is "fine" according to the rules specified in the Prettier Extension.)

 

그리고 서핑해보다 발견한 글에는 이 체크 표시의 개수가 어떤 Prettier가 작동되고 있는지를 확인하게 해준다고 했다. 

https://kyechan99.github.io/post/lib/prettier-setting

• 체크 하나: VScode의 Prettier Extension이 작동
• 더블 체크: 프로젝트에 Prettier를 설치해서 package.json에 추가된 모듈

VScode에서는 이 아이콘에 대해 각각 check/check-all이라고만 나와있지만 이 분의 말대로 나는 확장 프로그램을 설치했기 때문에 체크가 하나만 표시된 거라 신기했다.

 

 

 

https://wallydev.com/posts/d812995b-7df5-40ad-8bc5-84490527ed7b