🧷 Prettier 터미널 설정

1. prettier 설치 (.prettierrc.js 파일 초기 설정)

npm i prettier -D

2-1. 스크립트 package.json

2-2. "scripts" 항목 안에 추가

"prettify": "prettier --write *.js **/*.js"

3-1. 해당 명령어로 스크립트 실행

npm run prettify

3-2. package.json 파일이 이상하다면

npm init

npm install --save

---

🧷 Prettier 규칙

권장 규칙

module.exports = {
  trailingComma: 'es5',
  tabWidth: 2,
  semi: true,
  singleQuote: true,
  arrowParens: 'always',
};

trailingComma

trailingComma: "es5"

• 들여쓰기 한번에 얼만큼의 스페이스(여백)로 구성할지에 대한 설정
• es5 : JavaScript 버전중 하나인 ES5에서 허용되는 부분까지만 콤마를 뒤에 붙이는 규칙
• none : 가능한 모든 코드에서 코드 뒤에 붙은 콤마(,) 를 제거 (에러가 나도록 다 제거하는것은 아님)
• all : ES8 이전의 버전까지 허용되는 모든 부분에 콤마를 붙임
  = all 규칙에 해당하는 문법을 지원하지 않는 브라우저 존재
  -> 현재 권장되는 규칙은 es5 혹은 none

tabWidth

tabWidth: (2 > 4)

• 들여쓰기 한번에 얼만큼의 스페이스(여백)로 구성할지에 대한 설정
• 2개의 여백으로 들여쓰기를 했었던 파일
  -> 4개의 여백으로 바뀜
• 최근 스크립트 언어들의 들여쓰기는 2개~4개로 하는것이 일반적인 관례
• 만약 코드의 들여쓰기가 잘 구분이 안 됨
  -> 4개, 코드가 길어지는게 싫다면 2개를 권장

semi

semi: true

• 코드 뒤에 세미콜론을 붙일지 말지 결정하는 규칙
• true인 경우 세미콜론을 항상 붙임
• false로 하는 경우 세미콜론이 모두 제거
  (자바스크립트 -> 세미콜론이 없어도 정상적으로 동작할 수 있는 언어이기 때문에 존재할 수 있는 옵션)
• 이 규칙은 항상 true로 권장
  -> 코드가 어디서 끝맺음을 하는지 코드의 맥락을 파악하는데 도움을 주는 중요한 요소

singleQuote

singleQuote: true

• 문자열을 표기하는 문법 :
  외따옴표('')를 사용할지, 쌍따옴표("")를 사용할지의 여부를 설정하는 규칙
• true로 설정 : 외따옴표 (권장)
• false로 설정 : 쌍따옴표

arrawParens

arrawParens: "always"

• Arrow function에서 파라메터 부분 -> 괄호를 항상 붙여주는 규칙
• 항상 "always"로 하는걸 권장
  (Arrow function이 아무리 편리하고 코드를 짧게 쓰도록 도와준다고 해도,
  괄호가 있는것이 일관적인 코드를 작성하는것에 도움이 됨
  일관적인 코드 = 가독성 향상 ⬆)