In this case, you can break the function into smaller functions because it does more than it should. I’m also selecting the previous occurrence to replace the comma with =. Paste the selection in the render method.Check the following video for an example: You can also press the Ctrl + U shortcut you saw in the previous section to undo the cursor position.Ī use case for the vertical selection shortcut is to copy a component’s props-in other words, the function parameters-and paste them in the line you want to render the component. If you mess up the selection, press Escape and try again. You can vertically select text with Ctrl + Alt + Down/Up Arrow. To move the cursor from word to word, you can press Ctrl + Left/Right Arrow. You can press Ctrl + Shift + Left/Right Arrow to select words. So before you press it, spend some seconds and try to recall the correct keybinding. One problem with this shortcut, though, is that it’s close to the redo keyword Ctrl + Y. This also works with smart select or if you navigate between the top/bottom brackets that you’ll see in the navigation section. If you used select next/previous occurrence, and you selected more text than you wanted, you can press Ctrl + U to return to the previous cursor position. For that reason, I use the Very Smart Select extension. By that I mean it doesn’t gradually select the parent tags but instead selects all the content inside the render method at once. Smart Select doesn’t work well with JSX tags. If you messed it up and selected more than you wanted, press Shift + Alt + LeftArrow-or just LeftArrow since you are already holding Shift + Alt-to shrink the selection. To do that, you place your cursor inside the code you want to select, and then you press Shift + Alt + Right Arrow to gradually expand the selection. In the example above, I select all the render code inside a React component. Smart select can be useful when you want to select large blocks of code. I find kind of hard to explain what smart select does, so I suggest to see for yourself in the video below: Smart select You can also get the number of selections from the status bar, at the bottom of your screen: The number of selections as shown in the Status Bar Smart select If that doesn’t help, you can also press F3 to cycle through the occurrences to make sure you won’t overwrite something by accident. If you want to avoid editing something accidentally, before you press Ctrl + Shift + L, press Ctrl + F instead and check how many times the text is present in the search pop up: The number of occurrences as shown in the Search pop-up I changed this shortcut to Ctrl + Shift + A because I associate the A with All. It can be useful when you want to rename a component for example. Select some text and then press Ctrl + Shift + L to select all occurrences of that text. I configured it to Ctrl + Shift + D because it’s similar to the Ctrl + D of the next occurrence, so it’s easy to remember. It’s called Add Selection To Previous Find Match. There is a shortcut to select the previous occurrence, but it’s not enabled by default. You can use this shortcut to rename, for example, a element to a or remove some double-quotes. In the video below, I use that shortcut to rename some React components. Select some text and then press Ctrl + D to select the next occurrence of that text. This section contains shortcuts that you can use to select text efficiently. In the next video, I change the default shortcut for Select All occurrences-notice that it has a when clause when the editor has focus. That means that you can activate them under specific conditions. For example, many keywords have a when clause. I find it useful to right-click to open the context menu and select what I want to change from the shortcut. You can also search for keywords from within the command palette, without opening the keyboard shortcuts, but you can’t search for a shortcut by the keybinding. From there, you can type the name of the shortcut you want to change or its key-binding. This will open Keyboard Shortcuts in a new open editor. You can open the command palette with Ctrl + Shift + P.
0 kommentar(er)
