VScode Code Formater 인 Prettier 완벽 적용하기

VSCode 익스텐션 중에 코드를 정렬해 주는 Formatter는 크게 Prettier과 Beautify가 있습니다.

VScode에서는 2가지의 Formatter가 가장 많이 사용되는데 2가지는 약간 다른 특징이 있습니다.
Prettier가 코드를 강제적으로 변경을 시킨다면 Beautify는 좀더 자유롭게 놔두는 편입니다.
자신만의 코드작성 규칙을 가지고 있다면 Prettier가 짜증 날 수도 있습니다. 내 코드를 막 바꿔버리닌까요. 하지만 그런면이 코드를 항상 일정하게 정렬을 시켜 주기도하닌까 심리적인 타격만 없다면 이보다 좋을 수 는 없을 겁니다. 또한 여러 사람이 한 프로젝트를 같이 코딩을 해야 한다면 꼭 필요한 익스텐션이라고 할 수 있습니다.

VScode에 prettier 적용하기

VScode에 prettier을 적용하는 방법은 2가지가 있는데, 프로젝트의 로컬에 npm으로 설치하는 방법과 VScode의 익스텐션으로 설치하는 방법이 있습니다.
로컬에 npm으로 설치하는 방법은 여러 개발자들과 같은 코딩 Format을 유지하고자 할때 좋은 방법이고 혼자서 편히 VScode를 사용하고자 할때는 익스텐션으로 설치하는 것이 좋습니다.

먼저 익스텐션을 설치하고 설정하는 방법을 소개합니다.

Prettier 익스텐션 설치

1. 먼저 좌측의 아이콘 중 익스텐션 아이콘을 선택합니다.
2. 검색어 중 prettier을 입력하여 검색을 합니다.
3. 검색 결과 중 첫줄에 있는 Prettier-Code formatter을 선택합니다.

다른 익스텐션과 마찬가지로 install을 선택하여 설치를 합니다.

끝~~~ 설치완료입니다.

설치는 완료했지만 내가 원하는 형태로 세팅을 할 수 있습니다.

Prettier 익스텐션 설정하기

설치 후 어느정도의 세팅을 할 수 있습니다.

파일 > 기본설정 > 설정을 선택하면 설정화면이 나옵니다.

설정창의 사용자의 리스트를 선택합니다.

1. Prettier-Codeformatter 를 선택합니다.
2. Prettier을 설정할 수 있는 설정창이 나옵니다. 예전에는 코드를 텍스트형태로 수정하는 설정창이 나왔으나 언제 부터인가 설정하기 쉬운 UI창을 보여줍니다.

하지만 예전부터 사용하던 사람이라면 이 창 말고 예전 설정창이 더 편한 사람도 있을 것입니다.

우상단에 있는 버튼을 클릭합니다.

1. setting.json문서가 열립니다. 예전의 세팅 문서입니다.
2. 설정 창에서 기본값을 변경하게 된다면 setting.json의 값이 자동으로 변경이 됩니다. 다시말하면 직접 이 setting.json파일에 옵션사항을 적어도 반영이 된다는 뜻입니다.

Prettier 설정

Prettier의 설정은 아래의 순서로 적용이 됩니다.

settings.json < .editorconfig < .prettierrc

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

VScode의 settings.json에는 기본설정과 달리 세팅값의 말머리에 prettier.~~처럼 prettier.를 붙혀줘야 합니다

prettier.printWidth (default: 80)

한줄 내에서 코드를 맞춥니다. 한 줄이 이 글자수를 넘게 되면 줄바꿈되어 코드가 정리됩니다.
한줄로 표현되는 코드가 2줄이 되어버려서 저는 보기가 좋지 않아서 보통 200이상 잡습니다.

prettier.tabWidth (default: 2)

텝을 눌렀을 때 몇칸이 띄어지는지를 설정합니다. 저는 보통 4를 놓고 씁니다.

prettier.singleQuote (default: false)

홑따옴표를 쓸건지 설정합니다. 기본값은 쌍따옴표가 기본입니다. 코딩을 하면서 홑따옴표를 썼다면 강제로 쌍따옴표로 변경해 버립니다.

prettier.trailingComma (default: 'none')

객체, 배열, 함수 등의 후행에 쉼표를 찍을지 제어합니다.

"none" - 쉼표를 붙히지 않음
"es5" - ES5에서 유효한 후행 쉼표 붙힘 (객체, 배열 등)
"all" - 가능하면 후행 쉼표를 붙힘 (함수 인수)

prettier.bracketSpacing (default: true)

객체 리터럴 내부의 공백을 제어합니다

prettier.jsxBracketSameLine (default: false)

jsx 요소의 마지막 다음 줄에 닫기 >를 표시합니다.

prettier.parser (default: 'babylon') - JavaScript only

javascript에서 사용되며 파서를 설정합니다. 파서는 'flow'및 'babylon' 2가지만 지원합니다.

prettier.semi (default: true)

문장 뒤에 세미콜론을 붙힐지 뺄지를 설정합니다.

prettier.useTabs (default: false)

참이면 탭이있는 줄을 들여 쓰기 합니다.

prettier.proseWrap (default: 'preserve')

마크 다운은 공백 및 줄박꿈 같은 것이 중요한 요소이므로 여러 줄에 걸쳐 산문을 랩핑합니다.

prettier.arrowParens (default: 'avoid')

단독 화살표 함수의 매개 변수 주위에 괄호를 자동으로 붙힘

prettier.jsxSingleQuote (default: false)

JSX에서는 큰 따옴표 대신 작은 따옴표를 사용하십시오.

prettier.htmlWhitespaceSensitivity (default: 'css')

HTML 파일의 전역 공백 감도를 지정할 수 있습니다. (뭔~ 이야기인지 모르겠네요)

prettier.endOfLine (default: 'auto')

이 설정도 무슨말인지 잘 모르겠어요.. 그냥 기본값으로 놓고 씁니다.

prettier.quoteProps (default: 'as-needed')

객체의 속성이 인용 될 때 변경합니다.

prettier.requireConfig (default: false)

prettierconfig파일을 적용할지를 선택하는 것 같아요

prettier.ignorePath (default: .prettierignore)

.gitignore처럼 prettier이 적용되지 않게 하려면 .prettierignore에 파일명을 기록하면 그 파일은 무시를 합니다
또한 파일 뿐만 아니고 코드내에서 주석으로 // prettier-ignore라고 작성하면 해당 코드만 무시합니다.

html에서는 <!-- prettier-ignore -->
js에서는 // prettier-ignore

prettier.disableLanguages (default: ["vue"])

이 확장 기능을 비활성화 할 언어 ID 목록입니다.