MD-Blog_Web Creative

はじめまして。新人クリエイターのOhkiです。

自分は現在「Visual Studio Code」を使用してWebサイト制作をしているのですが、何故使い始めたかというと、某コードエディタを使用中、動作が重く頻繁にフリーズしていたため、機能が豊富で動作が軽いものはないかと探していたところ、丁度良いタイミングでベータ版がリリースされたので、試してみるとサクサク動いて使い勝手が良かったので、乗り換えました。

そこで、さらに使い勝手を良くするためにカスタマイズ方法をご紹介します。

Visual Studio Codeとは？

Microsoft製のクロスプラットフォーム対応（Windows、Mac OS X、Linux）のコードエディタです。
Atomと同じく、GitHub製のElectronを使用して作られ、軽量で高速、IntelliSense搭載、デバッグ機能内蔵などが特徴です。

インストール方法や、基本的な使い方は下記のサイトをご覧になってください。

• @IT Visual Studio Codeの使い方、基本の「キ」
• CodeZine マイクロソフトのクロスプラットフォーム対応新コーディングツール「Visual Studio Code」

自分好みの環境設定をしよう！

まずは、自分好みに操作できるよう、デフォルトの環境設定をカスタマイズしてみましょう。
カスタマイズの流れとしては、まず、「File > Preferences > User Settings」からsettings.jsonを開き、デフォルトから変更したいものを記述します。

下記に変更される方が多いであろうプロパティをピックアップしたので、参考にしてください。（値はデフォルトのままです）

プロパティ

{
    // フォントの種類
    "editor.fontFamily": "",
    // フォントの大きさ
    "editor.fontSize": 0,
    // 行の高さ
    "editor.lineHeight": 0,
    // 行番号の表示
    "editor.lineNumbers": true,
    // グリフマージンの表示
    "editor.glyphMargin": false,
    // タブのサイズ
    "editor.tabSize": 4,
    // タブ入力時、タブの代わりにスペースにする
    "editor.insertSpaces": true,
    // 選択範囲の角を丸くする
    "editor.roundedSelection": true,
    // 最終行を越えてスクロールさせる
    "editor.scrollBeyondLastLine": true,
    // 一行の最大文字数
    "editor.wrappingColumn": 300,
    // 行を折り返した後の開始位置
    "editor.wrappingIndent": "same",
    // マウスホイールのスクロール量
    "editor.mouseWheelScrollSensitivity": 1,
    // 入力補完を表示する
    "editor.quickSuggestions": true,
    // 入力補完の表示を何ms遅らせるか
    "editor.quickSuggestionsDelay": 10,
    // 括弧開きを入力したとき括弧閉じを自動的に入れる
    "editor.autoClosingBrackets": true,
    // 改行したとき自動的にフォーマットをする
    "editor.formatOnType": false,
    // インテリセンスの補完をトリガ文字が入力されたら表示する
    "editor.suggestOnTriggerCharacters": true,
    // 選択したものと共通の物をハイライト表示する
    "editor.selectionHighlight": true,
    // 概要ルーラー内の同じ行位置に表示されるデコレーションの数
    "editor.overviewRulerLanes": 3,
    // カーソルの点滅動作
    "editor.cursorBlinking": "blink",
    // 概要ルーラーで現在のカーソル位置を隠す
    "editor.hideCursorInOverviewRuler": false,
    // 空白文字列の表示
    "editor.renderWhitespace": false,
    // サポートされているならリファレンスを表示
    "editor.referenceInfos": true
}

スニペット

スニペットとは、よく使う定型コードを登録し簡単に記述できるようにしたものです。
これをさらに使い勝手良く効率化させてみましょう。

「File > Preferences > User Snippets」から対応する言語を選び、jsonファイルに記述します。

{
    /*
    "スニペットの名前": {
        "prefix": "スニペットのトリガー"
        "body": [
            "スニペットの内容"
        ],
        "description": "スニペットの概要"
    }
    */
    // 記述例
    "mixin": {
        "prefix": "mixin",
        "body": [
            "@mixin $1($2) {",
            "   $3",
            "}"
    ],
    "description": "Define a mixin"
    },
    "include": {
        "prefix": "include",
        "body": [
            "@include $1($2);"
        ],
        "description": "Define a include"
    }
}

