Nuxt.jsとESLintを上手くやる

前提

以下のESLint Pluginを使用している場合に起こる問題を解決します。

• eslint-plugin-vue
• eslint-plugin-import

srcDirがsrcという名前で設定されている事を前提にしています。

違ったら該当場所を補完して下さい。

コンポーネントタグ名が勝手にパスカルケースになるのを防ぐ

Nuxt.jsが提供するコンポーネント（以下の4個）はケバブケース¹にしないとビルドに失敗します。[要検証]

• nuxt
• nuxt-child
• nuxt-link
• no-ssr

エディターの拡張機能でESLintを入れてると保存時に勝手にパスカルケース²に修正される場合があるので、これらのタグが修正されないように設定しましょう。

.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³に引っかかって警告が出ます。

解決法

これを解決するために、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でimportを快適にする(eslint-plugin-import + flow + path-autocomplete)

1. ハイフンタグで繋ぐ記述法　例：kebab-case ↩

2. キャメルケースの最初の文字も大文字にする記述法　例：PascalCase ↩

3. ローカルのimport/require先のファイルが存在するかチェックするルール。 ↩