eslintrc 의 구성요소

구성요소 Rule

rules는 ESLint의 핵심 구성 요소로, 코드가 특정 기대를 충족하는지 여부를 검증하고, 그러지 않을 경우 어떻게 처리해야 하는지를 정의한다.

• "off" or 0 : 룰을 끈다. ( 해당 룰에 대한 관여 일체 없음 )

• "warn" or 1 - 경고를 위한 용도로 킨다. ( 코드의 동작에는 영향을 주지 않는다. )

• "error" or 2 - turn the rule on as an error (exit code is 1 when triggered)

일반적으로 규칙은 지속적인 통합 테스트, pre-commit 체크, 그리고 pull request 병합 중에 빌드 프로세스가 종료되지 않도록 하기 위해 "error"로 설정된다.

규칙을 강제로 적용하고자 하지 않지만 eslint로 부터 보고받길 원한다면 "warn"으로 설정하면 된다. 일반적으로 새로운 규칙을 도입하고 나중에 "error"로 설정될 때, 규칙이 빌드타임 또는 런타임 오류가 아닌 다른 사항을 감지할 때 (예: 사용되지 않는 변수) 등에 사용된다.

플러그인에서 나온 룰을 사용할 경우는 아래와 같다.

{
    "plugins": [
        "plugin1"
    ],
    "rules": {
        "eqeqeq": "off",
        "curly": "error",
        "quotes": ["error", "double"],
        "plugin1/rule1": "error"
    }
}

특정 파일에 룰을 적용하거나 적용하고싶지 않다면 아래와 같이 overrides를 사용하면 된다.

{
  "rules": {...},
  "overrides": [
    {
      "files": ["*-test.js","*.spec.js"],
      "rules": {
        "no-unused-expressions": "off"
      }
    }
  ]
}

eslint 규칙을 disable 시키는 방법은 아래의 링크에 아주 자세하게 많이 나와있으니 참고하자.

자료출처 : https://eslint.org/docs/latest/use/configure/rules

구성요소 Plugins

eslint는 서드파티 플러그인을 지원한다. npm을 통해서 설치 한뒤 진행해주도록 하자.

플러그인을 사용하기 위해서는 plugins라는 키를 이용해서 적용시켜주면 된다.
플러그인의 이름 중 eslint-plugin- 이라는 문구는 생략해주어도 괜찮다.

{
    "plugins": [
        "plugin1",
        "eslint-plugin-plugin2"
    ]
}

플러그인은 파생된 구성 파일을 기준으로 상대적이다. 예를 들어 ./.eslintrc 파일이 extends: ["foo"]를 가지고 있고 eslint-config-foo에서 plugins: ["bar"]를 가지고 있다면, ESLint는 ./node_modules/ (./node_modules/eslint-config-foo/node_modules/가 아닌) 또는 상위 디렉터리에서 eslint-plugin-bar를 찾는다. 따라서 구성 파일 및 기본 구성에서 모든 플러그인은 고유하게 해결된다.

사용법

• eslint-plugin-foo → foo/a-rule

• @foo/eslint-plugin → @foo/a-config

• @foo/eslint-plugin-bar → @foo/bar/a-environment

구성요소 Parser

각 코드 파일을 검사할 파서를 설정하는 부분이다. 기본 설정은 espree.
특정 플러그인을 사용한다면 해당 플러그인에서 제공하는 parser를 장착하면 된다.

ESLint 특정파일 무시하게 하기

• .eslintignore 파일 만들기 ( 루프 폴더에 위치 시켜주면 된다. )

• gitignore에 명시해주기

• pakage.json에 명시해주기

{
    "name": "mypackage",
    "version": "0.0.1",
    "eslintConfig": {
        "env": {
            "browser": true,
            "node": true
        }
    },
    "eslintIgnore": ["hello.js", "world.js"]
}