在跑一些旧的项目时，因为历史原因，部分 eslint 或者 ts 配置没有配置好，导致编辑器会标红，例如下图：

可以看到，第一条是 ts 报的警告，cannot find module xxx or its corresponding type declarations. 这是由于 ts 在处理模块的时候无法通过别名识别到具体的文件路径。如果你的项目没有使用到 ts 的话，那这段错误也不会有，直接跳过当前段落。

对于 ts 的警告，我们可以在 tsconfig.json 文件里面配置 paths 选项即可。

{
  "compilerOptions": {
    "paths": {
      "@/*": ["./src/*]
    }
  }
}

解决 eslint 报错

有两种解决方法，可以按实际需要选择。

  1. 关闭规则

很多初学者最烦 eslint 的规则，虽然项目要求开启了 eslint ，但是只要一言不合就直接 × 掉对应的规则，眼不见心不烦。这种虽然可行，但是没有形成良好的开发习惯，只会逃避问题，而不是解决问题。如果你是这样的人，那么可以在 .eslintrc.js 这样配置：

moduule.exports = {
  rules: {
    "import/extensions": "off",
  },
};
  1. 识别路径

使用 eslint-import-resolver-alias 插件，配置到 .eslintrc.js 文件中，即可解决路径识别问题。

module.exports = {
  settings: {
    "import/resolver": {
      alias: {
        map: [["@", "./src"]],
        extensions: [".js", ".jsx", ".ts", ".tsx", ".json"],
      },
    },
  },
};

这样做的好处是不仅可以移除 ide 的 eslint 报错，也可以识别到路径，直接通过鼠标点击跳转到具体的文件。