ESLint / Prettier 세팅 (TIL 3)

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에는 연동하지 않습니다.

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

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

  .eslintrc.cjs
  
  module.exports = {
    extends: ['airbnb', 'plugin:prettier/recommended'],
    rules: {
      'prettier/prettier': ['error', { endOfLine: 'auto' }], // 공백 문자 호환 설정
      'operator-linebreak': ['error', 'before'], // 할당 연산자 줄바꿈 설정
      'max-depth': ['error', 2], // 들여쓰기 깊이(depth) 제한 (2주차 미션 요구 사항)
    },
  };

  .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/setting.json
  
  {
    "[javascript]": {
      "editor.formatOnSave": true
    }
  }

  .prettierignore
  
  node_modules/
  .vscode/