[패스트캠퍼스 챌린지 3일차] ESLint 설치

Fast campus Logo

 

Fastcampus_Node.js 수강 목록

 

패스트캠퍼스 작심 30일 챌린지 3일차.

---

오늘은 ESLint 소개 및 설치 강의를 들었다.

이전 시간에 설치한 Prettier와 함께 ESLint는 코드를 작성하는 규칙에 대해 검사해주는 라이브러리이다.

 

실무에서 팀원들과 협업을 하는 과정에서 미리 코딩 규칙을 문서화하여 개발하는 경우도 많지만

개발자마다 코딩 스타일이 다르기 때문에 규칙에 맞지 않는 코딩을 하는 경우가 발생한다.

 

이런 문제를 해결하기 위해 코딩 규칙을 강제해야 하는데,

이에 적절한 라이브러리가 Node.js 강의에서 추천해준 Prettier와 ESLint가 아닐까 한다.

 

코드 끝에 세미콜론을 작성할지, var 변수를 사용할 것인지 let const를 사용할 것인지, String은 SingleQuotes를 사용할 것인지 등 각자 스타일에 맞게 작성할 수도 있는 규칙을 강제하여 일관성 있게 코드를 작성할 수 있도록 도와준다.

---

오늘 강의에서는 airbnb에서 제공하는 eslint 스타일 가이드를 활용하여 코드 규칙을 정하는 방법에 대해 배웠다.

회사나 학교/학원 등 팀프로젝트를 하게 될 경우 스크립트와 관련된 코드 규칙은

ESLint를 활용하면 퀄리티가 높은 코드를 작성하고, 코드 작성에 대한 자신만의 규칙을 고민할 수 있어 자기계발에 많은 도움이 될 것 같다.

(미리 알았으면 '회사에서 적용해볼껄' 하는 아쉬움이 있다....)

 

* airbnb javascript style guide : https://github.com/airbnb/javascript

 

ESLint 설치 및 사용 방법 작성

 

[오늘의 학습 내용]

◎ 린터

- Linting : ESLint
- eslint 설치하기
- .eslintrc.js 생성
    - ESLint 설정파일
- Best practice Library가 많으므로 활용하기
    - 추천 : Airbnb javascript style guide
    - eslint-config-airbnb-base와 eslint-plugin-import 설치하기
    - 설치 후 .eslintrc.js 내 exports에 extends: ['airbnb-base'] 입력
    - 이전에 설치한 prettier와 eslint가 충돌할 수 있으니 ['airbnb-base', 'prettier'] 추가
        - 추가하기 전 eslint-config-prettier 미리 설치하기
        - prettier는 항상 뒤에 입력
    - console.log도 eslint 규칙에 반하는 코드로 인식되므로 코드 바로 위에 /* eslint-disable-next-line */ 입력
        - eslint 에러가 나지 않게 하기 때문에 좋은 방법은 아님
        - /* eslint-disable-next-line no-console */
            - 이렇게 입력하면 console에 대해서만 규칙 검증 제외
- 노드 전용 플러그인 설치
    - eslint-config-prettier 설치하기
    - extends: ['airbnb-base', 'plugin:node/recommended', 'prettier'] 입력
- extends에 추가된 세가지 라이브러리를 통해 깔끔한 코드 작성 가능
    - 모두 같은 규칙을 통해 작성 가능하기 때문에 일관성 있는 코드 작성 가능

---

[오늘의 학습통계]

패스트캠퍼스 작심 30일 챌린지 3일차 학습통계

 

- 패스트캠퍼스 URL : https://bit.ly/37BpXiC

* 본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다.