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

CodePenはHTML・CSS・JavaScriptを使ったコードを、ブラウザ上で作成して公開できるサービスです。

codepen.io

CodePen

https://codepen.io

A front end web development playground.

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

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

エディタの設定変更

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

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

• ［Code Font Size］を15pxから16pxに変更
• ［Code Indentation］を「Spaces」2つに変更

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

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

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

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

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

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

• ［CSS Preprocessor］SCSSに変更
• ［Prefixing］Autoprefixerに変更

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

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

テンプレート機能の設定

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

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

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

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