React

ESLint가 html에서 동작하지 않는 에러(plugin:jest/recommended, plugin/:jest/style 추가시 발생)

{ "env": { "browser": true, "es6": true }, "plugins": ["eslint-plugin-html"], "extends": ["airbnb-base", "prettier", "eslint:recommended", "plugin:jest/recommended", "plugin:jest/style"], "rules": {} }
JSON
복사
test.js에서 test(....으로 코드를 작성했을 때 'test is not defined'라는 오류 메시지가 나타났었다. 이걸 해결하려고 아래의 많은 코드를 생각없이 갖다 붙이고 해결되어서 계속 쓰고 있었는데 index.html에서 바닐라 js 코딩을 하다보니 html이 ESLint의 검사를 받지 않는 것을 확인했다.
"overrides": [ { "files": ["**/*.test.js"], "extends": ["plugin:jest/recommended", "plugin:jest/style"] } ]
JSON
복사
overrides는 어떤 확장자의 파일에 대해서만 extends에 해당하는 플러그인을 적용하는 것이다. 그런데 왜 html이 영향을 받는지 이해가 되지 않는다.
overrides가 오버로딩이 아니라 오버라이딩이라 아래의 의미를 가졌다.

메서드 오버라이드란?

메서드 오버라이드(override)는 자식 클래스에서 부모 클래스의 기능(method)을 재정의할 때 사용하는 기능입니다.
오버라이드는 다음과 같은 경우에 주로 사용합니다.
부모 클래스의 기능을 사용하지 않고 자식 클래스에서 구현한 기능을 사용하고 싶은 경우
부모 클래스의 기능을 자식 클래스에서 확장하고 싶은 경우

자바스크립트에서 메서드 오버로딩

메서드 오버로딩(overloading)은 동일한 이름을 가진 여러 개의 메서드를 만든 후 매개변수 타입과 개수에 맞는 메서드가 자동으로 호출되는 기능을 말합니다.
하지만 아쉽게도 자바스크립트는 문법적을 오버로딩을 제공하지 않습니다.
출처:
결국 간단하게
{ "parser": "babel-eslint", "parserOptions": { "ecmaVersion": 12 }, "env": { "browser": true, "commonjs": true, "es2021": true, "node": true, "jest": true },
JSON
복사
이렇게 env에다가 jest만 추가해줘도 된다. (test is not defined 메시지가 나타나지 않는다.)