DEV Community

Cover image for VS Code Extension for Quick Navigation to Script and Style Tags in a Svelte file

Posted on

VS Code Extension for Quick Navigation to Script and Style Tags in a Svelte file


I created a simple VSCode extension called svelte-tag-focuser.

You can easily jump to the script tag or style tag even when you are working with a very long svelte component.


Go to the installation page and install the extension.


Simply open a Svelte file in Visual Studio Code and activate the extension using one of the following methods:

  • Focus on script tag: Ctrl+Shift+S (Windows/Linux) or Cmd+Shift+S (Mac)
    • or Click CMD+Shift+P and type Focus on Script (Svelte)
  • Focus on style tag: Ctrl+Shift+T (Windows/Linux) or Cmd+Shift+T (Mac)
    • or Click CMD+Shift+P and type Focus on Style (Svelte)


Let's say you have the following Svelte file:

    <h1>Welcome to my Svelte app</h1>
    <p>This is some text</p>

  // This is your script tag
  console.log('This is your script tag');

  /* This is your style tag */
  body {
    color: red;
Enter fullscreen mode Exit fullscreen mode

If you want to quickly jump to the script tag, you can use the "Focus on Script" command (or the Ctrl+Shift+S key binding) to go directly to the script tag.

That's it for now. Happy coding!

Top comments (7)

alaxander7 profile image

In today’s fast-paced and competitive business landscape, staying ahead of the game is crucial. But how can you ensure that your company is operating at its full potential, utilizing the latest technological advancements to streamline processes and enhance productivity? If you are looking for an ERP software company to streamline your business operations, then this Ebrsoftware might be able to help you.

jacquesslaff profile image

Very interesting blog. Alot of blogs I see these days don't really provide anything that I'm interested in, but I'm most definately snaptik interested in this one. Just thought that I would post and let you know.

haadi profile image
haadi muhammed • Edited

The first step in working with supermarket software is to assess your business's unique requirements and challenges. Conduct a comprehensive evaluation of your current processes, pain points, and goals to identify areas where software solutions can deliver the most significant impact. Whether it's optimizing inventory management, enhancing customer experiences, or improving operational efficiency, tailor your approach to address specific business needs.Explore various Supermarket and Retail Software options on Explore various Supermarket and Retail Software options on Ebrsoftware's Supermarket Software website to streamline your business

tonyadams profile image
Tony Adams

This VS Code extension, svelte-tag-focuser, is an incredibly helpful tool for effortless navigation to script and style tags within lengthy Svelte files. Its seamless integration and user-friendly shortcuts make it a must-have wordle unlimited for enhancing efficiency while working with Svelte components.

karausa0106 profile image

VS code extension allows you to quickly navigate, code hints, check for errors, and format code during Svelte application development, slither io increasing the performance and quality of your code.

nancy266 profile image
nancy lucy

Your comments on the forum are very reasonable, hope you add comments to the driving directions website for us to improve further, and thank you for your comments.

thomas180399 profile image
Thomas Frank

Your new code has been beneficial for me in tackling complex tasks. It saves me valuable pokedoku time and improves my development workflow.