vscode를 사용하다보면 정렬기능이 필요하게 되는데,
기본 자동 정렬 기능(ctrl + K, ctrl + F) 말고도 확장으로 설치할수 있는 프리티어(Prettier)가 압도적으로 인기가 많다.
Prettier를 처음 사용했을 땐...
처음 사용해 보았을때는 분명 정렬은 되는데...
아래와 같이 정렬이 되어버려서 이게 뭔가 싶었다.
기능 하나하나마다 줄을 내려버리는데다 따옴표(")만 있는 줄도 있고 닫는 태그만 있는 줄도 있고...
뭔가 정렬은 된거 같은데, 오히려 훨씬 보기가 불편했었다.
그래서 꽤나 오랜기간 vscode의 자동정렬 기능만 이용하게 됐는데, 갈수록 이 기능도 뭔가 조금 부족함을 느꼈었다.
그러다 뭔가 정렬을 개인화(커스텀)할 수 있을까 싶어 알아보았더니, Prettier가 다양한 설정으르 통해 원하는대로 정렬의 형태를 지정할 수 있다는것을 알게되었다.
적당히 자기 스타일에 맞춰 세팅을 하다보니 최종적으로 위의 코드들이 정렬하면 아래와 같이 바뀌게 되었다.
Prettier 설정하는 방법
(1) root 폴더에 .prettierrc라는 파일을 하나 생성해준다.
(2) 자신이 원하는 포멧 형식을 JSON 형식으로 아래와 같이 작성해준다.
※ 아래는 어디까지나 개인 적인 취향에 맞춰 (협업 아님) 사용하고있는 세팅이다.
{
"arrowParens": "avoid",
"bracketSameLine": true,
"bracketSpacing": true,
"endOfLine": "auto",
"htmlWhitespaceSensitivity": "ignore",
"printWidth": 100,
"semi": true,
"singleQuote": true,
"tabWidth": 4,
"trailingComma": "all",
"useTabs": false,
"vueIndentScriptAndStyle": false
}
각각의 기능들
arrowParens: 화살표 함수의 괄호 사용 방식. avoid=가능하면 괄호를 생략
bracketSameLine: 닫는 태그 '>' 를 다음 줄로 내릴것인지 여부
bracketSpacing: 대괄호 사이의 공백 여부
endOfLine: 운영체제 별로 줄바꿈 하는 방식이 차이가 있는데 (/r, /n) 협업시 이것에 의한 오류를 방지해주는 기능
htmlWhitespaceSensitivity: HTML 에서 공백을 어떻게 처리할 것인지
jsxSingleQuote: JSX에서 작은 따옴표 사용할 것인지 여부
printWidth: 줄바꿈을 시도하는 라인의 길이
- 기본값은 80이며, 일반적으로 코드 스타일 가이드에선 100 ~ 120 정도를 선호하는 편
semi: 새미 콜론 사용 여부
singleQuote: 작은 따옴표 사용할 것인지 여부
tabWidth: 들여쓰기 공백 수
trailingComma: 여러 줄이 사용될 경우 후방에 쉼표를 어떻게 표시할 것인지
useTabs: 공백 대신 탭으로 들여쓰기
vueIndentScriptAndStyle: vue 파일의 스크립트와 스타일 들여쓰기 여부
옵션들이 이름이 바뀌거나 새로운 기능으로 통합되며 사라지기도 하니 현재 사용 가능 여부와 그 외 옵션들은 다음 사이트를 참고하도록 하자.
http://json.schemastore.org/prettierrc >
Prettier같은 다양한 Code Formatter는 분명 협업 때 리드하는 사람이 이런 config 파일을 하나 생성해서 다같이 형식을 맞추자고 하면, 누가 어떻게 작성하더라도 매우 깔끔하게 코드를 정렬할 수 있어서 좋다.
단, 협업중에 혼자서만 Prettier를 사용한다면... 다른사람이 작업한걸 가져올때마다 계속해서 틀을 바꿔버리기 때문에 오히려 욕먹기 좋으니 주의하자.