V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
tanpengsccd
V2EX  ›  Vue.js

VScode 上.vue 文件有能快速定位 html/js/css 代码块的功能或插件吗?

  •  
  •   tanpengsccd · 2022-05-24 15:04:12 +08:00 · 2524 次点击
    这是一个创建于 898 天前的主题,其中的信息可能已经有所发展或是发生改变。

    请教一下.vue 文件有能快速定位 html/js/css 代码块的功能或插件吗? 之前 html/js/css 文件分离的时候我用的 file-ext-switcher 这个插件,可快速切换,很是方便。

    15 条回复    2022-05-25 02:30:48 +08:00
    nanvon
        1
    nanvon  
       2022-05-24 15:06:37 +08:00
    是快速跳转到 template 、script 、style 吗? https://img.nanvon.cn/2022-0524-15:05:26:669.png
    975779964
        2
    975779964  
       2022-05-24 15:07:21 +08:00
    我知道的方法

    ctrl+f 搜索 狂按回车

    你用 vscodevim 的话 按 * 以后 狂按 n ,总能找到 对应的变量了
    tanpengsccd
        3
    tanpengsccd  
    OP
       2022-05-24 15:10:04 +08:00
    @nanvon 啊对,就是这个功能 ,大佬有没有快捷键吗,鼠标点属实有点慢了。
    Vegetable
        4
    Vegetable  
       2022-05-24 15:18:08 +08:00
    有个不太方便的
    ctrl+shift+o(go to symbol),然后输入 template/script/style 定位到符号,需要快捷键+2 个字母左右+回车,这个自己写个插件倒是也不会很麻烦,也许有现成的了
    noe132
        5
    noe132  
       2022-05-24 15:18:13 +08:00
    workbench.action.gotoSymbol / Ctrl + R
    输入 template / script / style
    Vegetable
        6
    Vegetable  
       2022-05-24 15:19:21 +08:00   ❤️ 1
    这个功能其实可以定位到更精确的地方,比如 html 标签、js 变量、css 的.class 类名等等
    nanvon
        7
    nanvon  
       2022-05-24 15:25:10 +08:00
    @tanpengsccd Volar 插件有个功能是按窗口分割 template 和 script 标签。OP 的需求我也经常需要,有时候我用这个方法变相地解决,然后快捷键切换 tab 页就行。

    volar.action.splitEditors Split <script>, <template>, <style> Editors commandPaletteeditor/title
    nanvon
        8
    nanvon  
       2022-05-24 16:04:30 +08:00
    @nanvon 找了一圈,好像 Volar 的这种 tab 栏无法用快捷键切换

    volar.action.splitEditors Split <script>, <template>, <style> Editors commandPaletteeditor/title
    nanvon
        9
    nanvon  
       2022-05-24 16:58:57 +08:00   ❤️ 1
    破案了,刚开始找了个 vuesplit 的插件,和 Volar 那个功能类似,但还是无法使用快捷键跳转,而且拆分多个窗口,体验也不好。

    重新找了个叫 vue-jumptotag 的组件,完美实现。
    插件地址: https://marketplace.visualstudio.com/items?itemName=andersonmfjr.vue-jumptotag

    安装后配置键盘快捷方式,搜索 extension.jumpto ,给这三个依次配置一下快捷键。我配置了 template 和 script 标签的快捷键,shift+alt+t 、shift+alt+s ,供参考。
    tanpengsccd
        10
    tanpengsccd  
    OP
       2022-05-24 19:42:59 +08:00
    @nanvon 非常感谢,有 1w4 的下载量,看来真的是刚需,但是我自己找了半天都没搜到,我谷歌搜的关键字 “vscode vue locate template script style” ,结果都是无关的内容,大佬用的啥关键字 找到的啊?
    @noe132 @Vegetable 感谢大佬,这个方式确实是比较方便的方式。学习了。
    nanvon
        11
    nanvon  
       2022-05-24 20:28:38 +08:00
    @tanpengsccd 我用谷歌搜“vscode 快速跳转到 template 标签”搜到的,第二条: https://blog.csdn.net/oneclarence/article/details/105380552

    刚开始我也尝试了很多关键词,英文搜,split 、jump 都没找到合适的,最后才找到这个 vue-jumptotag 插件。
    nanvon
        12
    nanvon  
       2022-05-24 20:30:46 +08:00
    @nanvon 写错了,是“第一条”,不是“第二条”
    https://img.nanvon.cn/2022-0524-20:30:32:666.png
    tanpengsccd
        13
    tanpengsccd  
    OP
       2022-05-24 23:21:08 +08:00
    @nanvon 怪不得,我把 Google 搜索结果 csdn 屏蔽了...
    tanpengsccd
        14
    tanpengsccd  
    OP
       2022-05-25 02:07:06 +08:00
    已经配置好了,感谢各位尤其是 @nanvon 同学,学到很多。
    安装 vue-jumptotag 扩展,根据习惯,我配置为
    "ctrl+shift+h", // html template
    "ctrl+shift+j", // js
    "ctrl+shift+l", // less style

    keybindings.json
    ```
    ...
    //VUE JumbToTag
    {
    "key": "ctrl+shift+h", // html
    "command": "extension.jumptotemplate",
    "when": "editorTextFocus"
    },
    {
    "key": "ctrl+shift+j", // js
    "command": "extension.jumptoscript",
    "when": "editorTextFocus"
    },
    {
    "key": "ctrl+shift+l", // less
    "command": "extension.jumptostyle",
    "when": "editorTextFocus"
    },
    ...
    ```
    tedding
        15
    tedding  
       2022-05-25 02:30:48 +08:00
    说句无关的。。。用过 angular 才能理解那两个有多离谱
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   3058 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 24ms · UTC 12:55 · PVG 20:55 · LAX 04:55 · JFK 07:55
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.