jetbrain出品webstorm intellij等如何识别wepback项目别名@
Author：zhoulujun@live.cn Date：
前端路径方面，可以先看一下《关于前端的路径资源与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即可。
因为：
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://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 @
转载本站文章《jetbrain出品webstorm intellij等如何识别wepback项目别名@》,
请注明出处：https://www.zhoulujun.cn/html/tools/CodeEditor/intelliJ/2016_0215_4174.html