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

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(){}