๋ฐ˜์‘ํ˜•

๋“ค์–ด๊ฐ€๋ฉฐ


์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๊ฐœ๋ฐœ์€ ์ฝ”๋“œ ํฌ๋งทํŒ… ๋„๊ตฌ๋กœ Prettier๋ฅผ ๋งŽ์ด ์‚ฌ์šฉํ•œ๋‹ค. Prettier๋Š” .prettierrc (ํ˜น์€ .prettierrc.js) ๊ตฌ์„ฑ ํŒŒ์ผ์— ์›ํ•˜๋Š” ์ฝ”๋“œ ์Šคํƒ€์ผ์„ ์ปค์Šคํ„ฐ๋งˆ์ด์ง• ํ•  ์ˆ˜ ์žˆ๋Š”๋ฐ, ํ•œ๊ตญ์–ด๋กœ ๊ตฌ๊ธ€๋ง ํ•˜๋ฉด ๋งŽ์ด ๋‚˜์˜ค๋Š” ๊ตญ๋ฃฐ ์ปค์Šคํ…€(?)์„ ๋ณ„์ƒ๊ฐ ์—†์ด ์‚ฌ์šฉํ•˜๊ณ  ์žˆ์—ˆ๋‹ค.

// .prettierrc
{
  "singleQuote": true,
  "semi": true,
  "useTabs": false,
  "tabWidth": 2,
  "trailingComma": "all",
  "printWidth": 80
}

 

์‚ฌ์šฉํ•˜๋Š”๋ฐ ํฐ ๋ฌธ์ œ๋Š” ์—†์—ˆ์ง€๋งŒ ์–ธ์ œ ํ•œ ๋ฒˆ ์„ ํ˜ธํ•˜๋Š” ์ฝ”๋“œ ์Šคํƒ€์ผ์— ๋”ฐ๋ผ ์„ค์ •์„ ์†๋ด์•ผ๊ฒ ๋‹ค๋Š” ์ƒ๊ฐ์„ ํ•˜๋˜ ์ฐธ์— ์šฐ์—ฐํžˆ My Code Formatting Guidelines ๋ผ๋Š” ๊ธ€์„ ๋ฐœ๊ฒฌํ–ˆ๋‹ค. ์ด ๊ฐ€์ด๋“œ๋ผ์ธ์„ ์ฐธ๊ณ ํ•˜์—ฌ ์ฃผ์š” ์†์„ฑ์— ๋Œ€ํ•ด ๋” ์ž์„ธํžˆ ์•Œ์•„๋ณด๊ณ  ์ถ”์ฒœ ์„ค์ •๋„ ์ ์šฉํ•ด ๋ณด์ž.

 

 

์ฃผ์š” ์˜ต์…˜


๐Ÿ’ก ๋ชจ๋“  ์˜ต์…˜์˜ ์ถ”์ฒœ๊ฐ’์€ ๊ฐœ์ธ์ ์ธ ์„ ํ˜ธ๊ฐ€ ๋ฐ˜์˜๋๋‹ค.

 

useTabs

