[컴] prettier 설정 추가하기

 

prettier 설정 추가하기

vscode extension 으로 vetur 를 사용하는데, 여기 기본 formatter가 prettier 이다.

• Vetur - Visual Studio Marketplace

setting 에서 formatter 로 prettier 를 선택할 수 있다.(prettier 가 기본값이다.)

기본 option 값을 이용하니 보기가 안좋아서 이 prettier의 설정을 좀 변경해 보려 한다.

prettier option 지정 방법

• Formatting | Vetur

2가지 방법으로 option 을 지정해 줄 수 있다.

1. proj_root directory 에 .prettierrc 파일을 생성해서 사용
2. 또는 vscode setting 에서 설정해준다. 이때는 .prettierrc 파일이 없어야 한다.

"vetur.format.defaultFormatterOptions": {
  "prettier": {
    // Prettier option here
    "semi": false
  }
}

prettier options

option 과 관련된 내용은 다음 링크를 확인하자.

• Configuration File · Prettier

.yaml 문법 으로 적어주면 된다. 안에서 사용되는 option 들은 아래를 참고하자.

• Options · Prettier

# .prettierrc or .prettierrc.yaml
# options: https://prettier.io/docs/en/options.html
trailingComma: "es5"
tabWidth: 2
semi: false
singleQuote: true
printWidth: 150

printWidth

printWidth option 만 바꿔줘도 훨씬 보기 좋다. 기본 width 가 80 인데, 보기에 별로다 관련해서 prettier 에서도 readability 를 위해서 좀 더 큰 값을 권장한다.

• Print Width | Options · Prettier