5 Awesome Code Editor Tips And Tricks I’ve Found On Twitter That You Might Like And Find Useful.

Photo by Goran Ivos on Unsplash

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

Bracket Pair Colorizer by CoenraadS in action in VS Code

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

Indent Rainbow in action — picture by @jhinch on Twitter

Alternatives in other editors:

  1. Atom provides an ‘Indent Guide Improved’ package which makes the indented line indicators in a clearer and more understandable way.
  2. For Vim, a Github user called Nathan Aelkane created a plugin called ‘Vim Indent Guides’.
  3. 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)

VS Code Editor’s Default Comment Color Changed to Pink.

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

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

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.

Front End Dev || Writer || Blogger