---
tags: mstu5003, codepen
---

# Codepen / Editor Configuration

You'll probably notice that I use a lot of shortcuts and also have a particular preference for how to format and go about formatting code.

Some of you reported some of my shortcuts as "not working." This is probably due to the configuration of your Codepen Editor.

The following is a quick guide on setting up your editor to be able to do what I do.

## Go to Settings

Click on your own user icon and go to the Codepen settings page.


## Editor Preferences

Here you can find all the configurations. I choose some boring colors so that it appears most clear in video. But you can pick all sorts of themes that make coding more enjoyable for you.


## Emulating My Configuration and Setup

:::info
This is an important one!
:::


### Key Bindings

Choose `Sublime Text` keybindings.

> Key bindings in Sublime Text helps a user to process and map the sequences of key presses to actions.

Sublime Text is a popular text editor for programmers. What this does is change the behavior of how the editor acts on certain things you type and keys you press like the `TAB` to indent and `SHIFT+TAB` to detent. You can indent/detent MULTIPLE lines by first, `HIGHLIGHTING/SELECTING` multiple lines, then pressing `TAB` or `SHIFT+TAB`.

It's hard to say what other kinds of practices I do require `Sublime Text` keybindings to work. So to be sure, just make sure this is set.

### Code Indentation

You can use `Spaces` or `Tabs` but set the indent width to `2`.

### Editor Options


In general your toggles should be like mine.

If it makes it easier for you to achieve clean code there is a toggle to `Format on Save`. That said, normally I keep "Format on Save" off. I think it's best to format while you code but turning this on might be a failsafe.

I do not like `line-wrapping` as multiple lines wrapped into a tiny column width is hard to read. Turning this off forces me to open up my editor width so I can see whole lines of code and I recommend you turn this off.

### Emmet Support

I use a lot of shortcuts. One standard for shortcuts is the `Emmet` shortcut support. Make sure Emmet support is `ACTIVE`.

What is Emmet support?

Typing:

- `div` + press `TAB` produces `<div></div>` and puts your cursor in between.
- `#someID` + press `TAB` produces `<div id="someID"></div>` and puts your cursor in between.
- `.someItem` + press `TAB` produces `<div class="someItem"></div>`
- See 👉 **[EMMET CHEATSHEET](https://docs.emmet.io/cheat-sheet/)** of all shortcuts

There are MANY MANY more shortcuts. So how do we use these?

See the following **short video** for a good overview of the power of Emmet.

{%youtube 45eWEO0gRHI %}

:::warning
Keep in mind that this person in the video uses a different editor so some of the keybindings will be different. In general, with my setup it's always `Emmet Pattern` then `PRESS TAB`. Pushing `ENTER` isn't the way I activate these.
:::