Jumping between component files in VS Code

[ryanb]

I'm looking for a way to quickly jump between view component files (template and Ruby) in VS Code. For example, if you're in the template, running a command would open the related Ruby file.

Has anyone found a good way to do this? I'm considering creating an extension for this but thought I'd ask here first to ensure no one else has done this.

[boardfish]

I don't believe such a thing exists at the moment! It'd be a good idea to clone Rails Go To Spec and rework it in a similar way, though there are a few different ways templates can exist alongside component code that this would hopefully accommodate.

[dewski]

Has anyone found a good way to do this? I'm considering creating an extension for this but thought I'd ask here first to ensure no one else has done this.

I personally use the will-wow.vscode-alternate-file extension. Here is my .projections.json file:

{
  "app/components/**/*.html.erb": {
    "alternate": "app/components/{}.rb"
  },
  "app/components/**/*.rb": {
    "alternate": "app/components/{}.html.erb"
  },
  "app/*.rb": { "alternate": "test/{}_test.rb" },
  "lib/*.rb": { "alternate": "test/lib/{}_test.rb" }
}

Since no key bindings are set by default I created one (cmd+shift+a) to alternate between the view component and the HTML (Preferences: Open Keyboard Shortcuts (JSON) in the VS Code command list):

[
  { "key": "cmd+shift+a", "command": "alternate.alternateFileInSplit", "when": "editorTextFocus" }
]

The alternate files also works for switching between app/**/*.rb files and their related tests, it's a huge part of my workflow.

I also created a VS Code / Chrome extension to let you quickly open a partial / view component directly from Chrome in VS Code by right clicking on it and selecting it from the partial hierarchy. The config.action_view.annotate_rendered_view_with_filenames setting has to be enabled for it to work:

Rails.application.configure do
  # Annotate rendered view with file names.
  config.action_view.annotate_rendered_view_with_filenames = true
end

Hope that helps.

[ryanb]

That looks like a great solution, thanks!

Update: I just set this up and the Alternate File extension works like a charm. Very fast too! Highly recommended.