์ฝ”๋“œ๋ฅผ ๋“ค์—ฌ์“ฐ๊ธฐ ํ•  ๋•Œ ํƒญ(tab) ๋ฌธ์ž๋ฅผ ์‚ฌ์šฉํ• ์ง€, ์ŠคํŽ˜์ด์Šค(space)๋ฅผ ์‚ฌ์šฉํ• ์ง€ ๊ฒฐ์ •ํ•˜๋Š” ์†์„ฑ. ํƒญ ๋ฌธ์ž๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด ๋“ค์—ฌ์“ฐ๊ธฐ๋ฅผ ์กฐ๊ธˆ ๋” ์˜๋ฏธ์ ์œผ๋กœ(Semantic) ํ‘œ์‹œํ•  ์ˆ˜ ์žˆ๋‹ค. ์ŠคํŽ˜์ด์Šค๋Š” ๋‹ค์–‘ํ•œ ๋ชฉ์ ์œผ๋กœ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์ง€๋งŒ, ํƒญ์€ ์ฃผ๋กœ ๋“ค์—ฌ์“ฐ๊ธฐ์—๋งŒ ์‚ฌ์šฉํ•˜๋ฏ€๋กœ ์ฝ”๋“œ ๊ฐ€๋…์„ฑ์ด ๋†’์•„์งˆ ์ˆ˜ ์žˆ๋‹ค. ๋˜ํ•œ ์Šคํฌ๋ฆฐ ๋ฆฌ๋” ๊ฐ™์€ ๋ณด์กฐ ๊ธฐ์ˆ ์„ ์‚ฌ์šฉํ•ด์„œ ์ฝ”๋“œ๋ฅผ ์ฝ์„ ๋•Œ ํƒญ์„ ์‚ฌ์šฉํ•˜๋ฉด ๋“ค์—ฌ์“ฐ๊ธฐ๋ฅผ ๋” ์‰ฝ๊ฒŒ ์ธ์‹ํ•  ์ˆ˜ ์žˆ๋‹ค.

// ์ŠคํŽ˜์ด์Šค๋Š” · ํƒญ์€ → ๊ธฐํ˜ธ๋กœ ํ‘œ๊ธฐ

// useTabs: false
function example() {
··if (true) {
····console.log("Hello, world!");
··}
}

// useTabs: true
function example() {
→if (true) {
→→console.log("Hello, world!");
→}
}

 

  • ๊ธฐ๋ณธ๊ฐ’: false (์ŠคํŽ˜์ด์Šค๋กœ ๋“ค์—ฌ ์“ฐ๊ธฐ)
  • ์ถ”์ฒœ๊ฐ’: true (ํƒญ ๋ฌธ์ž๋กœ ๋“ค์—ฌ ์“ฐ๊ธฐ)

 

semi

ํ‘œํ˜„์‹ ๋์— ์„ธ๋ฏธ์ฝœ๋ก ์„ ์ž๋™์œผ๋กœ ์ถ”๊ฐ€ํ• ์ง€ ์—ฌ๋ถ€๋ฅผ ๊ฒฐ์ •ํ•˜๋Š” ์†์„ฑ. ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋Š” ์„ธ๋ฏธ์ฝœ๋ก  ์ž๋™ ์‚ฝ์ž… ๊ธฐ๋Šฅ(ASI)์ด ์žˆ์–ด์„œ ์„ธ๋ฏธ์ฝœ๋ก ์„ ์ƒ๋žตํ•ด๋„ ์ฝ”๋“œ๋Š” ์ž‘๋™ํ•˜์ง€๋งŒ, ํŠน์ • ์ƒํ™ฉ์—์„œ ์˜ˆ์ƒ์น˜ ๋ชปํ•œ ์—๋Ÿฌ๊ฐ€ ๋ฐœ์ƒํ•  ์ˆ˜ ์žˆ๊ธฐ ๋•Œ๋ฌธ์— ๋ช…์‹œ์ ์œผ๋กœ ์„ธ๋ฏธ์ฝœ๋ก ์„ ์ถ”๊ฐ€ํ•˜๋Š” ๊ฒƒ์ด ์ข‹๋‹ค. 

 

์•„๋ž˜ ์ฝ”๋“œ์—์„  return ํ‚ค์›Œ๋“œ ๋’ค์— ์„ธ๋ฏธ์ฝœ๋ก ์ด ์ž๋™ ์‚ฝ์ž…๋ผ์„œ ์•„๋ฌด๊ฒƒ๋„ ๋ฐ˜ํ™˜ํ•˜์ง€ ์•Š๋Š” ๋ฌธ์ œ๊ฐ€ ๋ฐœ์ƒํ•œ๋‹ค.

function getValue() {
  return
  { value: 1 };
}

