[ESLint, Prettier] 린트 및 프리티어 설정하기

안녕하세요, Einere입니다.

(ADblock을 꺼주시면 감사하겠습니다.)

---

이번 포스트에서는 Mac에서 Jetbrains의 IDE를 사용할 때, 린트 및 프리티어 설정하는 방법에 대해 알아보도록 하겠습니다.

 

 

 

ESLint 설정하기

ESLint 글로벌 설치하기

npm install -g eslint를 이용하여 eslint를 글로벌로 설치합니다. 이 경우, 린트 bin 경로는 /usr/local/bin/eslint가 됩니다.

 

IDE에서 린트 설정하기

1. Preferences(⌘+,) - Other Settings - ESLint Settings에서 Enable에 체크를 해줍니다.
2. Node interpreter를 설정합니다. (전역으로 설치하셨다면 보통 /usr/local/bin/node입니다.)
3. eslint bin 경로를 설정합니다. (전역으로 설치하셨다면 보통 /usr/local/bin/eslint입니다.)
4. 혹시 프로젝트 별로 eslint 설정파일(.eslintrc.json)이 있는 경우를 대비해, ESLint config file path를 첫번째 라디오 버튼으로 설정합니다. (보통 협업 시 사용하므로, 설정 파일을 추가하는 것을 추천드립니다.)
5. 추가로, 저장시 자동으로 린트에 맞게 수정되기를 원한다면 Auto fix errors에 체크를 합니다.

 

Prettier 설정하기

IDE에 Prettier 플러그인 설치하기

Preferences(⌘+,) - Plugins에서 Prettier를 설치한 후, IDE를 재시작합니다.

 

IDE에서 Prettier 설정하기

1. Preferences(⌘+,) - Languages & Frameworks - JavaScript - Prettier에서 Node interpreter를 설정합니다. (전역으로 설치하셨다면 보통 /usr/local/bin/node입니다.)
2. Prettier package를 설정합니다. (저는 프로젝트에 prettier가 설치되어 있으므로, 해당 경로로 설정했습니다...만 전역 경로로 설정하는 것이 좋을 것 같습니다.)
3. prettier 설정 파일(.prettierrc.json)을 추가합니다. (옵션 레퍼런스 참고)

 

 

참고

https://www.jetbrains.com/help/webstorm/eslint.html

ESLint - Help | WebStorm

https://www.jetbrains.com/help/webstorm/prettier.html

Prettier - Help | WebStorm