Nuxt.jsとESLintを上手くやる

# 前提

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

- [eslint-plugin-vue](https://github.com/vuejs/eslint-plugin-vue)
- [eslint-plugin-import](https://github.com/benmosher/eslint-plugin-import)


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

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

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

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

[^1]: ハイフンタグで繋ぐ記述法　例：kebab-case

- [nuxt](https://ja.nuxtjs.org/api/components-nuxt) 
- [nuxt-child](https://ja.nuxtjs.org/api/components-nuxt-child)
- [nuxt-link](https://ja.nuxtjs.org/api/components-nuxt-link)
- [no-ssr](https://ja.nuxtjs.org/api/components-no-ssr)

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

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

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

# エイリアスのパスを解釈させる

**[eslint-plugin-import](https://github.com/benmosher/eslint-plugin-import)を使用してる場合のみ**

Nuxt.jsには、[エイリアス（別名）](https://ja.nuxtjs.org/guide/directory-structure#%E3%82%A8%E3%82%A4%E3%83%AA%E3%82%A2%E3%82%B9-%E5%88%A5%E5%90%8D-)という相対ルートパス的な事ができる機能があります。

例えば下記のコードは`./src/components/Foobar.vue`のように解釈されます。

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

しかしながら、ESLint側は`@`/`~`が何を指しているか知らない為、[import/unresolved](https://github.com/benmosher/eslint-plugin-import/blob/master/docs/rules/no-unresolved.md)[^3]に引っかかって警告が出ます。


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

## 解決法

これを解決するために、[eslint-import-resolver-babel-module](https://github.com/tleunen/eslint-import-resolver-babel-module)を利用します。

```shell
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`にこの様に追記します。

```json:.eslintrc
{
    "settings": {
        "import/resolver": {
            "babel-module": {
                "root": ".",
                "alias": {
                    "~": "./src",
                    "@": "./src",
                    "~~": ".",
                    "@@": "."
                }
            }
        }
    }
}
```
これで警告が出ることが無くなるでしょう。

## 余談：VSCodeでエイリアスを解釈したパス候補を表示させる

VSCodeには[Path Autocomplete](https://marketplace.visualstudio.com/items?itemName=ionutvmi.path-autocomplete)という拡張機能が存在していますが、コンフィグに追記すると下の画像のようにエイリアスを解釈させることも出来ます。

![image.png](https://qiita-image-store.s3.amazonaws.com/0/107334/0b0698c7-3a42-279f-303f-3b27c8fcc76e.png)

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

# あとがき

手前味噌で、[eslint-config-fornuxt](https://github.com/SnO2WMaN/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)](https://qiita.com/ymkz/items/8f09326382ed7ebcd061)