👩‍💻 Coding Convention

코딩 컨벤션

import 규칙

• 외부 모듈과 내부모듈을 구분하여 사용한다. 외부모듈과 내부모듈 선언시 공백으로 구분한다. 내부모듈의 경우 절대 경로를 사용하는 모듈과 상대 경로를 사용하는 모듈을 추가로 구분한다.

import axios from 'axios'; 

import router from '@service/router'

import util from './util'

변수, 함수, 클래스 명명 규칙

• 파일네이밍

  • 컴포넌트 → PascalCase
  • 외 → cammelCase

• 상수 → SNAKE_CASE

• 함수 및 변수 → cammelCase

• 컴포넌트 → PascalCase

• 창의적인 단어 쓰지 않기 😁 (제일 떠오르기 쉽고 기본적인 단어)

• 변수는 명사형으로 작성

• 함수는 서술형으로 작성

기타 코딩 규칙

• html태그 선언 시 최대한 시멘틱한 태그 사용
• 모두가 approve 한 후에 merge 할 수 있다
• 코드 리뷰는 필수! 꼭 확인하기! 😠
• html id + className은 snake_case로 한다.

eslint & prettier

• 기본적으로 eslint airbnb를 따른다
• 추가하고 싶은 룰이 있을 경우 의견을 제시해서 논의 후에 반영 할 수 있다

eslint

module.exports = {
  parser: '@typescript-eslint/parser',
  plugins: ['@typescript-eslint', 'react-hooks'],
  extends: [
    'airbnb-base',
    'plugin:react/recommended',
    'plugin:jsx-a11y/recommended',
    'plugin:import/errors',
    'plugin:import/warnings',
    'plugin:prettier/recommended',
    'plugin:@typescript-eslint/recommended',
  ],
  rules: {
    'linebreak-style': 0,
    'import/prefer-default-export': 0,
  },
  settings: {
    'import/resolver': {
      node: {
        extensions: ['.js', '.jsx', '.ts', '.tsx'],
      },
    },
  },
};

prettier

{
  "singleQuote": true,
  "parser": "typescript",
  "semi": true,
  "useTabs": false,
  "tabWidth": 2,
  "trailingComma": "all",
  "printWidth": 100,
  "arrowParens": "always"
}