[intellij] nextjs에 prettier 설정(자바스크립트 코딩스타일)

prettier 는 코딩스타일을 지정하는데 도움을 주는 플러그인이다.

사람마다 선호하는 코딩스타일이 다를 수 있는데, 어떤 사람은 쌍따옴표를 쓰는데 반해 홀따옴표를 쓰는 사람도 있고, 탭을 사용할 경우 띄어쓰기 2개 효과를 선호하는데 반해 4개 효과를 선호하는 사람도 있다.

 

혼자 코딩하면 상관없지만 누군가와 협업해야 한다면 코딩 스타일을 지정하는게 좋다. 그중 각광받는 것중 하나가 바로 Prettier다. 내 경우는 Intellij 를 사용해 코딩하지만 Visual Studio Code를 선호하는 사람이 있다면 서로의 다른 IDE에 따라 코딩스타일이 달라지기도 하는데, 이런것을 잡아주는데 도움을 주기 때문이다.

 

 

설정방법

우선 npm 을 이용해 패키지를 설치해야 한다

npm install -D prettier

 

root 경로에 다음 파일을 생성해 설정을 추가한다

.prettierrc.js

 

파일 내 다음처럼 추가한다(프로젝트별로 나눠도 된다)

내 경우는 tab은 4칸 띄우는걸 선호해서 주로 이렇게 쓴다.

그 외 다양한 설정이 있으니 검색해서 옵션을 추가하길 권장한다

module.exports = {
    semi: true,
    trailingComma: 'all',
    singleQuote: true,
    printWidth: 100,
    tabWidth: 4,
};

 

 

intellij 플러그인에서 prettier를 검색해 설치한다

(VS Code를 사용하는 분 역시도 마찬가지로 검색해서 설치해야하고 설정해야하는데, 여기서는 intellij만 다룬다)

 

설정에서 prettier를 검색하면 다음과 같은 화면이 나온다. 내 경우는 코드정렬 단축키를 입력할 때 적용하도록 했다.

(On 'Reformat Code' action)

저장할때마다 자동 포멧을 맞추고 싶다면 'On Save'를 체크하면 된다

 

 

이제 코딩을 한 뒤에 마무리에 Command + Option + L 키(윈도우에서는 Ctrl + Shift + Alt + L 이다) 을 누르면 자동 정렬이 된다.

 

 

끝.