In today's short article I would like to cover some tips to improve your programming speed as a web developer.
So let's begin...
- Code snippets
We write similar lines of code a lot of times like declaring new classes, functions or if-else statements. In such cases, it's best to save this as code snippets in your editor and use shorthand code for writing them faster. This will also kill the boredom of repeating a similar type of code again and again. - Multiple cursors(Multiline editing)
Every editor has a keyboard shortcut for inserting cursor at multiple positions at the same time. This can come in handy while batch editing multiple lines of code instead of repeating the same change again and again. Once you start using this feature you will never feel the same again.
For VSCode you can find more in official docs here: Multi-Edit Feature
- Auto Indent shortcuts
Most of the modern editors can do indentation of code automatically for us. It's always better to remember the keyboard shortcut for indenting code rather than doing proper indentation manually every time.
For VSCode keyboard shortcut for this feature can be found here: Auto Indent - Side by Side editing
When we are editing a long file and need a reference to part of file which is no longer in viewport it's much easier to write code using side by side editing. This is also useful when we need to edit multiple related files together.
For VSCode the feature reference can be found here: Side by Side Editing
- Print debug values
Many of us have the habit of log statements like console.log() or print() for debugging quite often. It's useful to know the code snippet for log statement or add external plugins/extensions for adding custom log statements.
For VSCode shorthand islog+Tab for console.log or we can use an extension like Turbo Console Log to print custom log statements with a keyboard shortcut. - Element Shortcuts
We can use shortcut codes to write HTML tags in VSCode. For example, typing 'button' + Tab key will add button tag or typing '.class-name' + Tab key will add div with the class name. Check this tweet's video to see it in action:
That's it for today's short tutorial. Happy Weekend😁