An awesome Visual Studio Code extension that allows you to swiftly navigate between <template>, <script>, and <style> in Vue SFC, saving your mouse wheel for a smoother coding experience
一个方便你在写Vue SFC时,能快速在 <template>, <script> 和 <style> 代码块中跳转的Visual Studio Code 插件.
We provide two types of quick navigation: Press the F1 key or Ctrl + Shift + P to bring up the command palette, and then type one of following keyword likes jump to template focus
or even jttf
to jump. Alternatively, setting shortcuts like Ctrl + 1, Ctrl + 2, etc., would be more efficient.
-
Jumping to the beginning of code blocks:
- Jump to template: Jump to the beginning of the <template> code block.
- Jump to script: Jump to the beginning of the <script> code block.
- Jump to style: Jump to the beginning of the <style> code block.
- Jump to imports: Jump to the last
import
statement of the <style> code block.
-
The extension records your last mouse position in each module, making it convenient to jump to the previous code block's focus position after switching between code blocks:
- Jump to template Focus: Jump to the previous focus position in the <template> code block.
- Jump to script Focus: Jump to the previous focus position in the <script> code block.
- Jump to style Focus: Jump to the previous focus position in the <style> code block.
提供两类快捷命令用于跳转, 按 F1 键 或者 Ctrl + Shift + P,调出命令选项板,输入关键字即可跳转,比如要跳转到前一次template中的光标位置,可以输入 jump to template focus
, 或者简写 jttf
。。当然,设置为 Ctrl + 1, Ctrl + 2 这样的快捷键会更加高效。
- 跳转到代码块起始位置:
- Jump to template: 跳转到 <template> 代码块开始位置
- Jump to script: 跳转到 <script> 代码块开始位置
- Jump to style: 跳转到 <style> 代码块开始位置
- Jump to imports: 跳转到 <style> 最后一个import下一行, 方便添加新的导入项
- 插件记录了你在每个模块中上一次的鼠标位置,方便切换了代码块后跳转到上一个代码块中的光标位置
- Jump to template Focus: 跳转到前一次 <template> 代码块中的鼠标焦点位置
- Jump to script Focus: 跳转到前一次 <script> 代码块中的鼠标焦点位置
- Jump to style Focus: 跳转到前一次 <style> 代码块中的鼠标焦点位置