취향에 맞게 만들어보는 Prettier
왜 사용할까요?
Prettier는 코드를 깔끔하게 정리해주기 위해서 사용하는 도구입니다!
단순히 깔끔하게만 정리하기 위해서 사용하지는 않겠죠?
Prettier를 꼭 사용해야 하는 이유는 함께 일을 하는 모든 사람들이 동일한 형식으로 코드를 작성하게 하기 위해서입니다.
다음과 같이 Prettier를 사용하면 탭을 1회 사용하여 간격을 띄우는 대신, 스페이스바를 두번 눌러서 간격을 띄우도록 규칙을 지정할 수 있습니다.
<!-- 탭 1번 -->
----<span>안녕하세요</span>
<!-- 스페이스바 2번 -->
--<span>안녕하세요</span>
따라서 같이 일하는 모든 사람들이 같은 규칙으로 코드를 작성할 수 있기에 훨씬 더 통일성 있고 깔끔한 코드를 작성할 수 있는 것입니다.
지원하는 언어
- JavaScript (including experimental features)
- JSX
- Angular
- Vue
- Flow
- TypeScript
- CSS, Less, and SCSS
- HTML
- JSON
- GraphQL
- Markdown, including GFM and MDX
- YAML
플러그인을 지원하는 언어
기본적으로 Prettier가 지원하는 언어는 웹에 관련된 언어들입니다. 추가적으로 더 지원하는 언어가 있는데, 이러한 언어에 Prettier를 적용하기 위해서는 플러그인을 설치할 필요가 있습니다.
공식 플러그인
- @prettier/plugin-php
- @prettier/plugin-pug
- @prettier/plugin-ruby
- @prettier/plugin-xml
커뮤니티 플러그인
- prettier-plugin-apex
- prettier-plugin-elm
- prettier-plugin-go
- prettier-plugin-java
- prettier-plugin-kotlin
- prettier-plugin-properties
- prettier-plugin-solidity
- prettier-plugin-svelte
- prettier-plugin-toml
- prettier-plugin-sh
플러그인 설치하기
npm
npm install --save-dev <플러그인 이름>
yarn
yarn add --dev <플러그인 이름>
설치하기
npm
npm install --save-dev --save-exact prettier
yarn
yarn add --dev --exact prettier
원하는 옵션 추가하기
{
"printWidth": 80,
"tabWidth": 2,
"useTabs": false,
"semi": true,
"singleQuote": true,
"quoteProps": "as-needed",
"trailingComma": "es5",
"bracketSpacing": true,
"jsxBracketSameLine": false,
"arrowParens": "always",
"endOfLine": "lf",
"embeddedLanguageFormatting": "auto" // >= v2.1.0
}
코드가 보여지는 너비 (printWidth)
기본값이 80이고, 더 크게 하면 가독성이 떨어질 수 있습니다!
{
"printWidth": 80
}
줄바꿈 시, 들여쓰기 간격 (tabWidth)
기본값이 2이고, 4 또는 2로 적용합니다.
{
"tabWidth": 2
}
탭을 사용할지 여부 (useTabs)
기본값은 false 이고, 일반적으로 사용하지 않는 기능이며, 띄어쓰기 대신 탭을 사용하여 간격을 조정하고 싶을때 활성화합니다.
{
"useTabs": false
}
쌍반점을 사용할지 여부 (semi)
기본값은 true 이고, 코드가 끝날 때 ; 기호를 필수로 사용할지를 결정하는 옵션입니다.
{
"semi": true
}
큰 따옴표 대신 작은 따옴표 사용여부 (singleQuote)
기본값은 true 이고, 큰 따옴표 대신 작은 따옴표를 사용할지를 결정하는 옵션입니다.
{
"singleQuote": true
}
객체의 속성을 표현할 때, 따옴표를 적용하는 조건 (quoteProps)
기본값은 “as-needed” 이고, 객체의 속성을 표현할 때, 따옴표를 적용하는 조건을 설정할 수 있습니다.
{
"quoteProps": "as-needed"
}
“as-needed”
필요한 경우에만 객체에 따옴표를 붙입니다.
{
attr: 1,
'attr-hello': 1,
}
“consistent”
하나라도 따옴표가 필요하다면, 모든 속성에 따옴표를 붙입니다.
{
'attr': 1,
'attr-hello': 1,
}
후행 쉼표의 사용 조건 (trailingComma)
배열의 요소와 객체 타입의 속성을 나열하는 경우에, 맨 마지막 요소 뒤에 쉼표를 입력할지를 결정합니다.
v2.0.0 버전 이전에는 “none” 을 기본값으로 사용하였고, 현재는 “es5”를 기본값으로 사용하여 모든 배열과 객체의 후행에 쉼표를 입력하도록 합니다.
{
"trailingComma": "es5"
}
“none”
array = [1, 2, 3];
object = { a: 1, b: 2, c: 3 };
function hello(a, b) {}
“es5”
array = [1, 2, 3,];
object = { a: 1, b: 2, c: 3, }; // 후행 쉼표
function hello(a, b) {}
“all”
array = [1, 2, 3];
object = { a: 1, b: 2, c: 3, }; // 후행 쉼표
function hello(a, b,) {} // 후행 쉼표
객체 선언시 괄호 양 끝 사이의 간격 사용여부 (bracketSpacing)
기본값은 true이고, 객체의 양 끝 간격을 사용할지 여부를 나타냅니다.
{
"bracketSpacing": true
}
true
{ a: 1, b: 2, c: 3 }
false
{a: 1, b: 2, c: 3}
JSX 브라켓 한줄 사용 여부 (jsxBracketSameLine)
기본값은 false이고, JSX 태그를 사용하는경우에 > 기호를 한줄에 사용할지 한줄 내려서 사용할지를 결정합니다.
{
"jsxBracketSameLine": false
}
true
<button
className="prettier-class"
id="prettier-id">
Click Here
</button>
false
<button
className="prettier-class"
id="prettier-id"
>
Click Here
</button>
화살표 함수의 매개변수 표시 형태 (arrowParens)
v2.0.0 버전 이전에는 “avoid” 을 기본값으로 사용하였고, 현재는 “always”를 기본값으로 사용하여 함수의 매개변수에 항상 괄호를 감싸도록 정의되어 있습니다.
{
"arrowParens": "always"
}
“always”
const hello = (message) => console.log(message);
“avoid”
const hello = message => console.log(message);
코드 라인의 끝을 표현하는 방법 (endOfLine)
v2.0.0 이전 버전에서는 auto가 기본값으로 되어있었으나, 현재는 lf 값으로 되어있습니다.
서로 다른 운영체제에서 작업을 하는 경우에 분명 서로 다른 포맷으로 입력될 수 있습니다. 따라서 커밋 이전에 동작하는 훅(Pre-commit Hook)을 만들어서 사용하는 것이 좋습니다. (lint-staged)
{
"endOfLine": "lf"
}
“lf”
줄 바꿈만 사용 (\n)
Linux 및 macOS 및 git repos 내부에서 공통
“crlf”
캐리지 리턴 + 줄 바꿈 문자 (\r\n)
Windows에서 공통으로 사용
“cr”
캐리지 리턴 문자만 사용 (\r)
매우 드물게 사용됨
“auto”
기존 줄 끝 유지
파일 안에 또다른 형식의 코드에도 Prettier를 적용할지 여부 (embeddedLanguageFormatting)
v2.1.0 버전에서 처음 사용 가능하며, 기본값은 “auto” 이고, 파일 안에 다른 형식의 코드에도 Prettier를 적용합니다. 이 옵션을 비활성화 시키고 싶으면 “off” 로 값을 변경하면 됩니다.
{
"embeddedLanguageFormatting": "auto"
}
원하는 옵션을 선택해서 Prettier 설정파일 만들기
JSON:
JSON 형식은 .prettierrc.json 또는 .prettierrc 이름의 파일에서 적용될 수 있습니다.
{
"printWidth": 80,
"tabWidth": 2,
"useTabs": false,
"semi": true,
"singleQuote": true,
"quoteProps": "as-needed",
"trailingComma": "es5",
"bracketSpacing": true,
"jsxBracketSameLine": false,
"arrowParens": "always",
"endOfLine": "lf",
"embeddedLanguageFormatting": "auto"
}
JS:
Javascript 형식은 prettier.config.js 또는 .prettierrc.js 이름의 파일에서 적용될 수 있습니다.
module.exports = {
printWidth: 80,
tabWidth: 2,
useTabs: false,
semi: true,
singleQuote: true,
quoteProps: "as-needed",
trailingComma: "es5",
bracketSpacing: true,
jsxBracketSameLine: false,
arrowParens: "always",
endOfLine: "lf",
embeddedLanguageFormatting: "auto",
};
YAML:
YAML 형식은 .prettierrc.yaml 또는 .prettierrc 이름의 파일에서 적용될 수 있습니다.
printWidth: 80
tabWidth: 2
useTabs: false
semi: true
singleQuote: true
quoteProps: "as-needed"
trailingComma: "es5"
bracketSpacing: true
jsxBracketSameLine: false
arrowParens: "always"
endOfLine: "lf"
embeddedLanguageFormatting: "auto"
TOML:
Toml 형식은 .prettierrc.toml 이름의 파일에서 적용될 수 있습니다.
printWidth = 80
tabWidth = 2
useTabs = false
semi = true
singleQuote = true
quoteProps = "as-needed"
trailingComma = "es5"
bracketSpacing = true
jsxBracketSameLine = false
arrowParens = "always"
endOfLine = "lf"
embeddedLanguageFormatting = "auto"
정리: Prettier 설정하기
- prettier 패키지를 설치합니다.
- 필요한 prettier 플러그인을 설치합니다.
- prettier 설정 파일을 생성합니다.