JetBrain Reformatter와 ESLint 맞추기

bluestragglr·2020년 4월 20일
0
post-thumbnail

프로그래밍의 시어머니 ESLint를 사용하다 보면 정말... 귀찮습니다. 협업을 위해서 코드 가독성과 스타일을 맞춰나가는 과정이지만 짜증나지 않는다고 할 수 있는 사람은 많이 없을거라고 생각해요. 심지어 사용하는 IDE가 기본으로 제공하는 템플릿이 규칙에 어긋나서 파일을 만들 때 마다 빨간줄이 그인다면 기분이 좋을 수가 없습니다 😢

Airbnb ESLint 규칙에 대해 JetBrain Webstorm에서 Vue.js 작업을 하기 위해서 맞춰준 세팅들을 정리 해 보았습니다.

작업 이전 상태


⌘(cmd) + ⌥(option) + L 로 자동 정렬을 수행하니 알아서 들어간 indentation과 함수 뒤 괄호에 대해서 시어머니가 불만을 표하고 있습니다. 스크립트 영역의 자동 indentation 끄기와 함수 뒤 괄호 사이에 공백 추가하기를 통해 해결했습니다.

스크립트 영역 자동 indentation 끄기

[Preference > Editor > Code Style > HTML > Other > Do not indent children of...] 에 <script> 태그를 추가해 줍니다. 그러면 script 아래 모든 코드가 먹던 indentation 2개가 사라져서 평화로워 집니다.

*해당 화면 기준 맨 아래 있습니다.

(원문)

Code Style Javascript indent problems

함수 뒤 괄호 앞 띄어쓰기

함수 뒤 괄호는 JavaScript 설정에서 수정 해 주어야 합니다. [Preference > Editor > Code Style > JavaScript > Spaces]에서 Function declaration parentheses에 체크해 주면 괄호 앞에 띄어쓰기가 생깁니다.

자동 import시 double quote 생김

Export name으로 컴포넌트를 자동으로 불러오는 경우 string에 double quote가 씌워져서 에러가 발생합니다. 이번에는 [Preference > Editor > Code Style > JavaScript > Punctutation]에서 'Use single quotes always'로 세팅 해 줍시다.

Object 중괄호 안 띄어쓰기

마찬가지로 Code Style > JavaScript 에서 Object Literal에 체크해 주면 중괄호 안에 자동으로 띄어쓰기가 삽입됩니다.

회사에서 린트를 엄격하게 사용하여 프로젝트를 진행한지 4개월 정도가 지난 것 같습니다. 여전히 귀찮게 하는 경우가 많지만 쓰다 보면 스타일이 어느정도 적응되는 것 같기도 합니다. 린트에 너무 스트레스 받지 않고 개발하실 수 있길 바라겠습니다.
린트 때문에 너무 스트레스를 받는다면 커밋할 때만 린트 체크가 동작하도록 설정하는것도 방법이에요!

profile
디자인하는 프론트개발자

0개의 댓글