请教一下.vue 文件有能快速定位 html/js/css 代码块的功能或插件吗? 之前 html/js/css 文件分离的时候我用的 file-ext-switcher 这个插件,可快速切换,很是方便。
1
nanvon 2022-05-24 15:06:37 +08:00
是快速跳转到 template 、script 、style 吗? https://img.nanvon.cn/2022-0524-15:05:26:669.png
|
2
975779964 2022-05-24 15:07:21 +08:00
我知道的方法
ctrl+f 搜索 狂按回车 你用 vscodevim 的话 按 * 以后 狂按 n ,总能找到 对应的变量了 |
3
tanpengsccd OP @nanvon 啊对,就是这个功能 ,大佬有没有快捷键吗,鼠标点属实有点慢了。
|
4
Vegetable 2022-05-24 15:18:08 +08:00
有个不太方便的
ctrl+shift+o(go to symbol),然后输入 template/script/style 定位到符号,需要快捷键+2 个字母左右+回车,这个自己写个插件倒是也不会很麻烦,也许有现成的了 |
5
noe132 2022-05-24 15:18:13 +08:00
workbench.action.gotoSymbol / Ctrl + R
输入 template / script / style |
6
Vegetable 2022-05-24 15:19:21 +08:00 1
这个功能其实可以定位到更精确的地方,比如 html 标签、js 变量、css 的.class 类名等等
|
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 |
8
nanvon 2022-05-24 16:04:30 +08:00
@nanvon 找了一圈,好像 Volar 的这种 tab 栏无法用快捷键切换
volar.action.splitEditors Split <script>, <template>, <style> Editors commandPaletteeditor/title |
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 ,供参考。 |
10
tanpengsccd OP |
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 插件。 |
12
nanvon 2022-05-24 20:30:46 +08:00
|
13
tanpengsccd OP @nanvon 怪不得,我把 Google 搜索结果 csdn 屏蔽了...
|
14
tanpengsccd OP 已经配置好了,感谢各位尤其是 @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" }, ... ``` |
15
tedding 2022-05-25 02:30:48 +08:00
说句无关的。。。用过 angular 才能理解那两个有多离谱
|