5 Awesome Code Editor Tips And Tricks I’ve Found On Twitter That You Might Like And Find Useful.
The coding and developer community on Twitter has proven to be a rich bank of resources on coding tips, tricks and tutorials. In this article, I’ll be sharing a list of 5 of such code editor tips that could prove to be useful especially to rookie developers. Although VS Code is my code editor of choice, I will try to mention alternatives in other popular code editors here when I can.
1. Install a Bracket Pair Colorizer
Have you ever written code with a ton of ({[]})? This extension or plugin can prove to be a lifesaver. It allows matching sets of brackets — (), {}, and [] — to be identified with colors. So it makes it easier for you to quickly scan through and find out where each pair of brackets starts and ends. You also get the option to customize it in that you can choose which characters to match and which colors to use.
For VS Code, you can find it on the visual studio market place or you can search for it in the extensions side bar once you open your editor. There are two versions however of the VS Code Bracket Colorizer — with Bracket Colorizer 2 being the latest version. For Sublime Text, there’s a package called ‘Rainbowth’. For Vim, there’s a plugin called ‘Rainbow Parantheses Improved’. For Atom, there’s a package called ‘Bracket Colorizer’. Lastly, For the IntelliJ IDE and Visual Studio IDE, you can find an alternatives called ‘Rainbow Brackets’ and ‘Viasfora’ respectively.
2. Install an Indent Rainbow
Similar to the bracket pair colorizer above, having this plugin with your code editor makes it easier to track where you’re at in your code. It makes indentation more readable and it does this by colorizing the indentation in front of your text, alternating four different colors in each step. It is suitable for and comes in handy when working files without brackets or with long methods. So for example, you’d see the usefulness of it in your .yaml files as shown in the picture below. The documentation for the Indent Rainbow plugin in VS Code even suggests that some may find it helpful in writing code in Nim or Python and as usual you can search for it in VS Code in the extensions side bar or on the visual studio market place.
Alternatives in other editors:
- Atom provides an ‘Indent Guide Improved’ package which makes the indented line indicators in a clearer and more understandable way.
- For Vim, a Github user called Nathan Aelkane created a plugin called ‘Vim Indent Guides’.
- For Sublime, you can set your indentation guidelines to different colors following steps found here and here.
3. Changing your code editor’s default comment color (if it is extremely faint grey)
This serves to improve readability of your comments especially if like me your use a dark themed editor. You could change it to something strong and readable like a neon green color or a bright orange if you like.
On VS Code, if you want to do that, you’ll locate your settings.json file then inside the file add the following lines below. You can also change for specific themes on VS Code using the tip found here. Other editors are likely to have documentation on how you can customize that feature in them.
"editor.tokenColorCustomizations": {
"comments": "#da3185"
},4. Setting up a quick HTML boiler plate
If your code editor has Emmet pre-installed like mine — VS Code (one of the reasons why I looove this editor) — you can type ! within an empty .html file and press enter to set up a quick, simple HTML boiler plate. Bye bye to physically typing out all those vital <meta> tags that are quite easy to forget when you’re in a rush to get your project started.
For code editors that do not come with Emmet pre-installed you can download a plugin specific to your favorite editor from the Emmet download site or in the package sites for your editors.
P.S: For those who want to explore the power of emmet to its full capacity there’s a cheat-sheet full of emmet magic.
5. Undo Closing Tabs
Did you accidentally close a tab you were working on? Rather than have to go through the whole process of finding the file on the explorer tab, you can simply undo each tab closing like you would in browsers. Simple use the commands Ctrl + Shift + T or Shift + Command + T. This tip should work for most editors but you can easily find the list of commands for your favorite editor in one google search
So there you have it: some interesting and quite useful editor tips and tricks I have come across on twitter. Are there other tips and tricks you picked up from #techtwitter or you personally know and would like to share with us here? Don’t forget to share your thoughts in the comments.
