코드 스타일 결정

기본 코드 스타일 : “에어비엔비 스타일 가이드” Base

GitHub - tipjs/javascript-style-guide: Airbnb JavaScript 스타일 가이드 한국어

기타 설정

• 함수 모듈 : 화살표 + exports선언은 밑에서

  const sum = () => {}; 
  // 변수명에 담아주는 무기명 화살표 함수.
  
  modules.exports = sum; 
  // exports는 밑에서.
  

• 콜백함수 : 화살표함수

  array.map(() => {})
  

관련 프로젝트 설정(Prettier, ESLint, gitignore)

Prettier

npm install --save-dev prettier

// .prettierrc.json
{
  "singleQuote": false,
  "semi": true,
  "bracketSpacing": true,
  "trailingComma": "all",
  "jsxSingleQuote": false,
  "quoteProps": "as-needed",
  "endOfLine": "auto",
  "tabWidth": 2
}

• prettier 설정 설명
• (참고) prettier 설정방법과 주요 속성
• 💾 저장시 prettier설정 자동적용되도록 하는법

ESLint

npm install --save-dev eslint
npm install --save-dev eslint-plugin-react

// .eslintrc.js
// js를 사용하면 동적으로 설정 가능(개발환경일때만 특정 설정 켜고 끈다던지)
module.exports = {
  extends: [
    "eslint:recommended",
    "plugin:react/recommended",
    "plugin:react/jsx-runtime",
  ],
  rules: {
    // 콜백 함수는 화살표 함수로 작성하도록 강제
    "prefer-arrow-callback": "error",

    // 모든 함수는 기명 화살표 함수로 작성
    "func-style": ["error", "expression", { "allowArrowFunctions": true }],
    
    // console객체의 메서드 사용시 경고
    "no-console": "warn",
  },
};