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"
  }
}

Prettier

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

Folder

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

File

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

Variable

변수명은 카멜 케이스로 작성합니다.
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를 사용합니다.
ex) function functionName(){}