2. IntelliJ 에서 ESLint, Prettier 적용하기

전처리

• ESLint, Prettier 다운받는것은 이전 글에 있다. https://leexx.tistory.com/102
• ESLint 설정 시 Prettier 도 자동으로 설정되게 하는 부분도 같은 글 하단에 있다. https://leexx.tistory.com/102#ESLint%--%EC%--%--%--Prettier%--%EB%-D%--%--%EC%-E%--%EC%--%B-%EA%B-%B-

1. ESLint, Prettier / 설치 및 사용 / 차이점 / 더 잘쓰기 (충돌방지, 쉽게 쓰기)

 

 

파일 저장할 때 ESLint 설정이 적용되게 하기 

Library 설치

 

저장 시 알아서 적용되도록 하기

 

파일 저장할 때 Prettier 설정이 적용되게 하기 

앞서 eslint-plugin-prettier 로 eslint 적용 시 prettier 도 같이 적용되게 한 내용과 동일 하다. 개인적으로 라이브러리 설치 및 설정 보다, IDE 의 도움을 받는게 훨씬 간단해서 더 추천한다.

 

IntelliJ 에서 Prettier plugin 설치

 

Libaray 설치

 

저장 시 알아서 적용되도록 하기

Prettier package 에 설치된 패키지의 경로를 추가해준다. 나는 프로젝트 내에 설치를 해서, 저렇게 해줬다. 그리고 아래 옵션들을 체크해준다. (이유는... 공식문서에서 그렇게 설치하라고 해서...)

 

 

Reformat with Prettier 에 command+s 등록

기존의 hotkey 는 삭제해야 작동한다고 한다.

 

ESLint 모듈을 제대로 못찾는 경우

간혹 제대로 eslint 를 못찾는 경우 이런 에러가 뜨는 경우가 있는데, 내용을 보다시피 eslint 모듈을 제대로 못찾은 경우이다

 

이럴땐 이렇게 직접 명시해주면 된다. 참고로 /node_modules 까지가 아니라 /node_modules/eslint 이다.

 

 

참고자료

• 👍🏻👍🏻👍🏻👍🏻👍🏻👍🏻 https://minjung-jeon.github.io/eslint-prettier-intellij/