전제

다음 ESLint Plugin을 사용할 때 발생하는 문제를 해결합니다.

eslint-plugin-vue

eslint-plugin-import

srcDir가 src라는 이름으로 설정되어 있다고 가정합니다.

그렇지 않으면 해당 장소를 보완해 주세요.

컴포넌트 태그 이름이 마음대로 파스칼 케이스가 되는 것을 방지

Nuxt.js가 제공하는 구성 요소(아래 4개)는 케밥 케이스 1 로 하지 않으면 빌드에 실패합니다. [요점 검증]

nuxt

nuxt-child

nuxt-link

no-ssr

에디터의 확장 기능으로 ESLint를 넣고 있으면 저장시에 마음대로 파스칼 케이스 2 에 수정되는 경우가 있으므로, 이러한 태그가 수정되지 않게 설정합시다.

.eslintrc

{
    "rules": {
        "vue/component-name-in-template-casing": [
            "error",
            "PascalCase",
            {
                "ignores": ["nuxt", "nuxt-link", "nuxt-child", "no-ssr"]
            }
        ]
    }
}

별칭 경로 해석

eslint-plugin-import 을 사용하는 경우에만

Nuxt.js에는 별칭(별칭) 이라는 상대 루트 패스적인 일을 할 수 있는 기능이 있습니다.

예를 들어 아래의 코드는 ./src/components/Foobar.vue 와 같이 해석됩니다.

import Foobar from "~/components/FooBar.vue";

그러나 ESLint 측은 @/~ 가 무엇을 가리키고 있는지 모르기 때문에 import/unresolved 3 에 걸려 경고가 나옵니다.

해결책

이것을 해결하기 위해서 eslint-import-resolver-babel-module 를 이용합니다.

npm install eslint-import-resolver-babel-module babel-plugin-module-resolver --save-dev

yarn add eslint-import-resolver-babel-module babel-plugin-module-resolver -D

(이 때, babel-plugin-module-resolver도 동시에 인스톨 해 둘 필요가 있습니다)

그리고, .eslintrc 에 이와 같이 추기합니다.

.eslintrc

{
    "settings": {
        "import/resolver": {
            "babel-module": {
                "root": ".",
                "alias": {
                    "~": "./src",
                    "@": "./src",
                    "~~": ".",
                    "@@": "."
                }
            }
        }
    }
}

이것으로 경고가 나오는 것이 없어질 것입니다.

여담: VSCode에서 별칭을 해석한 경로 후보 표시

VSCode에는 Path Autocomplete이라는 확장 기능이 존재하지만 구성에 추가하면 아래 이미지와 같이 별칭을 해석 할 수 있습니다.



.vscode/settings.json

{
    "path-autocomplete.pathMappings": {
        "~": "${folder}/src",
        "@": "${folder}/src",
        "~~": "${folder}",
        "@@": "${folder}"
    }
}

후기

앞에 된장으로, eslint-config-fornuxt 라고 하는 공용 컨피그를 만들고 있습니다.

상속 등으로 사용하십시오.

다음과 같은 특징이 있습니다.

이 기사의 문제 해결

eslint:recommended , plugin:vue/recommended , prettier/vue를 상속합니다.

plugin:vue/recommended 에서 누락된 것을 eslint:recommended 에 있으면 그 쪽에 준거, 없으면 적당하게 설정.

그 외는 소스 코드를 봐 주세요.

참고

babel-plugin-module-resolver로 가져 오기를 편안하게합니다 (eslint-plugin-import + flow + path-autocomplete)

하이픈 태그로 연결하는 기술법 예: kebab-case ↩

낙타 케이스의 첫 글자도 대문자로 만드는 기술 방법 예 : PascalCase  ↩

로컬 import/require 대상 파일이 있는지 확인하는 규칙. ↩