[ESLint] ESLint 설치부터 설정 파일 작성까지 알아보기!

💡 Linter란?
소스 코드 내에 존재하는 잠재적 버그들이나 오류들을 찾아주는 도구를 말한다.
대표적인 Linter 도구인 ESLint를 직접 적용해보자!!!

ESLint

1. 설치

npm install -D eslint

2. 설정 파일 초기 세팅

npx eslint --init

• 위와 같이 질문에 답을 해주면 .eslintrc.js 파일이 생성된다.

3. 규칙 설정하기

module.exports = {
  env: {
    browser: true,
    es2021: true,
  },
  extends: 'airbnb-base',
  overrides: [
  ],
  parserOptions: { // 원하는 환경 설정 (기본적으로는 ES5를 사용한다는 가정하에 동작함)
    ecmaVersion: 'latest',
    sourceType: 'module', // ES 모듈을 사용하는 경우 module로 설정해주어야함
  },
  rules: {
    curly: "error"
  },
};

• 규칙 설정은 rules 옵션에 작성해주면 되는데, 일단 간단하게 curly 규칙을 어기면 에러가 발생하도록 설정해주었다.

• curly 규칙은 중괄호를 생략해 혼란을 야기할 수 있는 코드를 작성하지 못하도록 하는 규칙이다.

4. 특정 파일 대상으로 eslint 실행해보기

npx eslint ./src/javascript/index.js

• 위 명령어를 실행한 후 에러나 경고문이 뜬다면 해당 문제를 바로 고칠 수 있는 옵션도 존재한다.

npx eslint ./src/javascript/index.js --fix

• --fix 옵션을 덧붙여주면, 문제가 되는 것들 중 자동으로 고칠 수 있는 부분들을 바로 고쳐주는 것을 확인할 수 있다.

eslint:recommended 사용

• 이미 만들어진 규칙을 사용하고 그 규칙을 확장해서 다른 규칙들을 적용하고 싶은 경우에는 다음과 같이 설정 파일을 작성해주면된다.

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

• eslint:recommended는 ESLint에서 제공하는 권장 규칙으로, 해당 규칙을 상속 받겠다는 의미이다.

• 상속받은 규칙에 원하는 규칙 추가 또는 수정을 통해 원하는 대로 확장이 가능하다.

규칙을 무시할 파일 설정 (.eslintignore)

// .eslintignore

build
node_modules

// 전체 규칙 비활성화
/* eslint-disable */

// 비활성화 블록 생성
/* eslint-disable */
// ...
/* eslint-enable */

// 특정 규칙 비활성화
/* eslint-disable curly */

// 특정 코드 라인에 대해 규칙 비활성환
/* eslint-disable-next-line */

다음에는 CSS Linter인 stylelint에 대해 정리해보겠다!