인프런 커뮤니티 질문&답변

주재님의 프로필 이미지
주재

작성한 질문수

[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스

12-린터와 포멧터

prettier 적용 사라짐

작성

·

340

0

강의 듣기전부터 프리티어는 사용하고 있었는데

yarn add --dev eslint-config-prettier

이걸 입력한이후 저장시 프리티어 간격조정이 자동으로 안됩니다

format on save 다 체크 되있는 상태이고 다른폴더에선 프리티어가 되지만

yarn add --dev eslint-config-prettier 이걸 입력한 폴더만 간격 조정이 안먹는 데 이유가 뭘까요

답변 2

0

해결하셨는지 모르겠는데 저도 같은 문제가 발생해서 해결했습니다.

 

일단 확장프로그램에서 prettier 제거->

prettierrc.json 파일 삭제

하고 prettier처음부터 다시 설치를 했는데

중간에 echo {}> .prettierrc.json 이부분 따라하지 않고

node --eval "fs.writeFileSync('.prettierrc','{}\n')"

위의 명령어로 .prettierrc파일을 만든 후 .prettierrc.json 으로 이름 변경 하니까 잘 작동하네요

강의 영상버전과 현재버전이 가이드가 바뀌어서 그런가봅니다

(인코딩 문제 같은게 강의대로 하면 .prettierrc.json 파일 인코딩이 UTF-16으로 되어있고 새 가이드 대로 하면 UTF-8로 되어있음)

 

0

노원두님의 프로필 이미지
노원두
지식공유자

안녕하세요! 주재님!

eslint와 prettier를 함께 사용하기 위해 eslint-config-prettier를 설치하게 됩니다!

다만, 여기서 해당 라이브러리를 설치하고 끝나는 것이 아닌,

.eslintrc.js 파일에서 등록까지 해주셔야해요!

// .eslintrc.js
...

extends: [
   "plugin:react/recommended",
   "standard-with-typescript",
   "prettier" // 해당 부분 추가
],

...

 

다음으로, .prettierrc.json 파일에서 몇 칸을 띄울 것인지 등의 설정을 추가하실 수 있어요!

// .prettierrc.json
{
  "tabWidth": 2
}

 

이렇게 설정 후에도 적용이 되지 않으신다면, vscode를 종료하고 다시 한 번 실행해 보세요!^^

주재님의 프로필 이미지
주재

작성한 질문수

질문하기