• home > tools > CodeEditor > intelliJ >

    jetbrain出品webstorm intellij等如何识别wepback项目别名@

    Author:zhoulujun@live.cn Date:

    Webpack经常会配置一些别名alias指向特定的目,省下每个路径都要去写一堆的前置目录。但是习惯webstorm或者intellij的发现IEDA识别不了。不像切换vscode的话,还是得手动配置。特别是vue3 0用vue-cli脚手架的,还是得手动解决。

    前端路径方面,可以先看一下《关于前端的路径资源与webpack打包URL转换规则:webpack中@~符号

    Webpack经常会配置一些别名alias指向特定的目录,这样在使用 import 等语句时就不用写一大堆的相对路径了,常见的是将项目的src设置为 @,比如某文件的路径是 src/libs/util.js,配置后,任何地方就可以这样导入:

    import util from '@/libs/util.js';//src/libs/util.js

    但是,配置别名后,webstorm 或者intellij 不识别,按住command或者ctr 键点击也不会自动跳转。

    intellij Webpack配置

    2019版的能自动识别wepback配置文件,之前版本的需要手动配置。别入识别vue3.0 vue-cli 里面的webpack配置。

    在setting -> languages&frameworks -> webpack里选择配置文件路径为 node_modules/@vue/cli-service/webpack.config.js即可。

    在WebStorm配置webpack识别@路径别名

    因为:

    • webpack.config.js 原来是帮助webstorm来优化配置的,但是webstorm无法应对千奇百怪的架构变化,

    • 分析实质其实就是利用了webpack.config.js中的 module.exports语法来分析alias路径,从而帮助我们解析文件。

    • 所以我们只需要写一个JS文件和webpack.config.js相似,同时也module.export相同的参数即可。

    第二种方案,

    由于 Vue CLI 3 不再使用传统的 webpack 配置文件,导致 WebStorm 无法识别别名,需要手动创建一个 webpack 配置文件。

    在项目根目录,创建一个 alias.config.js 文件,写入以下代码:

    const resolve = dir => require('path').join(__dirname, dir)
    module.exports = {
      resolve: {
        alias: {
          '@': resolve('src')
        }
      }
    }


    然后在 Languages & Frameworks - JavaScript - Webpack 里指定 webpack 配置文件。

    typescript Alisa识别

    之前写过:《jetbrain出品webstorm intellij等如何识别wepback项目别名@》但在js情况下支持很简单,有了TS就比较麻烦了,无法识别

    看了很多回答:

    https://intellij-support.jetbrains.com/hc/en-us/community/posts/360003361399-Webstorm-does-not-see-alias

    https://juejin.cn/post/6975443914794729509

    https://juejin.cn/post/6844903802185891848

    总结如下:

    ts 项目中 webstorm 无法识别 alias

    在 tsconfig.json 中增加配置



    {
      "include": ["./**/*.ts", "./**/*.tsx", "./**/*.js"],
      "exclude": ["node_modules", "plugins", "packages"],
      "compilerOptions": {
        "allowSyntheticDefaultImports": true,
        "experimentalDecorators": true,
        "importHelpers": true,
        "resolveJsonModule": true,
        "allowJs": true,
        "module": "esnext",
        "target": "esnext",
        "moduleResolution": "node",
        "outDir": "dist",
        "rootDir": "./",
        "sourceMap": true,
        "pretty": true,
        "jsx": "preserve",
        "jsxFactory": "VueTsxSupport",
        "lib": ["es2018", "dom"],
        "baseUrl": ".",
        "paths": {
          "@": ["./*"],
          "@charts": ["./plugins/charts/*"],
          "@datasource": ["./plugins/datasource/*"],
          "@modules": ["./store/modules"]
        }
      }
    }


    webpack 增加配置


    webstormz配置修改

    setting/Languages & Frameworks/JavaScript/Webpack 设置为 Automatically 即可





    参考文章:

    jetbrains: webstorm如何识别webpack中的@等alias符号

    在 WebStorm 中,配置能够识别 Vue CLI 3 创建的项目的别名 alias @

    在WebStorm配置webpack识别@路径别名



    转载本站文章《jetbrain出品webstorm intellij等如何识别wepback项目别名@》,
    请注明出处:https://www.zhoulujun.cn/html/tools/CodeEditor/intelliJ/2016_0215_4174.html