本文へジャンプ

時代を先取り!「Visual Studio Code」のカスタマイズ方法

Posted by Satoshi Ohki

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

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

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

Visual Studio Codeとは?

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

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

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

まずは、自分好みに操作できるよう、デフォルトの環境設定をカスタマイズしてみましょう。
カスタマイズの流れとしては、まず、「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」は、まだベータ版ということです。
正式版になれば、もっと使いやすい素晴らしいコードエディタになることでしょう。
正式版のリリースを楽しみに待ちたいですね!

FRESHERS WANTED!
Recent Entries
MD EVENT REPORT
What's Hot?
こんな僕たちの仲間に入りませんか?
Movable Type AWS 移管&アップグレード サービス
SNS・ブログ・メールからの流入数が一目でわかる
50,000円からのシネマグラフ(Cinemagraph)制作
SNS連動型クチコミ拡散システム「レビュー ジェネレーター サービス」
TAKUYAが教えるギター・レッスン
KenKenが教えるベースギター教則アプリ
2017年度 新卒採用 Webデザイナー/エンジニア、プロデューサー/ディレクター募集
スマートフォンやタブレットに最適化されたWebサイトを制作します。
1時間1万円の撮影スタジオ
Share this on
Facebook Twitter Google+ Tumblr