ESLint 설치

ESLint 설치

npm install --save-dev eslint

ESLint를 설치하게 되면, package.json에 다음과 같이 추가된 것을 알 수 있다.

{
  "scripts": {
    "test": "echo \"Hello, world!\" && exit 1"
  },
  "devDependencies": {
    "eslint": "^8.47.0",
    "prettier": "^3.0.1"
  }
}

package-lock.json의 경우 매우 많은 것들이 추가되기에 생략했다.

ESLint 설정

prettier와 동일하게 .eslintrc.js라는 설정파일을 생성한 뒤, 아래 코드를 입력한다.

module.exports = {}

ESLint 규칙 설정

이후, ESLint의 규칙을 설정하기 위해서 다음의 코드를 실행한다.

npm install --save-dev eslint-config-airbnb-base eslint-plugin-import eslint-plugin-node eslint-config-prettier

이후에, package.json에 가게 되면, 의존성이 추가된 것을 볼 수 있다.

{
  "scripts": {
    "test": "echo \"Hello, world!\" && exit 1"
  },
  "devDependencies": {
    "eslint": "^8.47.0",
    "eslint-config-airbnb-base": "^15.0.0",
    "eslint-config-prettier": "^9.0.0",
    "eslint-plugin-import": "^2.28.0",
    "prettier": "^3.0.1"
  }
}

ESLint 규칙 적용

이후 ESLint를 설정하기 위해서 .eslintrc.js에 아래 코드를 입력하면 된다.

module.exports = {
  extends: ['airbnb-base', 'plugin:node/recommended', 'prettier'],
}

main.js에서 ESLint의 동작을 보면, console을 사용할 수 없게 되어있다.
하지만, console을 사용하기 위해서는 다음과 같이 예외를 적용시켜두면 쓸 수 있다.

/* eslint-disable-next-line */
console.log('Hello world!');