React-Native with TypeScript 협업 규칙

Reading time ~1 minute

VSCode Plugin 세팅 공유 각 Plugin마다 setting 관련 json 파일 공유
1. ESLint (Airbnb style)
2. Prettier
3. Auto Import
4. Color Highlight
5. React Native Tools
6. Bracket Pair Colorizer
7. IntelliJ IDEA Keybindings
8. ES7 React/Redux/GraphQL/React-Native snippets
9. vscode-styled-components
npm 라이브러리
1. prop-types
2. styled-components
3. stylelint
4. dimensions
5. react-native-version
gitignore for RN
여기에 명시되지 않은 규칙은 모두 아래 URL의 TypeScript coding convention을 base로 하기
TS Guide
Source code 작성 구조 (하나의 source code 내에서 코드 배치 순서)
Layout > Layout 관련 function > Business logic function > StyleSheet 순으로 배치되게끔
파일 및 디렉토리 이름은 camel case로 한다.
되도록 styling은 styled-components를 이용하여 하기 <참고>
margin이나 padding 등 style 관련 numeric property는 double 타입으로
ex) 8.0, 15.0
<Button />이나 <TextInput />과 같이 closing tag를 생략할 수 있는 경우는 생략

JSX/TSX로 property 작성할 때, 길이순으로 정렬해서 작성하기 단, margin과 padding은 길이에 상관없이 가장 먼저 배치되게끔
ex)

<View style={{
    margin: 15.0,
    padding: 8.0,
    borderRadius: 8.0,
    alignSelf: 'stretch',
    backgroundColor: '#294C84',
}} />