koa+typescript+eslint+vscode 环境配置和解决路径引用问题

2021-2-10 15:21:41
学习记录
65

koa+typescript+eslint+vscode 环境配置和解决路径引用问题

本文将会讲述如下几方面:

1.koa 中使用 typescript 时,如何配置tsconfig.json 文件路径

2.koa +typescript 中路径映射的使用方法

3.解决设置 typescript 路径映射后,导致的 eslint 报错

1.koa+typescript的用法

koa 中使用typescript 主要需要配置几个东西:

  1. nodemon 可以监听文件变化
  2. tsconfig.json vscode中typescript 配置文件,用于配置ts的一些功能
  3. ts-node 可以直接运行ts文件

2.typescript 文件路径映射的用法

路径映射可以让,编辑器自动导入和识别正确的文件路径

下面是我的项目中用到的tsconfig.json配置,其中 compilerOptions.paths 就是路径映射。

{ "compilerOptions": { "module": "commonjs", "target": "es2017", "noImplicitAny": true, "moduleResolution": "node", "sourceMap": true, "outDir": "dist", "baseUrl": ".", "allowSyntheticDefaultImports": true, "suppressImplicitAnyIndexErrors": true, "paths": { "*": [ "src/*", "/node_modules/*", ] } }, "include": [ "src/**/*" ] }

⚠️注意:路径映射基于 compilerOptions.baseUrl

也就是说,当 a.ts 文件中引入另外一个 c/b.ts 的时候,ts会去查找文件。查找规则如下:

  1. 先查找 a.ts 的同级目录下是否存在b.ts
  2. 如果不存在,则进入 compilerOptions.baseUrl 中,去匹配,按照 src/c/b.ts 去查找
  3. 如果文件不存在,则进入./node_modules/c/b.ts 去查找

3.ts路径映射导致 eslint报错的解决方法

eslint 会报错如下:Unable to resolve path to module ‘controller/history/MovieHistory’.

大致就是不能解析出路径。因此需要配置插件 eslint mport/resolver

module.export = { settings: { 'import/resolver': { typescript: {}, }, }, }

koa+typescript+eslint+vscode 环境配置和解决路径引用问题

avatar

Sky(小新)

个人签名: 提升能力,创造价值!

江苏-南京
skylpz@qq.com