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 文件  
      },  
    },  
  },  
  // ... 其他配置项  
};

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

相关推荐
lemonzoey1 分钟前
无缝集成 gemini-cli 的 vscode 插件:shenma
前端·人工智能
Allen_zx2 分钟前
Elpis - 基于 Koa + Vue3 的企业级全栈应用框架
node.js
老家的回忆10 分钟前
jsPDF和html2canvas生成pdf,组件用的elementplus,亲测30多页,20s实现
前端·vue.js·pdf·html2canvas·jspdf
半点寒12W14 分钟前
uniapp全局状态管理实现方案
前端
Vertira15 分钟前
pdf 合并 python实现(已解决)
前端·python·pdf
鹏程36 分钟前
局域网下五子棋,html+node.js实现
node.js·html
PeterJXL1 小时前
Chrome 下载文件时总是提示“已阻止不安全的下载”的解决方案
前端·chrome·安全
hackchen1 小时前
从0到1解锁Element-Plus组件二次封装El-Dialog动态调用
前端·vue.js·elementui
君子宜耘心1 小时前
el-table虚拟列表封装
前端
黄瓜沾糖吃1 小时前
大佬们指点一下倒计时有什么问题吗?
前端·javascript