vue-3 Prettier 설정 및 자동완성 정렬

Prettier란?

Prettier는 개발자들이 일관된 스타일로 코드를 작성할 수 있도록 도와주는 도구 중 하나입니다. 이를 위해서는 Prettier 설정 파일인 .prettierrc 파일을 작성하여 사용할 수 있습니다.

 

1. vscode Marketplace 에서 Prettier 라이브러리 다운 

 

2. prettierrc.json 파일 생성

 

 

 

3. prettierrc.json 파일 설정 

가장 많이 사용되는 Prettier 설정은 다음과 같습니다.

{
  "printWidth": 80,
  "tabWidth": 2,
  "useTabs": false,
  "semi": true,
  "singleQuote": true,
  "trailingComma": "es5",
  "bracketSpacing": true,
  "jsxBracketSameLine": false,
  "arrowParens": "avoid",
  "endOfLine": "auto"
}

 

• printWidth: 한 줄에 출력할 문자 수를 지정합니다. 일반적으로 80자를 추천합니다.
• tabWidth: 탭 문자의 크기를 지정합니다. 일반적으로 2 또는 4를 사용합니다.
• useTabs: 탭 문자를 사용할 것인지 스페이스를 사용할 것인지 지정합니다.
• semi: 문장 끝에 세미콜론을 사용할 것인지 지정합니다.
• singleQuote: 문자열에 작은따옴표를 사용할 것인지 큰따옴표를 사용할 것인지 지정합니다.
• trailingComma: 객체나 배열의 마지막 항목 뒤에 쉼표를 사용할 것인지 지정합니다.
• bracketSpacing: 객체의 속성 이름과 값을 구분하는 중괄호 사이에 공백을 사용할 것인지 지정합니다.
• jsxBracketSameLine: JSX 요소의 여는 태그를 다음 줄에 쓸 것인지 같은 줄에 쓸 것인지 지정합니다.
• arrowParens: 화살표 함수의 매개변수에 괄호를 사용할 것인지 지정합니다.
• endOfLine: 줄 바꿈 문자의 스타일을 지정합니다. "auto", "lf", "crlf", "cr" 등이 있습니다.

 

이 외에도 다양한 설정이 존재합니다. 개발자가 코딩 스타일에 맞게 설정 파일을 작성하여 사용하면, Prettier를 통해 일관된 스타일로 코드를 작성할 수 있습니다.

 

4. ctrl + s / 저장 자동정렬 

file - > Preferences -> settings 들어간 후 

Text Editor -> Formatting 에서 

Format On Paste  -> 체크 / Format On  Save -> 체크 / Format On Type  -> 체크

그리고 난 후 검색창에 default formatter 검색 후 Prettier 로 변경 

이상 마무리 입니다.