eslint 적용시 이슈(rules 무시, 우선순위)

👍 이번시간에는 eslint적용시 만날 수 있는 이슈와 해결방법을 알아보았다!

1. 일부 rules 무시하는 법

• 특정 코드에서 eslint의 rules을 무시해야할 때가 있다.
• 이때 우리는 파일 자체를 무시하거나, 다음 라인, 특정 범위의 코드를 무시할 수 있다.
• 만약 index.js의 test함수에서 no-unused-vars를 무시하고 싶다면 어떻게 해야할까?

(1) 특정 파일 무시

• 만약 파일 차원에서 무시하려면 .eslintignore에 파일명을 추가하면 된다.
• 하지만 이 경우, index.js에 대해 전체 eslint를 적용하지 않는 단점이 있다.

// .**eslintignore**
index.js

(2) 다음 라인만 무시

• 두 번째 방법으로 주석을 이용할 수 있다.
• 만약 다음 라인만 무시하고 싶다면 eslint-disable-next-line를 주석으로 추가하면 된다.

// eslint-disable-next-line
function test(value1) {      // 이 라인만 무시할 때
  console.log(value2);
}

• 혹은 eslint 무시하고자 하는 특정 룰이 있다면 eslint-disable-next-line 룰 이름을 쓰면 된다.

// eslint-disable-next-line no-unused-vars
function test(value1) {      // 이 라인에서 no-unused-vars룰만 무시할 때
  console.log(value2);
}

(3) 특정 범위만 무시

• 만약 무시하고자 하는 룰 범위가 특정 함수인 경우에는 next-line을 쓰면, 매 라인마다 써야하므로 좋지 않다.
• test1()에 대해서만 eslint를 무시하고 싶다면 eslint-disable, eslint-enable 주석을 쓰자

/* eslint-disable */
function test1(value1) {
  console.log(value2);
}
/* eslint-enable */

function test2(value) {
  console.log(value2);
}

/* eslint-disable no-unused-vars */
function test(value1) {
  console.log(value2);
}
/* eslint-enable no-unused-vars */

function test2(value) {
  console.log(value2);
}

2. eslint 적용 우선순위

• eslintrc.js에서 extends 옵션의 경우, 다른 eslint설정을 추가하여 사용할 수 있다.
• 그런데, 만약 extend 중 특정 extend의 우선 순위를 높이고 싶다면, 배열에서 우선 선언하면 된다.
• 아래 예시에서는 prettier/recommended가 eslint:recommended보다 우선순위가 높다.

// eslintrc.js

module.exports = {
  env: {
    node: true,
    es2021: true,
  },
  extends: [
    "plugin:prettier/recommended",  // 우선순위 높음
    "eslint:recommended"
  ],
  plugins: ["prettier"],
};

3. eslint, prettier 충돌

• 만약 eslint와 prettier가 충돌이 발생하면 어떻게 해야할까?

module.exports = {
  ...
  extends: [
    'plugin:prettier/recommended',
    'eslint:recommended',   
  ],
};

• 만약 eslint가 메인이 되어야 한다면, extends에서 eslint를 먼저 선언하면 prettier 충돌을 해결할 수 있다.

module.exports = {
  ...
  extends: [
    'eslint:recommended',   // 우선 순위 높음
    'plugin:prettier/recommended',
  ],
};