[VS Code] 💽 Prettier 도구 설정법 - 한방 코드 포맷터

VSCode - Prettier 

Visual Studio Code에서는 사용자 편의를 위해 코드의 줄 간격이나 행을 자동으로 깔끔하게 정리해주는 확장프로그램이 존재한다.

설치를 완료하면, 에디터 밑부분에 Prettier: ✔ 표시가 되어있다면 활성화된 것이다.

Prettier - Code formatter - Visual Studio Marketplace

---

Prettier 설정

 

Format on Save 확인

• vscode 설정에서 format on save를 입력하고 나오는 설정에 체크되어 있는 지 확인한다.
•  이 기능은 항상 저장을 할때마다, 아주 이쁘장하게 포맷을 저절로 자동으로 정렬해준다.

 

Default Formatter 확인

• 간혹 에디터의 default로 설정되어 있는 formatter가 null 이거나 설정이 잘못되어 있는 경우가 있다. 
• 설정이 prettier format (esbenp.prettier-vscode) 로 설정되어 있는 지 확인해야 한다.

 

Prettier 옵션 속성

{
  // 한 줄이 이 글자수를 넘게 되면 들여쓰기되어 코드가 세로로 정리된다. (default: 80)
  "printWidth": 120,
  
  // 탭 너비 (default: 2)
  "tabWidth": 3,
  
  // 탭 사용 여부. 참이면 탭이있는 줄을 들여 쓰기 한다. (default: false)
  "useTabs": false,
  
  // 세미클론 강제 여부 (default: true)
  "semi": true,
  
  // 홑따옴표를 쓸건지 설정. 기본값은 쌍따옴표. 코딩을 하면서 홑따옴표를 썼다면 강제로 쌍따옴표로 변경. (default: false)
  "singleQuote": true,
  
  /* 
  객체, 배열, 함수 등의 후행에 쉼표를 찍을지 제어
  "none" - 쉼표를 붙히지 않음
  "es5" - ES5에서 유효한 후행 쉼표 붙힘 (객체, 배열 등)
  "all" - 가능하면 후행 쉼표를 붙힘 (함수 인수) 
  */
  "trailingComma": "all",
  
  // 객체 리터럴 사용시 괄호에 공백 삽입 여부 (default: true)
  "bracketSpacing": true,
  
  // JSX의 마지막 `>`를 다음 줄로 내릴지 여부 
  "jsxBracketSameLine": true,
  
  // 단독 화살표 함수의 매개 변수 주위에 괄호를 자동으로 붙힘 (default: 'avoid')
  "arrowParens": "avoid",
  
  // vue 파일의 script와 style태그 들여쓰기 여부
  "vueIndentScriptAndStyle": false,
  
  // 맨마지막 줄 넣는지 여부
  "endOfLine": "auto",
  
  // 이 확장 기능을 비활성화 할 언어 ID 목록
  "disableLanguages" : ["vue"]
}

 

Prettier 설정 파일 우선 순위

Prettier의 설정 파일은 아래의 우선순위로 적용이 된다.

1. 먼저 settings.json에 설정한 세팅값을 적용한다.
2. 만약 프로젝트에 EditorConfig의 설정파일인 .editorconfig가 있으면 이 설정이 덮어쓴다.
3. 마지막으로 Prettier의 고유한 설정파일인 .prettierrc가 프로젝트에 있으면 이 값을 최종적으로 적용하게 된다

VScode의 settings.json에 프리티어 속성값을 설정할 경우, 기본설정과 달리 세팅값의 말머리에 prettier.를 일일히 붙여주어야 한다.

// .settings.json
{
  "prettier.useEditorConfig": false,
  "prettier.printWidth": 120,
  "prettier.tabWidth": 3,
  "prettier.useTabs": false,
  "prettier.semi": true,
  "prettier.singleQuote": true,
  "prettier.trailingComma": "all",
  "prettier.bracketSpacing": true,
  "prettier.jsxBracketSameLine": true,
  "prettier.arrowParens": "avoid",
  "prettier.vueIndentScriptAndStyle": false,
  "prettier.endOfLine": "auto"
}

 

만일 로컬에 있는 프리티어 설정을 무시하고, 프로젝트 설정에 있는 컨벤션에 맞게 프리티어가 작동하게 하려면, 개발하는 프로젝트의 루트 디렉토리에 .prettierrc.json를 생성한다.

// .prettierrc.json
{
  "printWidth": 120,
  "tabWidth": 3,
  "useTabs": false,
  "semi": true,
  "singleQuote": true,
  "trailingComma": "all",
  "bracketSpacing": true,
  "jsxBracketSameLine": true,
  "arrowParens": "avoid",
  "vueIndentScriptAndStyle": false,
  "endOfLine": "auto"
}