让 VS 代码读取 webpack.config 并使用别名识别路径？答案

【问题标题】：Make VS code read webpack.config and recognize path with alias?让 VS 代码读取 webpack.config 并使用别名识别路径？
【发布时间】：2016-10-28 21:07:39
【问题描述】：

我正在使用 Webpack 和 Visual Studio Code，以避免出现以下情况：

import { AuthenticationService } from '../../../services/authentication/service';

我已经在我的 webpack.config 上创建了别名，所以我可以使用：

import { AuthenticationService } from 'services/authentication/service';

但是，通过这样做，Visual Code 无法检测到我的代码，因此我失去了类的智能感知。

有没有人对此有解决方案，有没有办法让 VS 代码读取 webpack.config 并识别带有别名的路径？

提前致谢

【问题讨论】：

我确实有 VSCode (1.3.1) 在 js 文件中识别 webpack 的别名。别名在打字稿中不起作用。你说的是 javascript 还是 typescript？
是的，我正在使用打字稿。

标签： webpack visual-studio-code

【解决方案1】：

更新 typescript@2.0.0，你可以在 tsconfig.json 上映射相同的 webpack 别名，方法是添加：

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

【讨论】：

用jsconfig做这个吗？路径选项在这里似乎没有任何影响

【解决方案2】：

我遇到了类似的问题。因为我使用的是 javascript 而不是 typescript，所以我必须创建一个 jsconfig.json 文件并适当地使用 paths 选项。

假设目录结构如下：

.
├── src
│   ├── foo.js
│   ├── jsconfig.json # your vscode js config
│   └── my-module     # folder you're aliasing
│       └── bar.js
└── webpack.config.js # your webpack config

这对我有用：

设置 webpack 解析别名：

var path = require('path');
module.exports = {
  resolve: {
    alias: {
      "my-module": path.resolve(__dirname, './src/my-module')
    }
  },
  // ... other webpack options
};

修改 src 文件夹中的 jsconfig.json：

{
  "compilerOptions": {
    "target": "es6",
    "paths": {
      "my-module": ["./my-module"]
    }
  }
}

使用别名：

// in foo.js
import Bar from 'my-module/bar';
Bar.quack();

【讨论】：

直接导入javascript文件怎么样？
这对我有用。但并非在所有组件上。我 60% 的文件都被推荐了。
这行得通，但我必须将通配符的路径添加为"styles/*": ["./src/components/styles/*"],，如文档jsconfig.json Reference中所述

【解决方案3】：

安装VSCode扩展PathIntellisense。

要打开你的 VSCode 设置文件，你可以在 macOS 上按 command+,（在 Windows 上是 ctrl+,)，在右上角找到“一对大括号按钮”，点击。

在我的情况下，我想使用符号 @ 作为路径 ./src 的别名。所以我将此配置添加到我的 VSCode 设置文件中：

  "path-intellisense.mappings": {
    "@": "${workspaceRoot}/src"
  }

当路径应该相对于当前项目的当前根目录时，使用${workspaceRoot}。

你可以找到官方的例子here。

原答案：

我使用 VSCode 扩展 PathIntellisense 。

在我的 VSCode 设置文件中配置这个 setting。

现在 VSCode 可以识别带有别名的路径。

【讨论】：

我实际上不确定为什么这被否决了。虽然 OP 确实要求 tsconfig ，但很可能像我这样的其他人正在搜索这个，因为发现一些信息指向它是“教”VSC 关于别名的唯一选择。由于这是专门针对 VS Code 的，因此它似乎完全可以作为答案。
@Jared 可能是因为答案不包含任何实际信息；它只是链接到扩展，使得答案基本上只不过是“使用 PathIntellisense”。 在答案本身中包含更多细节和示例配置将是使其成为实际答案的一个很好的步骤。
谢谢，我非常感谢这个答案。请注意：通过这种方式，在单击导入路径或导出名称时指示目标路径是不够的（应该由jsconfig.json完成。它只是有助于自动完成路径名称建议。

【解决方案4】：

您需要在 jsconfig.json 文件中指定 paths 和 baseUrl 字段。

{
    "compilerOptions": {
        "jsx": "react",
        "target": "ES6",
        "allowSyntheticDefaultImports": true,
        "baseUrl": "./",
        "paths": {
            "~/*": ["./app/*"]
        }
    },
    "exclude": [
        "node_modules"
    ]
}

见path mapping documentation

【讨论】：

这很神奇，我搜索了很多但只有这个有效

【解决方案5】：

为 VSCode 使用 Path Autocomplete 扩展

对我来说它比 PathIntellisense 更好。

只需添加配置：

  {
    "javascript.suggest.paths": false, // disable default suggestion
    "path-autocomplete.extensionOnImport": true,
    "path-autocomplete.pathMappings": {
    "@": "${folder}/src" //custom what you want
  },

Work screenshot

【讨论】：

我在哪里添加这个配置？