# 手軽にコーディングの勉強ができるCodePenをもっと便利に使うための設定

URL: https://webrandum.net/codepen-setting/
公開日: 2019-01-29
更新日: 2020-04-12
カテゴリー: コーディング
タグ: CodePen, Webサービス
出典: Webrandum（著者: サイトウ マサカズ）

[CodePen](https://codepen.io/)はHTML・CSS・JavaScriptを使ったコードを、ブラウザ上で作成して公開できるサービスです。

[![](https://www.google.com/s2/favicons?domain=codepen.io)codepen.io![](https://s.wordpress.com/mshots/v1/https%3A%2F%2Fcodepen.io?w=160)CodePenhttps://codepen.ioA front end web development playground.](https://codepen.io)

公開したPen（CodePen上では作成したコードを「Pen」と呼びます）はブログに埋め込めたり、他の人のPenを見ていいねしたりSNSとしての要素も兼ね備えています。

コードを書く人にとって非常に勉強になるサービスです。今回はそんなCodePenで設定しておきたい設定・小技についてまとめておきます。

## エディタの設定変更

まずはエディタを自分好みのものに設定する方法から。

右上のプロフィールアイコンをクリックして［Settings］をクリックします。ちなみに、メニュー内にある［Settings］はPenの設定のことなので全然別物なので注意しましょう。

![CodePenのSetting](https://webrandum.net/mskz/wp-content/uploads/2019/01/image_1-3.png)

［Settings］→［Editor］でエディタの設定ができます。自分が設定した項目は下記の通りです。

- ［Code Font Size］を15pxから16pxに変更

- ［Code Indentation］を「Spaces」2つに変更

![](https://webrandum.net/mskz/wp-content/uploads/2019/01/image_2-4-1024x604.png)

「Syntax Hilighting（テーマの設定）」や「Key Bindings」などもいじろうかと思いましたらが、特別困っているわけではありませんでしたし、テーマもデフォルトが一番自分にしっくり来たのでそのままにしています。

## プリプロセッサのデフォルト設定

CodePenではHTMLなら「Haml」や「Pug」、CSSなら「SCSS」や「Less」、JavaScriptなら「Babel」や「CoffeeScript」といったプリプロセッサをサポートしています。

それぞれの言語左にある歯車アイコンを押して「Pen Settings」を開くことで、どのプリプロセッサを使用するか選択できます。

![](https://webrandum.net/mskz/wp-content/uploads/2019/01/image_3-3-1024x542.png)

しかし、毎回設定をするのは面倒なので、デフォルトの設定をしてしまいます。

さきほど同様に［Settings］→［Editor］の「Preprocessor & Library Defaults」から設定できます。自分の場合設定したのはCSS関連のみです。

- ［CSS Preprocessor］SCSSに変更

- ［Prefixing］Autoprefixerに変更

![](https://webrandum.net/mskz/wp-content/uploads/2019/01/image_4-1.png)

ちなみに一番したの［Auto Update Preview］は、コードが変更されると自動的にプレビューも変更される機能なのですが、微妙にラグがあるので使いにくければチェックを外しておきましょう。

あとは隣の［Editor Options］でエディタの細かい設定も可能です。それぞれ下記の機能を表しているので必要に応じてチェックを付けたり外したりしましょう

| 設定項目 | 機能 | デフォルト |
| --- | --- | --- |

| Line Numbers | 行番号を表示する | オン |
| --- | --- | --- |

| Line Wrapping | 行折返しをオンにする | オン |
| --- | --- | --- |

| Code Folding | コード折りたたみ機能をオンにする | オン |
| --- | --- | --- |

| Match Brackets | 対応する括弧をハイライトする | オン |
| --- | --- | --- |

| Autocomplete | オートコンプリート機能をオンにする | オフ |
| --- | --- | --- |

## テンプレート機能の設定

コードを書く時に毎回同じような設定、記述をしている場合は「テンプレート」機能を使うと便利です。

テンプレートの設定方法は、あらかじめ入力しておきたい内容を設定した後、メニュー内の［Settings］から「Regular Pen | Template」のチェックをオンにするだけです。

![Templateへの反映](https://webrandum.net/mskz/wp-content/uploads/2019/01/image_5-1024x544.png)

テンプレートを使用したい場合は［Create］→［Pen］の下にある［from template］からテンプレートとして登録したPenの名前を選択するだけです。

![](https://webrandum.net/mskz/wp-content/uploads/2019/01/image_6.png)

読み込むライブラリなどもテンプレートとして設定しておけるので、ちゃんと設定しておけばすぐにコードが書けるようになります。