Prettier 자동 줄바꿈 설정

여러사람들과 협업하여 코드를 작성할 때 코드의 일관성을 위해 eslint 같은 linter 와 함께 prettier 같은 formatter를 이용할 수 있다.

일관성을 얻는 장점이 있지만, 개개인이 선호하는 스타일은 조금 내려놓고 팀 스타일을 따라야 한다는게 단점이라면 단점이다.

나는 Vue 프로젝트 환경에서 작업하고 있었고, 아래와 같이 기본설정을 해 두었었다.

 extends: ["plugin:vue/essential", "eslint:recommended", "@vue/prettier"],
     plugins: ["prettier"],
     rules: {
        "prettier/prettier": ["error"]
     }

그런데 작업 중 조금만 라인이 길어져도 자동으로 줄바꿈이 되는 현상이 있어 불편을 겪었다.

옵션을 상세하게 적용하면 변경할 수 있을 것 같아 prettier 문서를 찾아보았다.

여러 옵션들 중의 Print Width 옵션을 읽어보면

디폴트 print width 옵션은 80이지만, 가독성을 위해 100이나 120을 설정해서 사용하세요

라고 나와있다.

prettier를 적용한다면 코드 작성 중, 한 줄의 길이가 설정해둔 print width 값을 넘어가게 되면 자동으로 줄바꿈을 하라고 linting 및 formatting을 한다.
(설정에 따라 알림/경고만 해주거나 formatting까지 해줄 수 있음)

그래서 문서에서 설명해 준 바와 같이 print width 를 120으로 바꿔 주었다.

 extends: ["plugin:vue/essential", "eslint:recommended", "@vue/prettier"],
     plugins: ["prettier"],
     rules: {
       "prettier/prettier": ["error", { printWidth: 120 }]
     }

이후, 과도한 줄바꿈 지옥에서 탈출하게 되었다.

요즘은 대부분의 개발자들이 큰 모니터에서 개발하기도 하고, 한 줄에 조금 더 길게 쓰는 것을 선호하는 사람들도 있으니 180 정도로 해도 문제는 없을 것 같지만, 일단 120으로 사용하고 나중에 불편하면 늘리도록 하자.

여전히 100% 내 입맛대로 줄바꿈 할 수는 없다는게 좀 아쉽긴 하지만, 협업을 위해서 조금 내려놓기로...
근데 직접 formatting 하는게 더 협업에 좋을지도..?
하긴 모든 사람이 이쁘게 formatting 하는 것에 열심인건 아니니까 이걸로 만족하자..