雅荷心语
心之所向便是光

首页
前端之旅
后端之路
软件工具
心灵鸡汤
心路历程
视频资料
关于我们
- 关于我
- 关于我
微信平台
- 业务合作

首页
前端之旅
后端之路
软件工具
心灵鸡汤
心路历程
视频资料
关于我们
- 关于我
- 关于我
微信平台
- 业务合作
关注本站
- 微信
- 微博
- 腾讯微博
- Twitter
- Facebook
- RSS订阅

让phpstorm/webstorm 识别vue等项目中的@路径并且智能提示

2020-01-05 分类：后端之路阅读(5389) 评论(0)

最近在使用uni-app重构 微云全景, 写代码每次都要单独找文件, 比较费劲!!! 于是就有了这篇文章!

比如我们有这样一段代码

<script type="text/javascript">
  /**
   * Created by PhpStorm.
   * User:  iyahe@qq.com (天明)
   * Date: 2020/1/4
   * Time: 11:21
   * Description:
   */
  import custom from '@/components/custom'
  import cateline from '@/components/cateline'
  export default {
    data() {
      return {}
    },
    computed: {},
    watch: {},
    components: {
      custom,
      cateline
    },
    methods: {
      createNew(){
        this.$tools.href('user/group/create')
      }
    },
    created() {},
    mounted() {}
  }
</script>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

/**

* Created by PhpStorm.

* User: iyahe@qq.com (天明)

* Date: 2020/1/4

* Time: 11:21

* Description:

*/

import custom from '@/components/custom'

import cateline from '@/components/cateline'

export default {

data() {

return {}

},

computed: {},

watch: {},

components: {

custom,

cateline

},

methods: {

createNew(){

this.$tools.href('user/group/create')

}

},

created() {},

mounted() {}

}

</script>

如果编辑器不能正确的识别@所指向的目录, 那么我们将无法追踪到文件, 并且引入时候没有智能提示, 这个问题一直困扰我很久, 今天查了一些资料, 找到解决方案!

其实很简单, 我们只需要在项目根目录建一个文件, 比如叫 phpstorm.config.js

/**
 * Created by PhpStorm.
 * User:  iyahe@qq.com (天明)
 * Date: 2020/1/4
 * Time: 18:58
 * Description:
 */

const path = require('path')
function resolve (dir) {
  return path.join(__dirname, '.', dir)
}
module.exports = {
  context: path.resolve(__dirname, './'),
  resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      '@': resolve('src')
    }
  }
}

1

2

3

4

5

6

7

8

9

10

11

12