DEV Community

loading...

Make Your Programming Environment Your Own

El Marshall (she/they)
Full stack web developer with a passion for social justice, the arts, and the life-changing potential of technology.
・5 min read

~This was originally posted on Medium on 9/10/19~

I've already written about accepting the joy that is terminal aliases into your life here, but you can do so much more to make your programming life simpler and more personalized. Since I use Visual Studio Code, this post will be highly biased toward that editor (and towards Macs), with a bit at the end about your terminal. There are similar resources for any editor, and this post could easily be used as a guideline for setting yourself up with any editor and system.

A little internet searching will bring you several people's lists of the most useful VS Code extensions out there, and I have included links to a few at the bottom. Here I am going to focus on the ones that I have found most useful as a novice coder.

Features

First, there are a few settings I would highly recommend.

Autosave

With this feature you can set your window to automatically save your files for you, after a delay you specify. Not only does your work stay safer from accidents that way, you won't have the problem I had for ages of making a change to my source code, being baffled by why it wasn't being reflected on my application, and then feeling like a complete dunce when I realized I never saved the change.
To get to this setting, simply click Code in the upper left, then follow through to preferences, then settings. From there just searh "auto save" and you should find what you're looking for.

Line Wrap

Next on my list is line wrap, or word wrap. This automatically wraps any extra long lines of code down into multiple rows on the screen so that you don't need to scroll sideways ever. Personally I can't stand coding without it. For this one, click on View, then Toggle Word Wrap.

Snippets

Snippets are mini templates that you can generate onto the page to save yourself typing time. Such as this one here:

a gif of a snippet in action

Here's a guide to downloading some pre-made snippets, or making your own.

Extensions:

Next is extensions - third party alterations to VS Code that can make your life way easier - or just more entertaining.

Bracket Pair Colorizer

logo for Bracket Pair Colorizer, showing several parentheses paired by color

This extension changes the colors of your (), [], and {} so that you always know where their pair is. This is super handy when you’re getting a few levels deep with your functions and if statements. It will also highlight a lonely bracket bright red so you know something’s gone wrong.

Auto Close Tag

logo for Auto Close Tag

This is an extension for writing html tags. As soon as you complete your opening tag, it generates the closing tag for you. So handy! So much typing saved!

gif of auto close tag in action

Open In Browser

logo for open in browser

This one is super handy for working with your git hub repositories. With this installed, so long as I am within my repository in my terminal, I can just type git open on the command line and a tab in my default browser will open up to that repo’s page on gitHub.

There are many more extensions out there to discover, but the most fun is the colors!

Custom Themes

Tired of staring at black on white or white on black while you code? Want some fun colors in your life? Of course you do.

When I started, my terminal looked like this:

A screenshot of a white terminal with black text

Booooo, not fun enough for me.

Your terminal doesn’t have to be boring. Get yourself terminal themes, baby. If you’re using the standard macOS terminal, you can download a huge selection of backgrounds here. If you want to get fancy and use iTerm2, a third party spiffed up version of the terminal with more features, you can download backgrounds here.

an image showing many color schemes

Both should have guides about how to install the themes and set them as your default. Now my terminal is purple! Check it out!

a screencap of a terminal with a purple background

VS Code Themes

The logo for Rainglow, a collection of VS Code Themes

It doesn’t stop there. You can also spiff up the colors of Visual Studio Code. My favorite extension for this purpose is Rainglow, with its dozens of options. But you could also search for more on the extension marketplace. If you’re using Atom, they have a huge library of themes too! And here’s a curated top 10 list. If you’re using another editor there’s bound to be options for you too!

Don’t settle for boring views. I like to change my view up every few weeks so things stay fresh, but not everyone needs to get as off the rails crazy as me.

On a closing note, if you want to figure out how to make sure you can take your very own vs code setup wherever you go, check out this walkthrough for using Settings Sync.

Other Extension Lists:

14 VSCODE EXTENSIONS THAT WILL IMPROVE YOUR PRODUCTIVITY

Best VS Code Extensions You Need in 2019 🚀

Discussion (1)

Collapse
lucasprag profile image
Lucas Arantes

That's so cool, yeah I agree that as programmers we can make our lives so much easier by optimizing little things here and there like these ☝️. Great post =)