TIL 23-07-03

프리티어 기본 규칙

module.exports = {
  trailingComma: "es5",
  tabWidth: 4,
  semi: false,
  singleQuote: true,
};

프리티어 설치

npm i prettier -D

프리티어.JS 설정

{
  "printWidth": 80, //  줄 바꿈 할 폭 길이
  "tabWidth": 2, // 탭 너비 
  "singleQuote": true, // single 쿼테이션 사용 여부
  "trailingComma": "all", // 여러 줄을 사용할 때, 후행 콤마 사용 방식
  "jsxBracketSameLine": false, // JSX의 마지막 `>`를 다음 줄로 내릴지 여부
}

프리티어 스크립트

{
    "name": "여러분의 프로젝트 이름일거예요",
    "version": "1.0.0",
    "scripts": {
        "start": "node app.js",
        "prettify": "prettier --write *.js **/*.js"
    },
... 생략
}

스크립트 실행

npm run prettify

규칙
es5: JavaScript 버전중 하나인 ES5에서 허용되는 부분까지만 콤마를 뒤에 붙이는 규칙
none: 가능한 모든 코드에서 코드 뒤에 붙은 콤마를 제거
all : ES8 이전의 버전까지 허용되는 모든 부분에 콤마를 붙이도록 함
권장하는 규칙은 "es5" 혹은 "none

tabWidth: 4 : 들여쓰기
semi: false : 코드 뒤에 세미콜론을 붙일지 말지 결정하는 규칙
true인 경우 세미콜론을 항상 붙이도록 함
false로 하는 경우 위 사진처럼 세미콜론이 모두 제거됨
자바스크립트는 세미콜론이 없어도 정상적으로 동작할 수 있는 언어이기 때문에 존재할 수 있는 옵션
항상 true로 권장
singleQuote: true : 문자열을 표기하는 문법에서 외따옴표를 사용할지, 쌍따옴표를 사용할지의 여부를 설정하는 규칙
true로 설정해두어 외따옴표를 사용하는것을 권장
arrawParens: "always" : Arrow function에서 파라메터 부분에 괄호를 항상 붙여주는 규칙
항상 "always" 권장

정리

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