# Prettier ์„ค์ • ํ•˜๊ธฐ

ํ˜‘์—… ์‹œ, ์—๋Ÿฌ๋ฅผ ์ค„์ด๊ณ  ์ผ๊ด€์ ์ธ ์ฝ”๋“œ๋ฅผ ์ž‘์„ฑํ•˜๊ธฐ ์œ„ํ•ด ์ฝ”๋“œ ํฌ๋งทํ„ฐ ํ”„๋ฆฌํ‹ฐ์–ด(Prettier)๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๋ฐฉ๋ฒ•์ด ์žˆ์Šต๋‹ˆ๋‹ค. Prettier๋ฅผ ํ”„๋กœ์ ํŠธ์— ์„ธํŒ…ํ•˜๋Š” ๋ฐฉ๋ฒ•๊ณผ commit ์ „์— ์ „์ฒด ์ฝ”๋“œ๋ฅผ ๋Œ€์ƒ์œผ๋กœ prettier๋ฅผ ์‹คํ–‰ํ•ด์„œ ํฌ๋งทํŒ… ํ›„์— commit์„ ํ•˜๋„๋ก ํ•˜๋Š” ๋ฐฉ๋ฒ•์— ๋Œ€ํ•ด ์•Œ์•„๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค.

# ํฌ๋งทํŒ…ํ•  prettier ์„ค์ •ํŒŒ์ผ ์ƒ์„ฑํ•˜๊ธฐ

ํ”„๋กœ์ ํŠธ ๋ฃจํŠธ ๋””๋ ‰ํ† ๋ฆฌ์—์„œ .prettierrc ์ƒ์„ฑํ•ฉ๋‹ˆ๋‹ค.

{
  "singleQuote": true,
  "semi": true,
  "useTabs": false,
  "tabWidth": 2,
  "trailingComma": "all",
  "printWidth": 120,
  "parser": "babel",
  "bracketSpacing": true,
  "arrowParens": "avoid"
}

TIP

๊ฐ ์˜ต์…˜์— ๋Œ€ํ•ด ์ž์„ธํžˆ ์•Œ๊ณ  ์‹ถ๋‹ค๋ฉด prettier ๊ณต์‹ ์‚ฌ์ดํŠธ (opens new window)๋ฅผ ์ฐธ๊ณ ํ•˜์„ธ์š”.

# vscode์—์„œ prettier ์„ค์น˜ ๋ฐ ์‹คํ–‰ํ•˜๊ธฐ

  1. Extensions(mac : command + shift + x, window : control + shift + x)์—์„œ Prettier๋ฅผ ์„ค์น˜ํ•ฉ๋‹ˆ๋‹ค.

  2. ์„ค์น˜๊ฐ€ ์™„๋ฃŒ๋˜๋ฉด command + p๋ฅผ ๋ˆ„๋ฅด๊ณ  > Format Document๋ฅผ ์‹คํ–‰ํ•ฉ๋‹ˆ๋‹ค.

# vscode์—์„œ ์ €์žฅ(command + s)์‹œ ์ž๋™์œผ๋กœ prettier ์‹คํ–‰ํ•˜๊ธฐ

  1. command + ,๋ฅผ ๋ˆ„๋ฅด๊ณ  ๊ฒ€์ƒ‰์— format on save๋ฅผ ์ž…๋ ฅํ•ฉ๋‹ˆ๋‹ค.

  2. Editor: Format on Save๋ฅผ ์ฒดํฌํ•˜๊ณ  vscode๋ฅผ ์žฌ๋ถ€ํŒ…ํ•ฉ๋‹ˆ๋‹ค.

  3. ๋งŒ์•ฝ ์ €์žฅ์‹œ ํฌ๋งทํŒ…์ด ์•ˆ๋œ๋‹ค๋ฉด ๋‹ค์‹œ command + ,๋ฅผ ๋ˆ„๋ฅด๊ณ  ๊ฒ€์ƒ‰์ฐฝ์— default formatter๋ฅผ ๊ฒ€์ƒ‰ํ•˜๊ณ  none์œผ๋กœ ๋˜์–ด ์žˆ์œผ๋ฉด Prettier - Code formatter๋กœ ๋ณ€๊ฒฝ ํ›„ ์žฌ๋ถ€ํŒ…ํ•ฉ๋‹ˆ๋‹ค.

# husky๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ commit ์ „์— prettier ์ „์ฒด ํŒŒ์ผ์— ์ ์šฉํ•˜๊ธฐ

