物書き生活と道具箱

物書きが使うVS Code　〜カスタマイズと設定項目〜

コメントをする

物書きが使うVS Code　〜インストールと日本語表示化〜
物書きが使うVS Code　〜画面構成〜
物書きが使うVS Code 〜Workspace〜

VS Codeは、すげーカスタマイズできます。

以上、あとはググってください。

で、終わらせたい気持ちがいっぱいです。なにせ、カスタマイズできることが多すぎて、それを列挙していくだけでMacBook Airのバッテリーがへばってしまうからです。

なので、カスタマイズに関しては、ごくごく触りだけを紹介します。詳しくは、Webの大海を泳いでください。

設定の仕方

設定周りは、メニューの「Code」→「Preferences」→「Settings」から行えます。ショートカットキー command + , からでも開けますので覚えておきましょう。

で、「Settings」を選択すると、次のようなタブが開くと思います。ここでさまざまな設定ができるのですが、一度上から下までスクロールしてもらうと、いかに細かいカスタマイズが可能かが理解されるかと思います。

一応左側にカテゴリーもありますので、そちらから探すこともできますが、やっぱりVS Codeは気が利いていて、なんとカスタマイズ項目を検索で探すことができます。

たとえば、gitの周りの項目を探したいなら、そのままgitを上の検索ボックスに打ち込めば、それで絞り込まれます。Wow！

カスタマイズの細かさで言うと、Scrivenerもなかなかやるんですが、あいつは「どこに、どの項目があるのか皆目検討もつかないし、探し方も分からない」な状況なのですが、VS Codeはバッチリサポートされています。

というか、こういう探し方ができないと、にっちもさっちもいかないくらい設定項目がある、というのが本当のところでしょう。

私の設定項目

もし、設定する項目の名前が分かっているなら、いちいち探し回る必要もありません。自分で直接記述すればOKです。

タブの右側にある、ファイルがターンしようとしているアイコンをポチっと押しましょう。

settings.json というファイルが開くと思います。名前から察せられる通り、設定項目を扱うファイルです。先ほどのメニューは、このファイルの編集をサポートしてくれる機能なので、じかにこちらを編集するほうが早い場合は、そちらでやっちゃいましょう。他の人の設定をパク……拝借するときも、このやり方の方が手っ取り早いです。

私は、以下のような設定をしています。

{
    "editor.fontSize": 16,
    "editor.wordWrap": "on",
    "editor.wordWrapColumn": 64,
    "window.zoomLevel": -1,
    "editor.minimap.enabled": false,
    "markdown.preview.scrollPreviewWithEditor": false,
    "markdown.preview.scrollEditorWithPreview": false,
    "workbench.colorCustomizations": {
        // アクティビティバー
        "activityBar.background": "#000", // アクティビティバーの背景色
        "activityBar.foreground": "#ffffff", // アクティビティバーの前景色
        "activityBar.border": "#646464", // アクティビティバーの境界線
        // サイドバー
        "sideBarSectionHeader.background": "#373746", // サイドバーセクションヘッダーの背景色
        "sideBarSectionHeader.border": "#8db3ff46", // サイドバーセクションヘッダーの境界線の色
        "sideBar.background": "#292931", // サイドバーの背景色
        "sideBar.foreground": "#a0a0a0", // サイドバーの前景色
        "sideBar.border": "#646464", // サイドバーの境界線
        "list.activeSelectionBackground": "#2c88d377", // アクティブな状態のセクションの背景色
        "list.focusBackground": "#2c88d377", // フォーカス状態のセクションの背景色
        "list.hoverBackground": "#193c5877", //ホバー状態のセクションの背景色
        // ヘッダー、タブ
        "editorGroupHeader.tabsBackground": "#2929316e", // ヘッダーの背景色
        "tab.activeBackground": "#0319464f", // アクティブタブの背景色
        "tab.border": "#8db3ff46", // タブの横線
        "tab.inactiveBackground": "#2929316e", // 非選択タブの背景色
        // エディター
        "editor.selectionBackground": "#1d34b765", // 選択領域の強調色
        "editor.lineHighlightBackground": "#9e99ee11", // 選択している行の強調色
        "editorLineNumber.foreground": "#a2bdddbb", // 選択行番号の文字色
        "editorBracketMatch.background": "#2c88d377", // 対応する括弧の背景色
        // ステータスバー
        "statusBar.background": "#000", // ステータスバー背景色
        "statusBar.foreground": "#ffffff", // ステータスバー前景色
        "statusBar.border": "#646464", // ステータスバー前景色
        // スクロールバー
        "scrollbarSlider.background": "#0d478a99", // スクロールバーの色
        // walcomeページ
        "welcomePage.background": "#2231419c"
    },
    "markdown.preview.fontFamily": "'Hiragino Kaku Gothic ProN',-apple-system, BlinkMacSystemFont, 'Segoe WPC', 'Segoe UI', system-ui, 'Ubuntu', 'Droid Sans', sans-serif",
    "markdown.preview.fontSize": 16,
    "markdown.preview.markEditorSelection": false,
    "editor.fontFamily": "'Hiragino Sans','Hiragino Mincho ProN',Menlo, Monaco, 'Courier New', monospace",
    "terminal.integrated.fontSize":15,
    "terminal.integrated.fontFamily":"monospace",
    "git.postCommitCommand": "push",
    "terminal.integrated.letterSpacing": 0,
}

