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

Posted 2023-03-27

【中文标题】如何修复 eslint 抱怨打字稿的路径别名

【英文标题】：How to fix that eslint complain about typescript's path aliasing

【发布时间】：2021-11-09 11:31:34

【问题描述】：

我尝试导入这样的接口

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://***.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 错误的解决方案。

【问题讨论】：

你检查过this吗？

这能回答你的问题吗？ Why IDE shows me error when I import SVG file to use as React component?

【参考方案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' ]
    
  ]