如何修复 eslint 抱怨打字稿的路径别名

Question

我尝试导入这样的接口

import placeholder from '@/assets/images/placeholder-image.svg'
import { Button } from '@/components/atoms/buttons/Button'

但他们会像这样得到 es-lint 的抱怨。

和

“@/components/atoms/buttons/Button”eslintimport/extensions 缺少文件扩展名 无法解析模块“@/components/atoms/buttons/Button”的路径。eslintimport/no-unresolved

我的.babelrc 文件是

  "presets": ["@babel/react", "@babel/preset-typescript"],
  "plugins": [
    "@babel/plugin-transform-typescript",
    "babel-plugin-typescript-to-proptypes",
    "@babel/plugin-proposal-export-default-from",
    ["@babel/plugin-proposal-class-properties", { "loose": true }],
    "@babel/plugin-proposal-object-rest-spread",
    ["@babel/plugin-proposal-private-methods", { "loose": true }],
    ["@babel/plugin-proposal-private-property-in-object", { "loose": true }],
    [
      "module-resolver",
      {
        // https://stackoverflow.com/a/57288642/2298548
        "root": ["."],
        "alias": {
          "@/svg": "./src/svg",
          "@/utils": "./src/utils",
          "@/hooks": "./src/hooks",
          "@/doc": "./src/doc",
          "@/config": "./config",
          "@/styles": "./src/styles",
          "@/fonts": "./src/assets/fonts",
          "@/components": "./src/components",
          "@/SVGIcons": "./src/SVGIcons",
          "@/base": "./src",
          "@/assets": "./src/assets"
        }
      }
    ]
  ]
}

而我的.eslintrc.js 是

  settings: {
    'import/resolver': {
      node: {
        extensions: ['.js', '.jsx', '.ts', '.tsx', '.svg'],
      },
    },
  },

有人知道为什么会这样吗？ 在路径别名中，我们如何在不禁用 es-lint 的情况下找到 linter 错误的解决方案。

Answer 1

尝试声明一个类型然后导入它，检查this链接。

declare module '*.svg' {
  import * as React from 'react';

  export const ReactComponent: React.FunctionComponent<React.SVGProps<SVGSVGElement>>;

  const src: string;
  export default src;
}

如果上述解决方案不起作用，您可能需要暂时禁用它：

rules: {
  'import/no-unresolved': [
    'error',
    {
      'ignore': [ '\.svg' ]
    }
  ]
}