【eslint】importで出るエラーの解決

初書：2022/02/22
eslint： 8.9.0

前書き

typescriptで、eslintを使っていると、謎にエラーが出る時があるので、修正メモ。

現状

main.ts

import { test } from './lib/test';
// Missing file extension for "./lib/test" eslint(import/extensions)
// Unable to resolve path to module './lib/test'.eslint(import/no-unresolved)

.eslintrc.json

{
    "env": {
        "es2021": true,
        "node": true
    },
    "extends": [
        "airbnb-base"
    ],
    "parser": "@typescript-eslint/parser",
    "parserOptions": {
        "ecmaVersion": "latest",
        "sourceType": "module"
    },
    "plugins": [
        "@typescript-eslint"
    ],
    "rules": {
        "no-console": "off"
    },
    "overrides": [
        {
            "files": ["*.ts"],
            "rules": {
                "no-undef": "off"
            }
        }
    ]
}

インストール済みeslint関係のライブラリ

package.json

    "@typescript-eslint/eslint-plugin": "^5.12.0",
    "@typescript-eslint/parser": "^5.12.0",
    "eslint": "^8.9.0",
    "eslint-config-airbnb-base": "^15.0.0",
    "eslint-plugin-import": "^2.25.4",

ちなみに、tscでコンパイルするとエラーなくコンパイルできるので、ファイルは存在し、
また実行もできるので、ただ単にeslint側の問題だと推測できる。

対処

Airbnbを使っている時の対処法で、以下の方法が有効だったので、それを使用した。

以下をインストール

% npm install -D eslint-config-airbnb-typescript

以下の一行を追加。

.eslintrc.json

extends: [
  'airbnb-base',
+ 'airbnb-typescript/base'
]

※reactを使用する場合は/baseなし

以上で終わりです

参考サイト

node.js - Typescript eslint - Missing file extension "ts" import/extensions - Stack Overflow