記述方法は上記のようになります。

「$」マークが付いているものは"タブストップ"と呼ばれるもので、タブを押すごとに、「$1」→「$2」→「$3」と入力位置が移動します。
この様に、よく使うコードを登録しておくことで、コーディング速度を速めることが出来ます。

ショートカット

まずはじめに、よく使うであろうデフォルトのショートカットをピックアップしました。

新しいファイル	ctrl + N
新しいウィンドウ	ctrl + shift + N
ファイルを開く	ctrl + O
ファイルを保存	ctrl + S
名前をつけて保存	ctrl + shift + S
現在選択中のファイルを閉じる	ctrl + W
ウィンドウを閉じる	ctrl + shift + W
コピー	ctrl + C
カット	ctrl + X
ペースト	ctrl + V
元に戻す	ctrl + Z
やり直し	ctrl + Y
インテリセンスを表示	ctrl + space
パラメータヒントの表示	ctrl + shift + space
ファイル内検索	ctrl + F
置換	ctrl + H
ファイルを検索	ctrl + P
コマンドを検索	F1
フォーマット	shift + alt + F
行をコメントアウト	ctrl + /
ブロックをコメントアウト	shift + alt + A
インデント	ctrl + ]
アウトデント	ctrl + [
選択中の行を下へ	alt + down
選択中の行を上へ	alt + up
サイドバーの表示・非表示	ctrl + B
リネーム	F2
定義元へ移動	F12
フルスクリーン	F11

これをさらに便利に使用できるよう変更してみましょう。
「File > Preferences > Keyboard Shortcuts」からkeybindings.jsonを開き記述します。

[
    /*
    {
        "key": "キーバインド",
        "command": "実行内容",
        "when": "キーバインドが有効になる条件（省略可）"
    }
    */
    // 記述例
    {
        "key": "ctrl+shift+r",
        "command": "workbench.action.tasks.runTask"
    },
    {
        "key": "ctrl+shift+delete",
        "command": "workbench.action.tasks.terminate"
    },
    {
        "key": "ctrl+shift+i",
        "command": "workbench.extensions.action.installExtension"
    },
    {
        "key": "shift+alt+backspace",
        "command": "deleteAllLeft",
        "when": "editorTextFocus"
    },
    {
        "key": "shift+alt+delete",
        "command": "deleteAllRight",
        "when": "editorTextFocus"
    }
]

記述方法は上記のようになります。

よく使うコマンドをキーバインドしておくと、作業スピードが断然速くなります。
※デフォルトのショートカットも上書きできるので、割り当てるキーバインドが使用されていないか確認することをオススメします。

カラーテーマを変えよう！

カラーテーマとは、文字色や背景色などを変更できる機能です。
自分好みのテーマを見つけることで、可読性が上がり、特にコードを書くときより読むときに重宝します。

変更方法は、「File > Preferences > Color Theme」から好きなテーマを選択します。
デフォルトでは数が少ないですが、下記のエクステンションで増やすことが出来ます。

エクステンション

昨年の11月にベータ版がリリースされたのと同時にエクステンション機能（拡張機能）が搭載されました。
エクステンションをインストールすることで、さらに自分好みにカスタマイズすることが出来ます。
早速、インストールしてみましょう。

まずは、Visual Studio Marketplace へアクセスしてください。

エクステンションは「Debuggers」「Languages」「Linters」「Snippets」「Themes」「Other」というカテゴリに分かれているので、そこからインストールしたいエクステンションを探し出し、コマンドパレットに「ext install エクステンション名」と入力してインストールします。

いかがだったでしょうか？

自分の使いやすいようにカスタマイズして作業効率アップを図ってください。
そして、忘れてはならないのが「Visual Studio Code」は、まだベータ版ということです。
正式版になれば、もっと使いやすい素晴らしいコードエディタになることでしょう。
正式版のリリースを楽しみに待ちたいですね！