Airbnb Style 양식에 맞춘 ESLint / Prettier 세팅 가이드 입니다.

• 참고자료

  • 테크웰-우리테크: Prettier + ESLint + Airbnb
  • Eslint 영문 가이드

• 설치 방법

  • 터미널에 순서대로 입력하여 패키지 설치
    1. npm install -D eslint prettier
    2. npx install-peerdeps --dev eslint-config-airbnb
    3. npm install -D eslint-config-prettier eslint-plugin-prettier

• 폴더 구조

  • 생성한 root 폴더 (사진에서는 Precourse) 안에 아래의 파일들을 구성하신 후, 매주 미션 저장소를 root 폴더 안에서 클론 하시면 됩니다.
  • ESLint / Prettier 설정은 root 폴더에서만 하시고, root 폴더를 본인의 git에는 연동하지 않습니다.

• 파일 구성 (파일 세부 내용)

  .eslintrc.cjs
  
  module.exports = {
    extends: ['airbnb', 'plugin:prettier/recommended'],
    env: {
      browser: true,
      node: true,
      es2021: true,
      jest: true,
    },
    parserOptions: { ecmaVersion: 13 },
    rules: {
      'prettier/prettier': ['error', { endOfLine: 'auto' }],
      'max-depth': ['error', 2],
      'import/prefer-default-export': 'off',
      'import/extensions': ['off'],
      'max-lines-per-function': ['error', 16],
      'no-unused-expressions': ['error', { allowTernary: true }],
    },
    overrides: [
      {
        files: ['**/__tests__/**/*.js'],
        rules: {
          'max-lines-per-function': 'off',
          'no-new': 'off',
        },
      },
    ],
  };
  

  .prettierrc.cjs
  
  module.exports = {
    printWidth: 80, // 한 줄 최대 문자 수
    tabWidth: 2, // 들여쓰기 시, 탭 너비
    useTabs: false, // 스페이스 대신 탭 사용
    semi: true, // 문장 끝 세미콜론 사용
    singleQuote: true, // 작은 따옴표 사용
    trailingComma: 'all', // 꼬리 콤마 사용
    bracketSpacing: true, // 중괄호 내에 공백 사용
    arrowParens: 'avoid', // 화살표 함수 단일 인자 시, 괄호 생략
    proseWrap: 'never', // 마크다운 포매팅 제외
    endOfLine: 'auto', // 개행문자 유지 (혼합일 경우, 첫 줄 개행문자로 통일)
  };
  

  .vscode/settings.json
  
  {
    "[javascript]": {
      "editor.formatOnSave": true
    }
  }
  

  # Logs
  logs
  *.log
  npm-debug.log*
  yarn-debug.log*
  yarn-error.log*
  pnpm-debug.log*
  lerna-debug.log*
  
  node_modules
  .DS_Store
  dist
  dist-ssr
  *.local
  
  /cypress/videos/
  /cypress/screenshots/
  
  # Editor directories and files
  .vscode
  !.vscode/extensions.json
  .idea
  *.suo
  *.ntvs*
  *.njsproj
  *.sln
  *.sw?