物書きさんが気にしそうなところだけ解説すると、

“editor.fontSize”: 16,
“editor.fontFamily”: “‘Hiragino Sans’,’Hiragino Mincho ProN’,Menlo, Monaco, ‘Courier New’, monospace”,

エディタのフォントサイズと、フォントファミリーです。

“editor.wordWrap”: “on”,
“editor.wordWrapColumn”: 64,

エディタの「折り返し」がありで、64文字で折り返しです。

“editor.minimap.enabled”: false,

エディタに表示されるミニマップを消します。

あとは、もう、それぞれの項目名でググってください。これ以外にもいっぱい設定項目があります。

Workspaceごとのカスタマイズ

上記は、VS Code全般に関するカスタマイズでした。VS Codeの恐ろしいところは、前回紹介したWorkspaceごとに、上記のカスタマイズを設定・保存できることです。

ごく簡単に言えば、プロジェクトAというWorkspaceでは”editor.fontFamily”: ‘Hiragino Sans’にして、プロジェクトBというWorkspaceでは”editor.fontFamily”:’Hiragino Mincho ProN’にする、みたいなことができます。

で、たとえば、「執筆用プロジェクト」と「コーディング用プロジェクト」で設定をまったく変えてしまうということが可能なわけですね。

先ほどの検索ボックスの直下を見てください。「User」「Workspace」「Folder」の三つが並んでいるかと思います。

先ほどは「User」のsettings.jsonを開きました。ここに設定を書くと、すべてのWorkspaceにその設定が反映されます。

一方次の「Workspace」のsettings.json（開き方は先ほどと同じです）に設定を書くと、そのWorkspaceを開いたときだけに反映されます。

さらに、です。最後の「Folder」のsettings.jsonに設定を書くと、Workspaceに取り込んだ、特定のFolderのファイルを開くときにだけその設定が反映されます。

ですので、たとえばHugoのように、テキストファイルで文章を書くことと、htmlやcssをいじることが、同一のプロジェクト（Workspace）にあったとしても、それぞれにおいて適切な表示の仕方をカスタマズできるのです。アンビリーバボ！

これはスゲー便利で、たとえば私は文章を書くときはやや大きめのフォントサイズを指定しているのですが、「書籍リスト」とか「単語リスト」みたいなファイルは、小さめの文字で表示された方が一覧性が上がります。それらをいちいちアプリなどで切り替えることなく、ごく自然に適切に表示させられるのです。この機能には、うならされました。

テキストファイルだけしか扱わないときは、それほど威力は感じられないと思いますが、テキストとHTMLとか、そういう操作をするときは、本当にむっ茶便利です。

Workspaceだけの設定

もう一つ、Workspaceのsettings.jsonを開くと、こんな感じの項目があらかじめ設定されていると思います。

名前からなんとなく推測できるでしょうが、そのWorkspaceに取り込んだフォルダの一覧です。で、この記述の順番にExplorerでは表示されます。逆に言えば、Explorerでの表示順を変えたい場合は、このsettings.jsonを書き換えればOKです。

Evernoteなどはノートブックの順番がいじれませんが、VS Codeはその辺が融通が利くので好きです。

さいごに

ということで、今回は沼中の沼であるVS Codeのカスタマイズについて紹介しました。

ほんとうにすいませんが、詳細はググってください。ググったらきっとびっくりするはずです。あと、ショートカットキーなども設定できるのですが、それも今回は割愛しておきます。それをしなくても、十分便利なエディタですので、まずは触ってみるのが大切かなと思います。

ちなみに私は、できるだけWorkspaceごとに「見た目」を変えて、「今自分が開いているプロジェクトはこれだな」ということが視覚的に分かりやすくなるように設定しています。これだけでもずいぶん楽しいものです。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です