配置vscode支持webpack的alias

vscode确实是比较好的编辑器
其中一个比较好的插件就是path autocomplete,但是这里有个问题,当通过webpack的alias引用的时候,path autocomplete是不起作用的

import sss from "@common/"

然后后面也没有路径提示,自己手动写好他妈的烦
后来查了下,需要在项目跟路径下配置一个jsconfig.json,让vscode能够识别出alias
废话不多说,
webpack配置

resolve: {
        alias: {
          "@actions": `${this.srcPathAbsolute}/actions/`,
          "@components": `${this.srcPathAbsolute}/components/`,
          "@commonComp": `${this.srcPathAbsolute}/components/common/`,
          "@common": `${this.srcPathAbsolute}/common/`
    }
}

jsconfig.json的配置

{
  "compilerOptions": {
    "target": "es2017",
    "allowSyntheticDefaultImports": false,
    "baseUrl": "./",
    "paths": {
      "@actions/*": ["src/actions/*"],
      "@components/*": ["src/components/"],
      "@commonComp/*": ["src/components/common/"],
      "@common/*": ["src/common/*"],
      "@reducers/*": ["src/reducers/*"],
      "@images/*": ["src/images/*"],
      "@lib/*": ["src/lib/*"],
      "@assets/*": ["src/assets/*"],
      "@util/*": ["src/utility/*"],
      "config/*": ["src/config/*"],
      "sources/*": ["src/sources/*"],
      "stores/*": ["src/stores/*"],
      "styles/*": ["src/styles/*"]
    }
  },
  "exclude": ["node_modules", "dist"],
  "include": ["src"]
}

这样在你引入路径的时候,如果使用webpack的alias的时候,就可以自动提示路径了

你可能感兴趣的:(编辑器)