iPadのAirtableアプリでGatsbyサイトの記事を書いてみる

2018年12月1日

GatsbyJS

試しに先日Rriverブログで公開した記事の下書きのマークダウンを、Bearアプリからコピペで入れてみる。

うん。便利。

ちなみに、ノートを更新した際のデプロイはとりあえずiOSショートカットでNetlifyにPOSTリクエストを送信することにした。

VSCodeのカラー設定をカスタマイズする方法

最近、評判のVSCode（Visual Studio Code）を使い始めています。なかなかいですねw カラーテーマはMonokaiにしているのですが、いまいちアクティブなタブがわかりずらいんですね。

Monokaiのデフォルトだとこんな感じです。

[画像]

それで、カラーテーマの細かい色のカスタマイズをする方法を探してみました。やっぱり、あるんですね。

カラー設定のカスタマイズ方法

VSCodeのカラーテーマのカスタマイズの方法は以下の通りです。

まず、 ⌘ + , で設定画面（Settings）を出します。

[画像]

一番上にある検索ボックスで「color」と入力します。「Workbench: Color Customization」というセクションがあるので「Edit in settings.json」をクリックします。

[画像]

エディターが出てくるので「workbench.colorCustomizations」という設定を追加します。ユーザ設定を変更する場合は「USER SETTINGS」、Workspaceごとにカスタマイズする場合は「WORKSPACE SETTINGS」のタブに設定を加えます。

[画像]

他に何も設定が入っていない場合は、以下を丸々追加するとアクティブなタブの下にボーダーを入れることができます。

{
  "workbench.colorCustomizations": {
    "tab.activeBorder": "#00ff6a"
  }
}

僕の場合は、すでにいくつか設定を変更していたので以下のようになりました。

{
  "workbench.iconTheme": "material-icon-theme",
  "workbench.colorTheme": "Monokai",
  "editor.fontSize": 14,
  "editor.tabSize": 2,
  "editor.wordWrap": "on",
	"editor.minimap.enabled": false,
  "workbench.editor.tabSizing": "shrink",
  "workbench.colorCustomizations": {
    "tab.activeBorderTop": "#00ff6a"
  }
}

設定できる色の一覧

設定できる色の一覧はVS CodeのDocsで見られます。

Theme Color Reference

タブのテキストの色も変えたいんですが、それは見つけられませんでした…。

ちなみに、設定変更の説明もVS CodeのDocsにありました。

User and Workspace Settings

さいごにひとこと

ずっとAtomエディターを使ってきたんですが、巷で噂のエディターを試してみたかったのでVSCodeを使ってみています。ここ数日使ってますが、サクサク動くし拡張機能（Extensions）やカラーテーマも充実していていいですね。

他にも色々な便利機能がたくさんありそうなので、これから試していくのが楽しみです。

ということで、しばらくはVSCodeを使ってみようと思います。

一覧に戻る