ํ—ˆ์Šคํ‚ค(husky)๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด Prettier๋ฅผ ์„ค์น˜ํ•˜์ง€ ์•Š์•„๋„ commit ์ „์— lint-staged์— ์„ค์ •๋œ ํŒŒ์ผ ์ค‘์— ๋ณ€๊ฒฝ๋œ ํŒŒ์ผ์„ ๋Œ€์ƒ์œผ๋กœ ์ž๋™์œผ๋กœ ํฌ๋งทํŒ…ํ•˜์—ฌ commit ํ•ฉ๋‹ˆ๋‹ค.

TIP

husky๋Š” git hook์„ ์‰ฝ๊ฒŒ ๊ด€๋ฆฌํ•  ์ˆ˜ ์žˆ๋Š” ๋„๊ตฌ์ž…๋‹ˆ๋‹ค. git push, commit ๋“ฑ์ด ์‹œํ–‰๋˜๊ธฐ ์ „์ด๋‚˜ ํ›„์— ์›ํ•˜๋Š” ์Šคํฌ๋ฆฝํŠธ๋ฅผ ์‹คํ–‰์‹œ์ผœ์ค๋‹ˆ๋‹ค. ๋” ์ž์„ธํ•œ ๋‚ด์šฉ์„ ์•Œ๊ณ  ์‹ถ๋‹ค๋ฉด husky ๊ณต์‹ ์‚ฌ์ดํŠธ (opens new window)๋ฅผ ์ฐธ๊ณ ํ•˜์„ธ์š”.

  1. ์œ„์—์„œ ์„ค๋ช…๋“œ๋ฆฐ ํฌ๋งทํŒ…ํ•  prettier ์„ค์ •ํŒŒ์ผ ์ƒ์„ฑํ•˜๊ธฐ์„ ๋งŒ๋“ญ๋‹ˆ๋‹ค.

  2. ๊ด€๋ จ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ์„ค์น˜ํ•ฉ๋‹ˆ๋‹ค.

yarn add -D husky@4 lint-staged prettier
  1. package.json์— ์•„๋ž˜์™€ ๊ฐ™์ด ์ถ”๊ฐ€ํ•ฉ๋‹ˆ๋‹ค.
{
  ...
  "scripts": {
    ...
    "init-husky": "npx husky install .husky",
    "lint-front": "lint-staged"
  },
  "lint-staged": {
    // ๋ณ€๊ฒฝ๋œ js, vue, json, md ํŒŒ์ผ์„ ๋Œ€์ƒ์œผ๋กœ prettier๋ฅผ ์‹คํ–‰ํ•ฉ๋‹ˆ๋‹ค.
    "src/**/*.{js,json,md}": [
      "prettier --write",
      "git add"
    ]
  },
}

  1. husky๋ฅผ ์„ค์น˜ํ•ฉ๋‹ˆ๋‹ค.
yarn init-husky

์ดํ›„ ์ƒ์„ฑ๋œ .husky ํŒŒ์ผ ํ•˜์œ„์— pre-commit์ด๋ผ๋Š” ํŒŒ์ผ์„ ํ•˜๋‚˜ ์ƒ์„ฑํ•˜๊ณ  ์•„๋ž˜ ์ฝ”๋“œ๋ฅผ ๋„ฃ์Šต๋‹ˆ๋‹ค.

#!/bin/sh
. "$(dirname "$0")/_/husky.sh"

yarn lint-front

  1. ์ดํ›„ ๋‹ค๋ฅธ ํŒŒ์ผ์„ ๋ณ€๊ฒฝํ•˜๊ณ  commit ํ•˜๋ฉด ํŒŒ์ผ์ด ํฌ๋งทํŒ… ๋˜์–ด commit ๋˜๋Š”์ง€ ํ™•์ธํ•ฉ๋‹ˆ๋‹ค.

  2. ๋งŒ์•ฝ ์•„๋ž˜์™€ ๊ฐ™์€ ์—๋Ÿฌ๋กœ commit์ด ์‹คํŒจ ํ•œ๋‹ค๋ฉด ํ„ฐ๋ฏธ๋„์— ์•„๋ž˜ ์ฝ”๋“œ๋ฅผ ๋„ฃ์Šต๋‹ˆ๋‹ค.

husky ์—๋Ÿฌ

๊นƒ ํ›… ์‹คํ–‰ ๊ถŒํ•œ์„ ๋ถ€์—ฌํ•˜๋Š” ์ฝ”๋“œ์ž…๋‹ˆ๋‹ค.

chmod ug+x ./husky/*
chmod ug+x .git/hooks/*
  1. vscode๋ฅผ ์žฌ๋ถ€ํŒ…ํ•˜๊ณ  ๋‹ค์‹œ ํŒŒ์ผ์„ ๋ณ€๊ฒฝํ•˜์—ฌ commit ํ•ฉ๋‹ˆ๋‹ค.