getValue(); // undefined

 

  • ๊ธฐ๋ณธ๊ฐ’: true (ํ‘œํ˜„์‹ ๋์— ์„ธ๋ฏธ์ฝœ๋ก  ์ถ”๊ฐ€)
  • ์ถ”์ฒœ๊ฐ’: true

 

singleQuote

๋ฌธ์ž์—ด์„ ํ‘œ์‹œํ•  ๋•Œ ํฐ๋”ฐ์˜ดํ‘œ(") ๋Œ€์‹  ์ž‘์Œ๋”ฐ์˜ดํ‘œ(')๋ฅผ ์‚ฌ์šฉํ• ์ง€ ์—ฌ๋ถ€๋ฅผ ๊ฒฐ์ •ํ•˜๋Š” ์†์„ฑ. ์ž‘์€๋”ฐ์˜ดํ‘œ๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด HTML ์†์„ฑ๊ณผ ๊ตฌ๋ถ„ํ•˜๊ธฐ ์‰ฌ์›Œ์ง€๋Š” ์žฅ์ ์ด ์žˆ๋‹ค.

// singleQuote: true
const greeting = 'Hello, world!';

// singleQuote: false
const greeting = "Hello, world!";

 

  • ๊ธฐ๋ณธ๊ฐ’: false (ํฐ๋”ฐ์˜ดํ‘œ ์‚ฌ์šฉ)
  • ์ถ”์ฒœ๊ฐ’: true (์ž‘์€๋”ฐ์˜ดํ‘œ ์‚ฌ์šฉ)

 

jsxSingleQuote

JSX์—์„œ ์†์„ฑ์„ ํ‘œ์‹œํ•  ๋•Œ ํฐ๋”ฐ์˜ดํ‘œ(") ๋Œ€์‹  ์ž‘์€๋”ฐ์˜ดํ‘œ(')๋ฅผ ์‚ฌ์šฉํ• ์ง€ ์—ฌ๋ถ€๋ฅผ ๊ฒฐ์ •ํ•˜๋Š” ์†์„ฑ. JSX๋Š” HTML๊ณผ ์œ ์‚ฌํ•œ ๋ฌธ๋ฒ•์„ ์‚ฌ์šฉํ•˜๋ฏ€๋กœ, ์†์„ฑ ๊ฐ’์€ ํฐ๋”ฐ์˜ดํ‘œ๋กœ ๊ฐ์‹ธ๋Š” ๊ฒŒ ์ผ๋ฐ˜์ ์ด๋‹ค.

// jsxSingleQuote: true
<div className='container'>Hello, world!</div>;

// jsxSingleQuote: false
<div className="container">Hello, world!</div>;

 

  • ๊ธฐ๋ณธ๊ฐ’: false (ํฐ๋”ฐ์˜ดํ‘œ ์‚ฌ์šฉ)
  • ์ถ”์ฒœ๊ฐ’: false

 

quoteProps

๊ฐ์ฒด ๋ฆฌํ„ฐ๋Ÿด์˜ ์†์„ฑ ์ด๋ฆ„์„ ๋”ฐ์˜ดํ‘œ๋กœ ๊ฐ์Œ€์ง€ ์—ฌ๋ถ€๋ฅผ ๊ฒฐ์ •ํ•˜๋Š” ์†์„ฑ. ๊ฐ์ฒด ์†์„ฑ ์ด๋ฆ„์— ํ•˜์ดํ”ˆ(-) ๋“ฑ์ด ๋“ค์–ด๊ฐ€๋ฉด ๋”ฐ์˜ดํ‘œ๋กœ ๊ฐ์‹ธ์•ผํ•˜๋Š”๋ฐ ์ด๋•Œ ์ผ๊ด€์„ฑ์„ ์œ„ํ•ด ๋ชจ๋“  ์†์„ฑ์— ๋”ฐ์˜ดํ‘œ๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๊ฒŒ ์ข‹๋‹ค.

// quoteProps: "as-needed"
const user = {
  name: 'John',
  age: 30,
  'email-address': 'john.doe@gmail.com',
};

// quoteProps: "consistent"
// email-address ์†์„ฑ์— ๋”ฐ์˜ดํ‘œ๊ฐ€ ํ•„์š”ํ•˜๋ฏ€๋กœ ์ „์ฒด ์†์„ฑ์— ๋”ฐ์˜ดํ‘œ ์‚ฌ์šฉ
const user = {
  'name': 'John',
  'age': 30,
  'email-address': 'john.doe@gmail.com',
};

 

  • ๊ธฐ๋ณธ๊ฐ’: as-needed (ํ•„์š”ํ•œ ์†์„ฑ์—๋งŒ ๋”ฐ์˜ดํ‘œ ์‚ฌ์šฉ)
  • ์ถ”์ฒœ๊ฐ’: consistent (1๊ฐœ ์ด์ƒ์˜ ์†์„ฑ์— ๋”ฐ์˜ดํ‘œ๊ฐ€ ํ•„์š”ํ•˜๋ฉด ๋ชจ๋“  ์†์„ฑ์— ๋”ฐ์˜ดํ‘œ ์‚ฌ์šฉ)

 

trailingComma

์—ฌ๋Ÿฌ ์ค„๋กœ ์ด๋ฃจ์–ด์ง„ ๋ฐฐ์—ด, ๊ฐ์ฒด ๋ฆฌํ„ฐ๋Ÿด, ํ•จ์ˆ˜ ํ˜ธ์ถœ ํŒŒ๋ผ๋ฏธํ„ฐ ๋“ฑ์˜ ๋งˆ์ง€๋ง‰ ์š”์†Œ ๋’ค์— ์‰ผํ‘œ ์ถ”๊ฐ€ ์—ฌ๋ถ€๋ฅผ ๊ฒฐ์ •ํ•˜๋Š” ์†์„ฑ. ๋งˆ์ง€๋ง‰ ์š”์†Œ ๋’ค์— ์‰ผํ‘œ๋ฅผ ์ถ”๊ฐ€ํ•˜๋ฉด ์ƒˆ๋กœ์šด ์š”์†Œ๋ฅผ ์ถ”๊ฐ€ํ•˜๊ฑฐ๋‚˜ ์ˆœ์„œ๋ฅผ ๋ณ€๊ฒฝํ•  ๋•Œ ๋” ํŽธ๋ฆฌํ•ด์ง€๋Š” ์žฅ์ ์ด ์žˆ๋‹ค.

// trailingComma: "none"
const user = {
  name: 'John',
  age: 30 // ํ›„ํ–‰ ์ฝค๋งˆ ์—†์Œ
};

// trailingComma: "all"
const user = {
  name: 'John',
  age: 30, // ํ›„ํ–‰ ์ฝค๋งˆ ์žˆ์Œ
};

 

  • ๊ธฐ๋ณธ๊ฐ’: "all" (๊ฐ€๋Šฅํ•œ ๋ชจ๋“  ๊ณณ์— ํ›„ํ–‰ ์‰ผํ‘œ ์ถ”๊ฐ€)
  • ์ถ”์ฒœ๊ฐ’: "all"

 

bracketSpacing

๊ฐ์ฒด ๋ฆฌํ„ฐ๋Ÿด์˜ ์–‘์ชฝ ์ค‘๊ด„ํ˜ธ ์•ˆ์ชฝ์— ๊ณต๋ฐฑ ์ถ”๊ฐ€ ์—ฌ๋ถ€๋ฅผ ๊ฒฐ์ •ํ•˜๋Š” ์†์„ฑ. ๊ณต๋ฐฑ์„ ์ถ”๊ฐ€ํ•˜๋ฉด ์ฝ”๋“œ๊ฐ€ ๋” ์ฝ๊ธฐ ์‰ฌ์›Œ์ง„๋‹ค.

// bracketSpacing: false
const user = {name: 'John', age: 30};

// bracketSpacing: true
const user = { name: 'John', age: 30 };

 

  • ๊ธฐ๋ณธ๊ฐ’: true (๊ฐ์ฒด ์ค‘๊ด„ํ˜ธ ์•ˆ์ชฝ์— ๊ณต๋ฐฑ ์ถ”๊ฐ€)
  • ์ถ”์ฒœ๊ฐ’: true

 

arrowParens

ํ™”์‚ดํ‘œ ํ•จ์ˆ˜์˜ ํŒŒ๋ผ๋ฏธํ„ฐ๋ฅผ ๊ด„ํ˜ธ๋กœ ๊ฐ์Œ€์ง€ ์—ฌ๋ถ€๋ฅผ ๊ฒฐ์ •ํ•˜๋Š” ์†์„ฑ. ํ™”์‚ดํ‘œ ํ•จ์ˆ˜๋Š” ํŒŒ๋ผ๋ฏธํ„ฐ๊ฐ€ 1๊ฐœ์ผ ๋• ๊ด„ํ˜ธ๋ฅผ ์ƒ๋žตํ•  ์ˆ˜ ์žˆ์ง€๋งŒ, ๊ด„ํ˜ธ๋ฅผ ํ•ญ์ƒ ํ‘œ์‹œํ•˜๋„๋ก ์„ค์ •ํ•ด์„œ ์ผ๊ด€์„ฑ์„ ์œ ์ง€ํ•  ์ˆ˜ ์žˆ๋‹ค. ์›๋ž˜ 1๊ฐœ์˜€๋˜ ํ•จ์ˆ˜ ํŒŒ๋ผ๋ฏธํ„ฐ๋ฅผ 2๊ฐœ ์ด์ƒ์œผ๋กœ ์ˆ˜์ •ํ•  ๋•Œ ์ผ์ผ์ด ๊ด„ํ˜ธ๋ฅผ ์ถ”๊ฐ€ํ•  ํ•„์š”๊ฐ€ ์—†๋Š” ์žฅ์ ๋„ ์žˆ๋‹ค.

// arrowParens: "avoid"
const getUser = name => `User: ${name}`;

// arrowParens: "always"
const getUser = (name) => `User: ${name}`;

 

  • ๊ธฐ๋ณธ๊ฐ’: "always" (ํ™”์‚ดํ‘œ ํ•จ์ˆ˜ ํŒŒ๋ผ๋ฏธํ„ฐ์— ํ•ญ์ƒ ๊ด„ํ˜ธ ์‚ฌ์šฉ)
  • ์ถ”์ฒœ๊ฐ’: "always"

 

proseWrap

๋งˆํฌ๋‹ค์šด ํŒŒ์ผ์—์„œ ๊ธด ์ค„์„ ์ž๋™์œผ๋กœ ์ค„ ๋ฐ”๊ฟˆ ํ• ์ง€ ์—ฌ๋ถ€๋ฅผ ๊ฒฐ์ •ํ•˜๋Š” ์†์„ฑ. ๋งˆํฌ๋‹ค์šด ํ…์ŠคํŠธ๋Š” ์ผ๋ฐ˜์ ์ธ ์ฝ”๋“œ์™€๋Š” ๋‹ค๋ฅด๊ฒŒ ๊ฐ ๋ธ”๋ก์„ ํ•œ ์ค„๋กœ ๋ฌถ์–ด์„œ ์ฒ˜๋ฆฌํ•˜๋Š” ๊ฒŒ ์ข‹๋‹ค. ์ด๋ ‡๊ฒŒ ํ•˜๋ฉด ๋ฌธ์„œ ํŽธ์ง‘์ž๊ฐ€ ํ…์ŠคํŠธ๋ฅผ ํ‘œ์‹œํ•˜๋Š” ๋ฐฉ์‹์„ ์‰ฝ๊ฒŒ ์ •์˜ํ•  ์ˆ˜ ์žˆ๋‹ค.

 

  • ๊ธฐ๋ณธ๊ฐ’: "preserve" (๊ธฐ์กด ์ค„ ๋ฐ”๊ฟˆ ์œ ์ง€)
  • ์ถ”์ฒœ๊ฐ’: "preserve"

 

htmlWhitespaceSensitivity

HTML ํŒŒ์ผ์—์„œ ๊ณต๋ฐฑ ๋ฌธ์ž๋ฅผ ์–ด๋–ป๊ฒŒ ์ฒ˜๋ฆฌํ• ์ง€ ๊ฒฐ์ •ํ•˜๋Š” ์†์„ฑ. "css" ๋กœ ์„ค์ •ํ•˜๋ฉด HTML ์š”์†Œ์˜ display ์†์„ฑ์— ๋”ฐ๋ผ ๊ณต๋ฐฑ์„ ์ฒ˜๋ฆฌํ•œ๋‹ค. inline, inline-block ์š”์†Œ๋Š” ๊ณต๋ฐฑ์„ ์œ ์ง€ํ•˜๊ณ , block ์š”์†Œ๋Š” ๊ณต๋ฐฑ์„ ์ œ๊ฑฐํ•œ๋‹ค. "css" ๋กœ ์„ค์ •ํ•˜๋ฉด CSS๊ฐ€ HTML์˜ ์‹œ๊ฐ์  ๋ ˆ์ด์•„์›ƒ์„ ์ •์˜ํ•˜๋Š” ๋ฐฉ์‹์„ ๋ฐ˜์˜ํ•˜๊ธฐ ๋•Œ๋ฌธ์— ์ผ๊ด€์„ฑ์„ ์œ ์ง€ํ•  ์ˆ˜ ์žˆ๋Š” ์žฅ์ ์ด ์žˆ๋‹ค.

<!-- htmlWhitespaceSensitivity: 'css' -->
<div>
  <span>ํ…์ŠคํŠธ</span> <span>ํ…์ŠคํŠธ</span>
</div>

<!-- htmlWhitespaceSensitivity: 'strict' (๋ชจ๋“  ๊ณต๋ฐฑ ์œ ์ง€) -->
<div>
  <span>ํ…์ŠคํŠธ</span> <span>ํ…์ŠคํŠธ</span>
</div>

<!-- htmlWhitespaceSensitivity: 'ignore' (๋ชจ๋“  ๊ณต๋ฐฑ ์ œ๊ฑฐ) -->
<div>
  <span>ํ…์ŠคํŠธ</span><span>ํ…์ŠคํŠธ</span>
</div>

 

  • ๊ธฐ๋ณธ๊ฐ’: "css" (display ์†์„ฑ์— ๋”ฐ๋ผ ๊ณต๋ฐฑ ์ฒ˜๋ฆฌ)
  • ์ถ”์ฒœ๊ฐ’: "css"

 

endOfLine

ํŒŒ์ผ์˜ ์ค„ ๋ ๋ฌธ์ž๋ฅผ ๊ฒฐ์ •ํ•˜๋Š” ์†์„ฑ. ์šด์˜์ฒด์ œ๋งˆ๋‹ค ์ค„ ๋์„ ์ฒ˜๋ฆฌํ•˜๋Š” ๋ฐฉ์‹์ด ๋‹ค๋ฅด๊ธฐ ๋•Œ๋ฌธ์— ์ด๋ฅผ ํ†ต์ผํ•  ํ•„์š”๊ฐ€ ์žˆ๋‹ค. macOS, Linux ๊ฐ™์€ Unix ๊ณ„์—ด ์‹œ์Šคํ…œ์—์„  LF(Line Feed, \n)๋ฅผ ์‚ฌ์šฉํ•˜๊ณ , Windows์—์„  CRLF(Carriage Return and Line Feed, \r\n)๋ฅผ ์‚ฌ์šฉํ•œ๋‹ค. Windows์—์„  LF์™€ CRLF๋ฅผ ๋ชจ๋‘ ์ง€์›ํ•˜๋Š” ๋ฐ˜๋ฉด, Unix ๊ณ„์—ด์€ LF๋งŒ ์ธ์‹ํ•  ์ˆ˜ ์žˆ๊ธฐ ๋•Œ๋ฌธ์— ํ˜ธํ™˜์„ฑ์„ ์œ„ํ•ด LF๋ฅผ ๊ธฐ๋ณธ์œผ๋กœ ์‚ฌ์šฉํ•˜๋Š” ๊ฒŒ ์ข‹๋‹ค.

 

  • ๊ธฐ๋ณธ๊ฐ’: "lf" (์ค„ ๋ ๋ฌธ์ž๋ฅผ Line Feed๋กœ ์‚ฌ์šฉ)
  • ์ถ”์ฒœ๊ฐ’: "lf"

 

embeddedLanguageFormatting

HTML, Markdown ๋“ฑ์— ํฌํ•จ๋œ ์ฝ”๋“œ ๋ธ”๋ก์˜ ํฌ๋งทํŒ… ์—ฌ๋ถ€๋ฅผ ๊ฒฐ์ •ํ•˜๋Š” ์†์„ฑ. "auto"๋กœ ์„ค์ •ํ•˜๋ฉด HTML <script> ํƒœ๊ทธ ์•ˆ์— ์žˆ๋Š” ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์ฝ”๋“œ๋‚˜, Markdown ํŒŒ์ผ ๋‚ด ์ฝ”๋“œ ๋ธ”๋ก ๋“ฑ์˜ ๋‚ด์šฉ์„ ์ž๋™์œผ๋กœ ๊ฐ์ง€ํ•˜๊ณ  ํฌ๋งทํŒ… ํ•œ๋‹ค.

 

  • ๊ธฐ๋ณธ๊ฐ’: "auto" (์ž„๋ฒ ๋“œ๋œ ์ฝ”๋“œ ๋ธ”๋ก์„ ์ž๋™์œผ๋กœ ๊ฐ์ง€ํ•˜๊ณ  ํฌ๋งทํŒ…)
  • ์ถ”์ฒœ๊ฐ’: "auto"

 

singleAttributePerLine

HTML, JSX, Vue ํƒœ๊ทธ์—์„œ ๊ฐ ์†์„ฑ์„ ๊ฐœ๋ณ„ ์ค„์— ๋ฐฐ์น˜ํ• ์ง€ ์—ฌ๋ถ€๋ฅผ ๊ฒฐ์ •ํ•˜๋Š” ์†์„ฑ. ์š”์†Œ ์†์„ฑ์„ ํ•œ ์ค„์— ๋ฐฐ์น˜ํ•˜๋ฉด ๊ตฌ์กฐ ํŒŒ์•…์ด ์‰ฌ์›Œ์ง€๊ณ , ๊ณต๊ฐ„์„ ๋” ํšจ์œจ์ ์œผ๋กœ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋‹ค.

// singleAttributePerLine: false
<Button color="blue" size="large" onClick={handleClick} />

// singleAttributePerLine: true
<Button
  color="blue"
  size="large"
  onClick={handleClick}
/>

 

  • ๊ธฐ๋ณธ๊ฐ’: false (๊ฐ€๋Šฅํ•˜๋ฉด ํ•œ ์ค„์— ์—ฌ๋Ÿฌ ์†์„ฑ ๋ฐฐ์น˜)
  • ์ถ”์ฒœ๊ฐ’: false

 

 

์ตœ์ข… ์„ค์ •


// .prettierrc.js

module.exports = {
  // ๋“ค์—ฌ์“ฐ๊ธฐ ๋„ˆ๋น„ 2์นธ
  tabWidth: 2,
  // ๋“ค์—ฌ์“ฐ๊ธฐ์— ํƒญ ๋ฌธ์ž ์‚ฌ์šฉ
  useTabs: true,
  // ์ฝ”๋“œ ๋งˆ์ง€๋ง‰์— ์„ธ๋ฏธ์ฝœ๋ก  ์ถ”๊ฐ€
  semi: true,
  // ๋ฌธ์ž์—ด์— ์ž‘์€๋”ฐ์˜ดํ‘œ(') ์‚ฌ์šฉ
  singleQuote: true,
  // JSX ์†์„ฑ๊ฐ’์— ํฐ๋”ฐ์˜ดํ‘œ("") ์‚ฌ์šฉ
  jsxSingleQuote: false,
  // ๊ฐ์ฒด ์†์„ฑ์— ๋”ฐ์˜ดํ‘œ๊ฐ€ ํ•„์š”ํ•œ ์†์„ฑ์ด ํ•˜๋‚˜๋ผ๋„ ์žˆ์œผ๋ฉด, ๋ชจ๋“  ์†์„ฑ์— ๋”ฐ์˜ดํ‘œ ์‚ฌ์šฉ
  quoteProps: 'consistent',
  // ์—ฌ๋Ÿฌ ์ค„๋กœ ์ด๋ฃจ์–ด์ง„ ๊ฐ์ฒด, ๋ฐฐ์—ด, ํ•จ์ˆ˜ ํ˜ธ์ถœ ํŒŒ๋ผ๋ฏธํ„ฐ ๋“ฑ์˜ ๋งˆ์ง€๋ง‰ ์š”์†Œ ๋’ค์— ํ•ญ์ƒ ์‰ผํ‘œ ์ถ”๊ฐ€
  trailingComma: 'all',
  // ๊ฐ์ฒด ์–‘์ชฝ ์ค‘๊ด„ํ˜ธ ์•ˆ์ชฝ์— ํ•ญ์ƒ ๊ณต๋ฐฑ ์ถ”๊ฐ€
  bracketSpacing: true,
  // ํ™”์‚ดํ‘œ ํ•จ์ˆ˜ ํŒŒ๋ผ๋ฏธํ„ฐ์— ํ•ญ์ƒ ๊ด„ํ˜ธ ์‚ฌ์šฉ
  arrowParens: 'always',
  // ๋งˆํฌ๋‹ค์šด ํŒŒ์ผ์—์„œ ๊ธฐ์กด ์ž‘์„ฑ๋œ ๋Œ€๋กœ ์ค„๋ฐ”๊ฟˆ ์œ ์ง€
  proseWrap: 'preserve',
  // HTML ํŒŒ์ผ์—์„œ CSS display ์†์„ฑ์— ๋”ฐ๋ผ ๊ณต๋ฐฑ ์ฒ˜๋ฆฌ
  htmlWhitespaceSensitivity: 'css',
  // ํŒŒ์ผ์˜ ์ค„ ๋์„ Unix ์Šคํƒ€์ผ ์ค„๋ฐ”๊ฟˆ(\n, line feed)์œผ๋กœ ์„ค์ •
  endOfLine: 'lf',
  // HTML, Markdown ๋“ฑ์— ํฌํ•จ๋œ ์ฝ”๋“œ ๋ธ”๋ก ์ž๋™ ํฌ๋งทํŒ…
  embeddedLanguageFormatting: 'auto',
  // HTML, JSX, Vue ํƒœ๊ทธ์—์„œ ๊ฐ€๋Šฅํ•œ ๊ฒฝ์šฐ ํ•œ ์ค„์— ์—ฌ๋Ÿฌ ์†์„ฑ ๋ฐฐ์น˜
  singleAttributePerLine: false,
};

 


๊ธ€ ์ˆ˜์ •์‚ฌํ•ญ์€ ๋…ธ์…˜ ํŽ˜์ด์ง€์— ๊ฐ€์žฅ ๋น ๋ฅด๊ฒŒ ๋ฐ˜์˜๋ฉ๋‹ˆ๋‹ค. ๋งํฌ๋ฅผ ์ฐธ๊ณ ํ•ด ์ฃผ์„ธ์š”
๋ฐ˜์‘ํ˜•