Question

1。我通过create-reaction-app（打字稿）构建了一个项目。

2。然后，我弹出。

我将“ webstorm：语言和框架> Javascript> webpack”设置为webpack配置。

const path = require('path');
module.exports = {
    entry: '', 
    output: {},
    module: {},
    resolve: {
    extensions: ['.ts', '.tsx', '.js', 'config.js', '.json'],
        alias: {
            '@': path.resolve(__dirname, 'src/'),
        },
    },
};

tsconfig.json

{
  "compilerOptions": {
    "experimentalDecorators": true,
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react"
  },
  "include": [
    "src"
  ],
  "extends": "./paths"
}

这是./paths文件：

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

当我使用'@'代替.js文件中的'../../'之类的绝对路径时，它工作正常，但在jsx文件中失败。（我的意思是该项目将成功编译，但是webstorm无法提示我输入代码）

我设置错了吗？如何获得智能提示？

Answer 1

在Typescript项目中，webpack配置文件中的路径别名不用于路径解析，而使用tsconfig.json中的路径映射。但是IDE不会将paths文件视为有效的tsconfig.json，因此不会从其中读取映射。您需要重命名文件，或将其名称添加到在 Settings | [设置] | TypeScript Config 文件类型注册的模式列表中。编辑器文件类型

Answer 2

我想我已经解决了问题。

首先，我重写“ ./paths”。（或者您可以将其合并到tsconfig.json中）

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

enter image description here

在@后面插入'/'时，您将获得聪明的提示...

'webstorm.typescript.webpack_alias'。在tsx中使用别名时，我无法获得智能提示

2 个答案: