const a = 1
const b = 2

→ 자동으로 세미콜론 붙여줌

but 항상 한 줄에 하나씩 붙여주는 것이 아님

// app.js
console.log()
(function(a, b){ return a + b; })(1, 2)

코드상에는 에러x, 실행해보면 typeerror 발생

// typeerror: console.log()가 반환하는 함수가 아님
console.log()(function(a, b){ return a + b; })(1, 2);

⇒ 린트 사용!!

ESLint

가장 많이 사용되는 린트

하는 역할

1. 포맷팅: 일관된 코드 스타일 유지(세미콜론 하나, 들여쓰기 등), 개발자가 쉽게 읽을 수 있는 코드를 만들어 줌
2. 코드 품질: 잠재적 오류(위의 예시처럼), 버그 예방 like 사용하지 않는 변수 사용x, 글로벌 스코프 함부로 다루지x

설치

npm i eslint

eslint 실행하려면 config 파일 있어야 함

eslint가 .eslintrc.js 파일을 읽고 실행함

설정파일 → rules에 코드 검사하는 규칙 추가

규칙은 ESLint 문서에 정의되어 있음

// .eslintrc.js
module.exports = {
  rules: {
        "no-unexpected-multiline": "error",
      "no-extra-semi": "error"
  },
};

eslint가 error를 수정할 수 있는 경우에는(랜치 표시) –fix 옵션을 주면 코드를 eslint가 수정할 수 있음

npx eslint app.js --fix

ESLint 여러 Rule 미리 정해놓은 것: eslint:recommended 설정

ESLint 문서에 체크표시 되어있는 Rules 다 적용됨

// .eslintrc.js
module.exports = {
  extends: [
   "eslint:recommended"
 ]
};

eslint:recommended 설정 말고 자주 사용되는 설정(extends 설정)은

airbnb: airbnb 스타일 가이드를 따르느 규칙. eslint-config-airbnb-base 패키지로 제공됨

standard: javascript 스탠다드 스타일. eslint-config-standard 패키지로 제공됨

eslint 성정 파일은 직접 작성하기 보다는

npx eslint --init

명령어로 쉽게 구성함 → 대화형 형식으로 설정

reference

• https://www.inflearn.com/course/%ED%94%84%EB%A1%A0%ED%8A%B8%EC%97%94%EB%93%9C-%EA%B0%9C%EB%B0%9C%ED%99%98%EA%B2%BD/lecture/31745?tab=curriculum&mm=null