[2] Coding Convention 정하기

개발환경
Language : typescript
Formatter : prettier
Linters : stylelint, eslint

React코드 및 CSS 스타일은 Airbnb 룰을 기본으로 하되, 아래 항목들을 별도로 설정하여 작업

• 라인길이: 100자

• import문

  1. Import순서는 대소문자 구별없이 알파벳 순서로 정렬(eslint option:??)
  2. 한라인에 여러 클래스, 함수, 변수 등 Import 허용 ex) import { observable, action, flow } from 'mobx';

• Class 내의 1줄짜리 멤버변수 선언은 빈줄 삽입 X
  "@typescript-eslint/lines-between-class-members":"off"

• props를 쓰지않고, 인자를 풀어서 쓸것. ex) function Header(props) X, function Header({title, content}) O

• 주석을 작성시에는 아래 범주를 앞에 달아줄 것. ex) // FIXME : 서버와 연결되지 않으므로 백엔드에 연동되도록 수정할 것

TODO : 아직 하지 않은 일FIXME : 오작동을 일으킨다고 알려진 코드HACK : 아름답지 못한 해결책XXX : 위험! 큰문제가 있다

• 카멜케이스 사용시, 축약형의 첫글자만 대문자로 작성 ex) herssAI X, herssAi O, imagePC X, imagePc O
• 폴더명은 카멜케이스로 단수, 복수를 구분하여 작성 ex) components, network, headerComponents
• JSX or TSX 파일명은 defualt로 export할 컴포넌트명과 일치 ex) Header.tsx, export default Header
• 이미지 파일명은 카멜케이스로 작성
• enum은 사용하지 않고, typescript의 type으로 사용
• class method는 arrow function으로 작성(binding문제 예방)
• props에 대한 interface는 컴포넌트 선언 위에 작성
• 함수형 컴포넌트는 function 키워드를 앞에 붙여서 선언하고(const로 선언X), export문은 컴포넌트 선언 바로 아래에 작성
• CSS색상은 RGB 값으로 통일
• font-size는 px만 사용
• div나 img등의 크기단위는 px과 %만 사용
• styled compoent를 포함한 컴포넌트 외부의 코드는 컴포넌트 선언보다 아래에 작성
• 한 파일에 styled component가 여러개 있을때는 알파뱃 순서로 정렬하는 것을 "권장"(준수하지 않아도 무방함)
• url은소문자와 하이픈만을 이용하여 작성

아래는 작성시 참고해야할 세부내용임

#Airbnb React 스타일 가이드https://firejune.com/1795/Airbnb%EC%9D%98+React%252FJSX+%EC%8A%A4%ED%83%80%EC%9D%BC+%EA%B0%80%EC%9D%B4%EB%93%9C

#Airbnb CSS 스타일 가이드 https://airbnb.io/javascript/css-in-javascript/