Making Your Code Editor Feel Like Home — Customizing VS Code

Visual Studio Code

As developers / coders, we spend a lot of time in our editor of choice, heck, we practically live there. Why not make it more comfortable, dress it up as you please and make it somewhere you enjoy spending all that time. In this post, I just wanted to discuss a few of the ways you can make your code editor feel like home (in particular, I will be talking about VS Code on Windows, but most popular editors should have similar features).


Color Themes

One of the most obvious ways we can dress up our editor is by changing the colour theme of it. We are going to be staring at it for hours on end, might as well make it look good. There are countless variations on themes, from dark to light, colourful to muted, high to low contrast, that you should be able to find one to suit your needs.

Picking out your colour theme is pretty simple as well. You can either go to File -> Preferences -> Colour Theme (or press Ctrl+K then Ctrl+T) and it will bring up a list of currently installed themes. You can go Up and Down through the list and it will give you a preview of what the theme looks like. You can then apply the theme by either pushing Enter or clicking on it.

If you want to add some additional colour themes, you can scroll down the list to Install Additional Colour Themes… and it will bring up a list of available themes or you can search in the box for a specific theme. Click on the theme name to bring up more information about it and then click on the Install button near the top to install it to VS Code.

Here are some of my favourite colour themes:

One Monokai (Current Theme)

Afterglow Remastered

Cobalt2

Theme Selector and Theme Marketplace — Currently selected theme in use: One Monokai

Fonts

The next element that has the biggest impact on your visual usage of your editor would be the font, both the font family and font size. The proper font for you will be something that is comfortable to look at for long periods of time and something that helps you distinguish between similar characters (i.e lower case L and the number 1). Also, some people enjoy using a font that utilizes ligatures (where two or more letters / symbols are joined together to form a glyph) to create some often used symbol representations.

To change your font settings in VS Code, go to File -> Preferences -> Settings (or press Ctrl+comma) to bring up the User Settings. You will want to go to the pane on the right side, User Settings (not the left side Default User Settings) and look for the following line to change your default font family:

“editor.fontFamily”: “Consolas”,

Just replace what is inside the “” with the name of the font that you would like to use (i.e DejaVu Sans Mono, Hack etc) and then save the settings. To change the font size, look for the following line:

“editor.fontSize”: 15,

Just change the number with the size, in pts, that you would like the font to appear. It will all depend on your screen size / preferences. I, personally, enjoy using 15 for my font size as it gives me a decent amount of readability, spacing with the tab size I use and also works well when I go into split screen view.

If you are using a font that uses ligatures, you will need to add the following line to your User Settings:

“editor.fontLigatures”: true,

