推荐一个很好用的vscode插件:一个可以给出vuex中store定义信息的vscode插件

栏目: JavaScript · 发布时间: 5年前

内容简介:在使用Vuex管理自己应用的状态时,因为状态过多,为了正确性每次都要打开vuex定义文件,去复制定义时的函数名或者状态名,无形中就浪费了许多时间,为了解决这个痛点,开发了这个vscode插件。通过使用 ast 和正则表达式,获取 store 中所有文件的定义,在用户使用.vue 文件中时给 出详细的提示,目前支持大多数 vuex 官网中定义的例子在扩展中搜索 VueThis$Store,安装即可。

在使用Vuex管理自己应用的状态时,因为状态过多,为了正确性每次都要打开vuex定义文件,去复制定义时的函数名或者状态名,无形中就浪费了许多时间,为了解决这个痛点,开发了这个vscode插件。

通过使用 ast 和正则表达式,获取 store 中所有文件的定义,在用户使用.vue 文件中时给 出详细的提示,目前支持大多数 vuex 官网中定义的例子

安装

在扩展中搜索 VueThis$Store,安装即可。

使用

当你打开一个.vue 文件时,插件会扫描从你的入口文件,开始扫描得到你的 store 所有模 块,以及模块中的(actions,mutations, getters, state),保存必要的定义信息以给出提 示。当你的 vscode 插件的左下角有如下图标

推荐一个很好用的vscode插件:一个可以给出vuex中store定义信息的vscode插件
那么代表扫描 成功,可以得到正确的提示,如果最右边是 x 则表示发生错误(我设置的默 认的入口路径是工作根路径下的 src/main.js,如果失败,会使用备用入口文件 ,src/index.js,如果依然失败,会提示错误让你自己声明入口文件)。 你 shift+(cmd|ctrl)+p

输入 specify entrance path 输入你的 index 文件,(就是你生 成一个 vue 实例的地方),回车。插件会重新扫描,入口文件。

特性

  • 支持最基本的 this.$store.state.count 类型的提示,当你在其他的 module 中定义了 其他的 state 时, 可以得到下一层 module 和所有相应 state 的提示。
    推荐一个很好用的vscode插件:一个可以给出vuex中store定义信息的vscode插件
  • 同时支持 mapState,当输入第一个参数时,仅仅提示所有可能的下一个 module(设置了 namespace 的 module) 和官网的机制一致。当设置了命名空间,只会提示当前命名空间 下的 state。
    推荐一个很好用的vscode插件:一个可以给出vuex中store定义信息的vscode插件
  • 支持 从 this.$store.getters.xxx 这样的形式直接获取 getter,也支持 mapGetters 中 第二个参数是数组或者对象的形式
    推荐一个很好用的vscode插件:一个可以给出vuex中store定义信息的vscode插件
  • 同理支持 this.$store.committhis.$store.dispatch 提示
    推荐一个很好用的vscode插件:一个可以给出vuex中store定义信息的vscode插件
推荐一个很好用的vscode插件:一个可以给出vuex中store定义信息的vscode插件
  • 支持 mapMutations 参数为数组和对象提示

    推荐一个很好用的vscode插件:一个可以给出vuex中store定义信息的vscode插件
  • 支持 mapActions 参数为数组和对象提示

    推荐一个很好用的vscode插件:一个可以给出vuex中store定义信息的vscode插件

一些提示

因为我没有什么使用大型的应用的经验,所以测试的项目不是很多,我再 github 上找了一 个比较经典的项目 vue-elm , 并通过了测试 。可能会有其他没有发现的 bug,如果你在使用中发现任何的 bug,你可以提 issue,最 好能给我 store 的目录结构,最最好可以给我每个原先 store 目录下所有文件,当然这可 能涉及一些机密,你可以再原结构不变的情况下, 保留几条测试数据就更好了。同时也非常希 望大家可以给我更多建议,希望这个 vscode 插件能够帮助到广大开发者。:smile:


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

Head First HTML5 Programming

Head First HTML5 Programming

Eric Freeman、Elisabeth Robson / O'Reilly Media / 2011-10-18 / USD 49.99

What can HTML5 do for you? If you're a web developer looking to use this new version of HTML, you might be wondering how much has really changed. Head First HTML5 Programming introduces the key featur......一起来看看 《Head First HTML5 Programming》 这本书的介绍吧!

HTML 编码/解码
HTML 编码/解码

HTML 编码/解码

HSV CMYK 转换工具
HSV CMYK 转换工具

HSV CMYK互换工具