Code Convention

ESLint

{
  "parser": "@typescript-eslint/parser",
  "extends": [
    "prettier",
    "airbnb",
    "airbnb-typescript",
    "airbnb/hooks",
    "plugin:@typescript-eslint/recommended",
    "plugin:@typescript-eslint/recommended-requiring-type-checking"
  ],
  "plugins": ["prettier", "react", "@typescript-eslint", "react-hooks"],
  "parserOptions": {
    "project": "./tsconfig.json"
  }
}

export

값을 내보낼 때에는 export 사용합니다. 
export default는 사용하지 않습니다.

Prettier

{
  "printWidth": 80,
  "tabWidth": 2,
  "useTabs": false,
  "semi": true,
  "singleQuote": true,
  "quoteProps": "consistent",
  "trailingComma": "es5",
  "bracketSpacing": true,
  "arrowParens": "always"
}

Router

router는 단어와 단어를 -으로 구분합니다.
ex) first-page

Folder

폴더 이름은 camelCase로 작성합니다. 복수 취급합니다.
ex) pages, components, hooks, utils

File

파일 이름은 PascalCase를 사용합니다. 용도에 따라 단수, 복수 취급합니다.
ex) File.tsx, Files.tsx

Variable

변수명은 CamelCase로 작성합니다.
ex) const variable:string = 'variableName'

Styled component

스타일 컴퍼넌트의 이름은 _(언더바) + PascalCase를 사용합니다.
ex) const _StyledComponent = styled.div``

Type, Interface

Type과 Interface, Component의 이름은 PascalCase를 사용합니다.
ex) type TypeName
interface InterfaceName
ComponentName

Function

함수명은 camelCase를 사용합니다. JSX를 리턴하는 컴포넌트 제외 arrow function만을 사용합니다.
ex) const functionName = () => {}