[Instagram] 프로젝트 설정(1) - Airbnb-base ESLint, Prettier 적용

[ ESLint ]

• ESLint = ES + Lint
• JavaScript 코드에서 발견된 문제 패턴을 식별하기 위한 정적 코드 분석 도구

 

 

- ESLint 적용하는 이유. Why ?

• JavaScript를 문법적으로 엄격하게 관리
• ESLint는 사용자가 직접 규칙을 정할 수 있어 문법 에러 확인 및 코딩 스타일을 통일할 수 있음
• 협업할 때 동일한 코딩 스타일을 적용하므로써 생산성을 높일 수 있음

 

 

- Airbnb-base ESLint 적용

• vanilla js로 프로젝트를 진행하기 때문에 Airbnb-base ESLint 적용
• 설치해야 할 package 확인

npm info "eslint-config-airbnb-base@latest" peerDependencies

 

 

• package 설치

npx install-peerdeps --dev eslint-config-airbnb-base

 

 

• .eslintrc.js 파일 생성 및 규칙 적용

module.exports = {
  env: {
    browser: true,
    node: true,
  },
  extends: 'airbnb-base',
  rules: {
    'linebreak-style': 0,
  },
};

※ airbnb-base 코딩 스타일을 적용하면 아래와 같은 경고 발생하여, rules에 'linebreak-style' : 0 옵션 추가

---

[ Prettier ]

• 독창적인 코드 포맷터
• 다양한 언어 지원
• 대부분의 에디터와 통합
• 옵션이 거의 없음

 

 

- Prettier 적용하는 이유. Why ?

• 저장을 하면 코드가 포맷된다.
• 코드 리뷰에서 스타일을 논의할 필요가 없다.
• 시간과 에너지를 절약한다.

 

 

- Prettier 적용

• 확장 프로그램 설치

 

 

• .prettierrc.js 파일 생성 및 규칙 적용

module.exports = {
  singleQuote: true, // 작은따옴표 사용
  semi: true, // 세미콜론 사용 여부
  tabWidth: 2, // 탭 너비
  trailingComma: 'all', // 여러 줄을 사용할 때, 후행 콤마 사용 방식
  printWidth: 80, // 줄 바꿈할 줄 길이
  arrowParens: 'avoid', // 화살표 함수 괄호 사용 방식
};

 

• VScode에 Prettier 적용
  • Ctrl + , 로 설정창 open 후 format 입력
  • 기본 포맷터 Prettier 선택
  • 파일 저장 시, Prettier 설정 적용되도록 Editor: Format On Save 설정 클릭