모던 자바스크립트

ESLint

ESLint는 특정 스타일 지침을 준수하지 않은 문제 패턴이나 코드를 찾는데 사용 되는 정적 분석 JavaScript 린팅 도구입니다.

온라인 데모

ESLint 도구 사용법을 온라인 데모를 통해 체험할 수 있습니다.

실습

1. ESLint, eslint-loader 설치

Webpack에서 ESLint를 사용하려면 eslint와 eslint-loader를 설치해야 합니다.

$ yarn add eslint eslint-loader -D

2. ESLint 환경설정 파일

ESLint 설정 파일을 --init 명령으로 생성합니다.

 






$ npx eslint --init

How would you like to configure ESLint? (Use arrow keys)
  Use a popular style guide
❯ Answer questions about your style
  Inspect your JavaScript file(s)

NOTE

인기 스타일 가이드(popular style guide) 규칙을 비교하면 다음과 같습니다.

규칙 standard/standard airbnb/javascript
들여쓰기 공백(space) 2 공백(space) 2
문장의 끝에 세미콜론(;) 요구 사용 안함 사용
사용되지 않는 변수 허용 안함 허용 안함
문자 따옴표 설정 작은 따옴표(') 작은 따옴표(')
== 대신 === 사용 사용 사용
허용된 빈 줄 개수 1 2
함수 이름 뒤, 공백 사용 사용 안함
[ 다음 줄에 시작 사용 안함 사용
마지막 빈 줄로 파일 끝내기 요구 사용 사용
후행 콤마(,) 허용 사용 안함 사용 안함

NOTE

생성된 ESLint 환경설정 파일의 규칙(rules)을 수정해 사용자가 임의로 규칙을 설정할 수 있습니다.

{
  "rules": {
    "no-console": "off",
    "no-unused-vars": 1
  }
}
설정 값 설명
"off" 또는 0 규칙 해제(off)
"warn" 또는 1 규칙을 어길 경우, 경고(warning) 설정
"error" 또는 2 규칙을 어길 경우, 오류(error) 설정

3. 로더 설정

설치한 eslint-loader를 Webpack에 설정합니다.

webpack.config.js

module.exports = {
  // ...
  module: {
    rules: [
      {
        enforce: "pre",
        test: /\.js$/,
        exclude: /node_modules/,
        loader: "eslint-loader",
        options: { cache: true }
      },
      {
        // ...
      }
    ]
  }
}

4. ESLint 린팅 결과

bundle 명령을 수행하면 설정한 스타일 지침에 어긋나는 사항을 명령창에 출력합니다.

yarn bundle

NOTE

fix 옵션 값이 true로 설정하면, 스타일 지침에 어긋나는 오류를 자동으로 수정합니다.

options: {
  fix: true
}

참고

보다 자세한 사용법은 eslint-loader 문서를 참고하세요.

←