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

[tanpengsccd]

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

[nanvon]

是快速跳转到 template 、script 、style 吗？ https://img.nanvon.cn/2022-0524-15:05:26:669.png

[975779964]

我知道的方法

ctrl+f 搜索 狂按回车

你用 vscodevim 的话 按 * 以后 狂按 n ，总能找到 对应的变量了

[tanpengsccd]

@nanvon 啊对，就是这个功能 ，大佬有没有快捷键吗，鼠标点属实有点慢了。

[Vegetable]

有个不太方便的
ctrl+shift+o(go to symbol)，然后输入 template/script/style 定位到符号，需要快捷键+2 个字母左右+回车，这个自己写个插件倒是也不会很麻烦，也许有现成的了

[noe132]

workbench.action.gotoSymbol / Ctrl + R
输入 template / script / style

[Vegetable]

这个功能其实可以定位到更精确的地方，比如 html 标签、js 变量、css 的.class 类名等等

[nanvon]

@tanpengsccd Volar 插件有个功能是按窗口分割 template 和 script 标签。OP 的需求我也经常需要，有时候我用这个方法变相地解决，然后快捷键切换 tab 页就行。

volar.action.splitEditors Split <script>, <template>, <style> Editors commandPaletteeditor/title

[nanvon]

@nanvon 找了一圈，好像 Volar 的这种 tab 栏无法用快捷键切换

volar.action.splitEditors Split <script>, <template>, <style> Editors commandPaletteeditor/title

[nanvon]

破案了，刚开始找了个 vuesplit 的插件，和 Volar 那个功能类似，但还是无法使用快捷键跳转，而且拆分多个窗口，体验也不好。

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

安装后配置键盘快捷方式，搜索 extension.jumpto ，给这三个依次配置一下快捷键。我配置了 template 和 script 标签的快捷键，shift+alt+t 、shift+alt+s ，供参考。

[tanpengsccd]

@nanvon 非常感谢，有 1w4 的下载量，看来真的是刚需，但是我自己找了半天都没搜到，我谷歌搜的关键字 “vscode vue locate template script style” ，结果都是无关的内容，大佬用的啥关键字 找到的啊？
@noe132 @Vegetable 感谢大佬，这个方式确实是比较方便的方式。学习了。

[nanvon]

@tanpengsccd 我用谷歌搜“vscode 快速跳转到 template 标签”搜到的，第二条： https://blog.csdn.net/oneclarence/article/details/105380552

刚开始我也尝试了很多关键词，英文搜，split 、jump 都没找到合适的，最后才找到这个 vue-jumptotag 插件。

[nanvon]

@nanvon 写错了，是“第一条”，不是“第二条”
https://img.nanvon.cn/2022-0524-20:30:32:666.png

[tanpengsccd]

@nanvon 怪不得，我把 Google 搜索结果 csdn 屏蔽了...

[tanpengsccd]

已经配置好了，感谢各位尤其是 @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]

说句无关的。。。用过 angular 才能理解那两个有多离谱