![]() If you use a library and you want to know how that class/function behaves, you have to search and open that file. At this point, we can switch to column selection mode: instead of lines, we can select columns and edit the code inside these columns.Ī third multiple-cursor use-case is when we select all the occurrences of the selected text (Edit > Find > Select All Accourences) and the typing/deletion happens everywhere. The cursor appears at all the locations where we clicked, and typing happens where the cursors are.Ī particular case is when the places we want to edit are in the same column. The quicker way is to place the cursor to multiple locations by pressing the Alt key (⌥) and clicking the locations. The straightforward solution is to edit it in one place, copy it, and paste it to all the locations. There are occasions when we have to do the same editing in different places. Most of the time, we used to edit the code in one place where the cursor is waiting. If the target is a variable, we can rename, extract, inline, or move it elsewhere with a single mouse click. Webstorm helps us in this situation with its built-in refactoring capabilities. If the refactored code is used in many places, it can be an error-prone task. When the code gets messy, or we find duplicate parts, we tend to do refactoring. ![]() If you don't like automatic code updates, it can be done manually with a keyboard shortcut. This file watcher will listen to save events, and when it occurs, runs Prettier code formatting on the saved file. To make code formatting automatic, you have to add a file watcher also. You can add Prettier to Webstorm through its plugin. By using it, you can save time and energy on code formatting. Prettier is an opinionated code formatter supporting many languages like Javascript, Typescript, CSS, HTML, etc. The best thing is that you can search for files, menu actions, and declarations with a single command: just double press the Shift button and start searching everywhere. Searching for text in project files is a common feature in most IDEs, but searching for other things like actions in the menu bar or declarations are rare in other editors. The placeholder $END$ has a special meaning: this is the place of the cursor after the insertion. The placeholders are started and ended with $ signs. The quick way is to create a live template for the describe block (abbreviation: de).Įnter fullscreen mode Exit fullscreen mode ![]() Typing every character of these blocks is the repetitive way of doing it. Using Mocha and Jasmine as test frameworks, you have to insert describe and it blocks. We develop in TDD ( Test Driven Development) and write many tests. The template can have placeholders also: they have to be filled out to complete the insertion. ![]() When you type the abbreviation and hit the tab button, the editor adds the whole template. Live templates are useful to insert frequently used code pieces quickly. I've collected those features that add the most value to this speedup. Knowing the tool means knowing the features it offers. The difference is not in my typing speed, but how much I know about the tool I use. Looking back at my coding speed years ago seems like snail's pace. It has many useful features to make our lives easier, all of them aiming to automate the repetitive parts of coding. Webstorm is an excellent IDE for web development.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |