• Contents Table

1️⃣ 스타일 컨벤션

Prettier

Prettier란 정해진 규칙에 따라 자동으로 코드 스타일을 정리 해주는 도구입니다.

.prettierrc.js는 다음과 같이 통일합니다.

{
  "bracketSpacing": true, // 객체 리터럴에서 괄호에 공백 삽입
  "jsxBracketSameLine": false, // JSX의 마지막 `>`를 다음 줄로 내릴지 여부
  "jsxSingleQuote": true, // JSX에 홑따옴표 사용 여부
  "singleQuote": true, // 홑따옴표 사용 여부
  "proseWrap": "preserve", // markdown 텍스트의 줄바꿈 방식 (v1.8.2)
  "semi": true, // 세미콜론 사용 여부
  "printWidth": 100, // 줄 바꿈 할 폭 길이
  "endOfLine": "auto", // EoF 방식, OS별로 처리 방식이 다름
  "useTabs": false, // 탭 사용 여부
  "tabWidth": 2, // 탭 너비
  "trailingComma": "all", // 여러 줄을 사용할 때, 후행 콤마 사용 방식
  "arrowParens": "always" // 화살표 함수 괄호 사용 여부
}

• bracketSpacing: true - 중괄호 양옆에 한 칸 공백을 추가합니다.
• jsxBracketSameLine: false -
• jsxSingleQuote: false - JSX에서 쌍 따옴표를 사용합니다.
• singleQuote: false - 홑따옴표가 아닌 쌍따옴표를 사용
• proseWrap: “preserve” -
• semi: true - statement 마지막에 세미콜론을 찍음
• printWidth: 100 - 선호되는 한 줄의 길이
• endofLine: “auto” -
• useTabs: false - 탭을 사용하지 않고 스페이스를 사용
• tabWidth: 2 - 탭을 할 경우 2 스페이스
• trailingComma: 'all' - 여러줄로 나뉘었을 때는 쉼표를 사용
• arrowParens: 'always' - 화살표 함수에서 괄호 사용 의무화

대부분 프리티어 option의 default값이라 따로 설정해 줄 필요가 없지만 이해를 돕고자 명시적으로 적어놓았습니다.

ESlint