rename-angular-component icon indicating copy to clipboard operation
rename-angular-component copied to clipboard

feat: add trigger rename with shortcut

Open abelfubu opened this issue 1 year ago โ€ข 3 comments

๐Ÿ‘‹ Hi there!!

I have been using your extension and I love it!

I would like to contribute and I want to show you my small idea.

I am one of those who doesn't like to touch his mouse very: much, so I love shortcuts. And I have been trying to figure out how to make your extension work without right-clicking the context menu. I found a small trick other extension authors use, there is a way to copy the path of the selected file in your explorer, however the method copies the path in your clipboard. So they make a temporary copy of the clipboard, copy the path and then restore the clipboard as it was before.

import * as vscode from 'vscode';

export async function readFilePath(): Promise<string> {
  const originalClipboard = await vscode.env.clipboard.readText();
  await vscode.commands.executeCommand('copyFilePath');
  const newUri = await vscode.env.clipboard.readText();
  await vscode.env.clipboard.writeText(originalClipboard);
  return newUri;
}

This is an idea of how to make it work for components, and then if it's ok with you we can apply it to services, pipes, etc...

Just let me know what you think about it!! ๐Ÿ˜Š:

abelfubu avatar Feb 29 '24 20:02 abelfubu

I like the sound of your idea, and your code is tidy. Can you show me with a video or list the steps of how to use this? I'm not entirely clear how to trigger it. Iโ€™d need this for documentation if it goes in anyway. If I spin up your branch and try your method to initialise - and I like it (I'm hoping I will), I'm likely to request a few changes to the PR; file naming, location of regexes etc. Sound ok?

tomwhite007 avatar Feb 29 '24 20:02 tomwhite007

Hi!! Yes of course!!

๐Ÿ™ Just let me know the changes you want me to make.

๐Ÿงช How to test

  1. Checkout to the branch and start debugging
  2. Open an angular app folder
  3. With Ctrl+k Ctrl+s edit your shortcuts and assign a shortcut to the rename-angular.component command
  4. With Ctrl+Shift+E Focus your explorer view
  5. Navigate to the angular component file you want to rename with the arrow keys
  6. Press the shortcut you just set
  7. Everything should work as expected like if you were right clicking the component before

Code_pmiG6v8rwe

abelfubu avatar Mar 01 '24 20:03 abelfubu

Hi @abelfubu

My apologies for the late response; life got in the way.

I think your idea has value and just needs some additional config to avoid the setup steps you listed.

  1. It looks like you're a Windows user. I'm developing this extension mostly on a Mac, then I test on a Windows machine. We need to assign shortcut keys for both OSs, and they musn't clash with other things. Be careful about your choice of shortcut keys for both OSs. I will vet them in your PR.

  2. VSCode extension library allows you to directly assign key bindings to an extension using the keybindings property in package.json. Please refer to the VSCode extension help pages here and also use this repo, vscode-bookmarks as a working example.

If you can get all of that working in your PR, then I'll start suggesting a few cosmetic changes, and after that, I'll be happy to accept.

tomwhite007 avatar Mar 27 '24 08:03 tomwhite007