webpack配置alias后eslint和ts无法识别

背景

我们在 webpack 配置 alias 后,发现项目中引入的时候,还是会报错,如下:

可以看到,有一个是 ts报错,还有一个是 eslint 报错。

解决 ts 报错

tsconfig.json

json 复制代码
{
  "compilerOptions": {
    ...
    "paths": {
      "@/*": ["./src/*"]
    },
    ...
  }
}

解决 eslint 报错

方式一:关闭规则

.eslintrc.js

json 复制代码
module.exports = {
  ...
  rules: {
    "import/extensions": 'off'
  }
}

【推荐】方式二:使用 eslint-import-resolver-alias

js 复制代码
npm install --save-dev eslint-import-resolver-alias

.eslintrc.js

js 复制代码
module.exports = {  
  // ... 其他配置项  
  settings: {  
    'import/resolver': {  
      alias: {  
        map: [['@', './src']], // 这里配置你的别名路径,例如将 '@' 映射到 './src'  
        extensions: ['.js', '.jsx', '.ts', '.tsx'], // 这里配置你的文件扩展名,例如支持 .js, .jsx, .ts, .tsx 文件  
      },  
    },  
  },  
  // ... 其他配置项  
};

使用方式二鼠标点击后还可以跳转到对应的文件中

相关推荐
im_AMBER13 小时前
Web 开发 27
前端·javascript·笔记·后端·学习·web
蓝胖子的多啦A梦13 小时前
低版本Chrome导致弹框无法滚动的解决方案
前端·css·html·chrome浏览器·版本不同造成问题·弹框页面无法滚动
玩代码13 小时前
vue项目安装chromedriver超时解决办法
前端·javascript·vue.js
訾博ZiBo13 小时前
React 状态管理中的循环更新陷阱与解决方案
前端
StarPrayers.14 小时前
旅行商问题(TSP)(2)(heuristics.py)(TSP 的两种贪心启发式算法实现)
前端·人工智能·python·算法·pycharm·启发式算法
一壶浊酒..14 小时前
ajax局部更新
前端·ajax·okhttp
DoraBigHead15 小时前
React 架构重生记:从递归地狱到时间切片
前端·javascript·react.js
彩旗工作室15 小时前
WordPress 本地开发环境完全指南:从零开始理解 Local by Flywhee
前端·wordpress·网站
iuuia16 小时前
02--CSS基础
前端·css
kyle~16 小时前
Qt---setAttribute设置控件或窗口的内部属性
服务器·前端·c++·qt