My current font of choice is Fira Code. It has pretty good distinction between L / 1 and O o 0, uses ligatures and just has an overall, nice sense of readability to it. For a list of other top, free, programming fonts, check out this post by Charlee Li — (11 Best Programming Fonts — https://itnext.io/11-best-programming-fonts-724283a9ed57)

An example of Fira Code in action, showing the ligatures for === and =>

Snippets

Snippets are a great way to take pieces of code that you use on a regular basis and give them a shortcut to save yourself some time and typing. If you already use Emmet for your HTML, then you are probably familiar with how useful snippets can be. To add or change your snippets, go to File -> Preferences -> User Snippets to bring down a menu listing all the different languages you can make a snippet for. For any languages that already have a snippet file, they will be listed at the top of the list and ones that need to have a snippet file created will be listed afterwards. When you create a new snippet file, you will be greeted with the following screen, showing you an example of how to create a snippet. You can simply delete the commented out text, if you desire, or just continue on afterwards:

Blank snippet ready to be populated

There are four parts to every snippet you create:

Title — This is for your own purposes, a title you make for your snippet / what you want to call it
 Prefix — this is the shortcut that you will use to access your snippet
 Body — This is the actual code that you want your snippet to produce.
 Description — This is a description of what the snippet is used for / does

The body of the snippet itself is contained within [ ]. Each line goes within a set of “ “ and is finished off with a comma, except for the last line of the body. You can use \t to indicate a tab or \n to indicate a new line (or you could also use an empty set of “ “ to indicate a blank line). You can also use $1, $2 etc to indicate tab stops for after the snippet is run. $1 indicate where the cursor will be after the snippet is put onto the page. $2, $3 and so on, are used to indicate where the cursor will move to if you use tab after that.

Here are a few examples of some of my more frequently used snippets:

HTML

“jQuery CDN”: {
“prefix”: “jq”,
“body”: “<script src=’https://code.jquery.com/jquery-3.2.1.min.js' integrity=’sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=’crossorigin=’anonymous’></script>”,
“description”: “jquery 3.x”
}

A simple snippet to throw in a CDN for jQuery.

CSS / SCSS

“snippet-.setup”: {
“prefix”: “.setup”,
“body”: [
“html{line-height:1.15;-ms-text-size-adjust:100%;-webkit-text- size-adjust:100%}body{margin:0}article,aside,footer,header,nav,section{display:block}h1{font-size:2em;margin:.67em 0}figcaption,figure,main{display:block}figure{margin:1em 40px}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent;-webkit-text-decoration-skip:objects}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:inherit}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}dfn{font-style:italic}mark{background-color:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}audio,video{display:inline-block}audio:not([controls]){display:none;height:0}img{border-style:none}svg:not(:root){overflow:hidden}button,input,optgroup,select,textarea{font-family:sans-serif;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}button,html [type=button],[type=reset],[type=submit]{-webkit-appearance:button}button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{display:inline-block;vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details,menu{display:block}summary{display:list-item}canvas{display:inline-block}template{display:none}[hidden]{display:none}”,
“”,
“.clearfix:after {visibility: hidden; display: block; font- size: 0; content: \” \”; clear: both; height: 0; }”,
“”,
“* { t-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0;}”,
“”,
“.visuallyhidden:not(:focus):not(:active) {position: absolute; width: 1px; height: 1px; margin: -1px; border: 0; padding: 0; white-space: nowrap; clip-path: inset(100%); clip: rect(0 0 0 0); overflow: hidden;}”,
“”,
“html { font-size: 62.5%; }”,
“”,
“ul { list-style: none; }”,
“”,
“a { text-decoration: none; }”,
“”,
“body { font-size: 1.6rem;}”,
],
“description”: “”
}

Javascript / React

{
“Console Log”: {
“prefix”: “cl”,
“body”: [
“console.log($1);”,
“$2”
],
“description”: “Log output to console”
},
“Document Ready”: {
“prefix”: “dr”,
“body”: [
“$(function() {“,
“\t$1”,
“});”
],
},
“Complex Component Creation”: {
“prefix”: “complex”,
“body”: [
“import React, { Component } from ‘react’;”,
“”,
“class $1 extends Component {“,
“\tconstructor() {“,
“\t\tsuper();”,
“\t\tthis.state = {“,
“”,
“\t\t}”,
“\t}”,
“\trender() {“,
“\t\treturn (“,
“\t\t\t$3”,
“\t\t);”,
“\t}”,
“};”,
“”,
“export default $2;”
],
},
“Component Creation”: {
“prefix”: “simple”,
“body”: [
“import React from ‘react’;”,
“”,
“const $1 = () => {“,
“\treturn (“,
“\t\t$3”,
“\t);”,
“};”,
“”,
“export default $2;”
],
}
}

The first two are some simple Javascript / jQueries. One to throw up a console.log, first taking you into the parentheses then the next tab taking you onto the next line. The second is a simple document.ready. Following that, we have two snippets to make the skeletons of a component, one for a stateful component and one for a stateless component. They both will start off at the space to name the component, next tab taking you to fill in the name to export and the third tab taking you inside the return statement.

This was just a sample of the amazing things you can do to customize your code editor. There are so many more things, from different extensions, shortcuts and a wide range of others that can help make your coding experience much more comfortable and personal.

Like what you read? Give Christopher Arsenault a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.