🚨 우테코 미션폴더가 아닌 한단계 위의 루트폴더에 설치해주어서 package.json이 변형되지 않게 주의한다.

설치 방법

// 1. eslint, prettier 패키지 설치
npm install -D eslint prettier

// 2. airbnb eslint 설정 패키지 설치
npx install-peerdeps --dev eslint-config-airbnb

// 3. prettier eslint 플러그인 및 설정 패키지 설치
npm install -D eslint-config-prettier eslint-plugin-prettier

eslint-plugin-prettier: prettier 규칙을 생성하는 eslint 플러그인
eslint-config-prettier: eslint와 prettier간 충돌나는 규칙을 비활성화해주는 eslint 설정

파일 구성

.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/