ESLint conflicts with eslint-plugin-import and typescript-eslint

Question

I want to include the rule no-unpublished-import from eslint-plugin-node, however, it is conflicting with my current .eslintrc because I am using typescript-eslint and eslint-import-resolver-typescript.

It is my current configuration:

{
    "parser": "@typescript-eslint/parser", // Specifies the ESLint parser
    "extends": [
        "airbnb-base",
        "plugin:@typescript-eslint/recommended", // Uses the recommended rules from the @typescript-eslint/eslint-plugin
        "prettier", // Enables eslint-plugin-prettier and displays prettier errors as ESLint errors. Make sure this is always the last configuration in the extends array
        "prettier/@typescript-eslint" // Uses eslint-config-prettier to disable ESLint rules from @typescript-eslint/eslint-plugin that would conflict with prettier
    ],
    "parserOptions": {
        "project": "./tsconfig.json",
        "ecmaVersion": 6, // Allows for the parsing of modern ECMAScript features
        "sourceType": "module" // Allows for the use of imports
    },
    "rules": {
    },
    "settings": {
        "import/resolver": {
            "node": {
                "extensions": [".js", ".ts"]
            },
            // use <root>/tsconfig.json
            "typescript": {
                "alwaysTryTypes": true // always try to resolve types under `<root>@types` directory even it doesn't contain any source code, like `@types/unist`
            }
        }
    },
    "root": true
}

The code compiles correctly, however, if I add to the extends option the plugin:node/recommended the compilation process will fail:

  1:1   error  Import and export declarations are not supported yet  node/no-unsupported-features/es-syntax
  1:43  error  "express" is not found                                node/no-missing-import
  2:1   error  Import and export declarations are not supported yet  node/no-unsupported-features/es-syntax

My package.json includes the node": ">=12.0.0. Also, this rule should be ignored because I am using typescript. On the other hand, I am just exporting types from express because the module don't use it.

According to this issue the conflict should be resolved by eslint-plugin-node.

How can I accomplish the merge of both plugins? Do I have to go disabling rules one by one?

UPDATED: It seems it was asked in this issue on the eslint-plugin-node repository. It works for no-unsupported-features and no-missing-import, however, it is still failing with the import definition of express with no-extraneous-import.

UPDATED 2: It seems eslint-plugin-node is working on a enhancement to accomplish it. Issue here

SnakeDrak SnakeDrak · Accepted Answer · 2020-04-04T06:58:04

Firstly, you have to add the option tryExtension to include TS files:

"settings": {
    "node": {
        "tryExtensions": [".js", ".json", ".node", ".ts", ".d.ts"]
    },

To solve the no-unsupported-features/es-syntax, according to this issue about adding information to works with TypeScript, if you work with transpilers you will have to ignore it under rules:

"node/no-unsupported-features/es-syntax": ["error", { "ignores": ["modules"] }],

On the other hand, use just types and not the code is not supported yet by the eslint-plugin-node. They are working on a enhancement to solve it. However,, to solve the no-missing-import, you have to add to the resolvePath the node_modules/@types:

"node": {
    "resolvePaths": ["node_modules/@types"],
    "tryExtensions": [".js", ".json", ".node", ".ts", ".d.ts"]
},

Even so, it will generate a no-extraneous-import because it doesn't detect the module, because it is just a type. Meanwhile they are working on this enhancement, you can use allowModules under that rule for workaround:

"node/no-extraneous-import": ["error", {
    "allowModules": ["express"]
}]

ESLint conflicts with eslint-plugin-import and typescript-eslint

1 Answers