코딩 컨벤션

Code Convention

General Naming

축약어를 사용하지 않고 작성한다.
e.g. btn ❌ → button ⭕

Components Folder & File Naming

📂components
└ 📂Button(component)
  ├ Button.tsx
  ├ Button.style.ts
  └ Button.stories.js

Component Import & Export

// Button.tsx
function Button() {
  return (
    // ...
  )
}

export default Button

// index.ts
export { default as Button } from './Button/Button'

Styled Components

// Button.style.ts
import styled from '@emotion/styled'
export const CustomButton = styled.button``

// Button.tsx
import { CustomButton } from './Button.style' // * 대신 name으로 임포트
export function Button() {
  return (
    <CustomButton >click me!</CustomButton>
  )
}

Components vs Functions

function Button() { // component - function declaration
  const onClick = () => { // function - arrow function
    //...
  }
}

Import Order

1. 리액트 관련
2. 외부 라이브러리
3. 내부 모듈
4. 스타일

// 리액트 관련
import { useState, useEffect, ... } from 'react'

// 외부 라이브러리
import { throttle, debounce, ... } from "lodash";

// 내부 모듈
// components, hooks, store, utils, assets, interfaces..
import { Button } from 'components'

// 스타일
import { CustomButton } from './Button.style';

CSS

font-size, line-height, margin, padding : rem 사용

Prettier & ESLint

Prettier

{
  "endOfLine": "auto",
  "printWidth": 80,
  "semi": true,
  "singleQuote": true,
  "tabWidth": 2,
  "jsxSingleQuote": true,
  "trailingComma": "all"
}

ESLint

module.exports = {
  root: true,
  env: {
    browser: true,
    node: true,
  },
  extends: [
    'eslint:recommended',
    'plugin:react/recommended',
    'plugin:import/recommended',
    'plugin:import/typescript',
    'plugin:@typescript-eslint/recommended',
    'plugin:prettier/recommended',
    'plugin:storybook/recommended',
  ],
  plugins: [
    'react',
    '@typescript-eslint',
    '@emotion/eslint-plugin',
    'prettier',
  ],
  rules: {
    quotes: ['error', 'single'],
    'jsx-quotes': ['error', 'prefer-single'],
    'react/react-in-jsx-scope': 'off',
    'import/order': [
      'error',
      {
        groups: ['builtin', 'external', 'parent', 'sibling', 'index'],
        pathGroups: [
          {
            pattern: 'react',
            group: 'external',
            position: 'before',
          },
        ],
        alphabetize: {
          order: 'desc',
        },
        'newlines-between': 'always',
      },
    ],
    'import/no-unresolved': 'off',
    'import/named': 'off',
  },
  parser: '@typescript-eslint/parser',
  parserOptions: {
    ecmaFeatures: {
      jsx: true,
    },
  },
};