メニュー

WEBMEMOする。とあるクリエイターの個人的な備忘録。

長らくお世話になっていたSublime Text (以下、Sublime) からVisual Studio Code (以下、VS Code) へ乗り換えました。

  • 2018年心機一転で別のエディタを使ってみたかった。
  • VS Codeはターミナルを動かせる。
  • 新しくgulpやgitの導入を考えており、VS Codeがそれらとうまく連携もできるらしい

というような理由から、一度触ってみようと思ってインストールしたところ、これがなかなか素晴らしい。

何が素晴らしいかというと、プラグイン一つでショートカットキーがSublimeと同じになることと、コードカラーにmonokaiがあること。

つまり、Sublimeと同じように使えるのです。笑

かつ、Sublimeより様々な点で優れているように感じました。定期的に出てくる有料版への催促画面も出てきませんし。

 

というわけで、Sublimeが染み付いてなかなか抜け出せないけど、新しいエディタ使ってみたいと思っている同じような境遇の方に向けて備忘録を残します。

目次

    VS Codeをインストール

    まずはインストール。

    公式サイトから自分の環境に合わせたものをダウンロードして下さい。

    アプリケーションがインストール出来たらさっそく開いてみましょう。

    デフォルトでサイドバーには5つのアイコンがありますね

    • エクスプローラー
    • 検索機能
    • ソース管理
    • デバック機能
    • 拡張機能

    初見でまず思ったのは、自分がどの拡張機能を使ってるのかすぐに見ることができるのはなかなかいいな、ということぐらいでしょうか。

    あとはデバック機能も標準で備わっているようですね。

    まずは適当にhtmlファイルでも作成してみましょうか。

    Cmd + Nで新規ファイルを作成できます。先に拡張子を.htmlにして保存しておけば「html」と入力するだけで以下のようなhtmlコードが展開されます。

    デフォルトのカラーリングは本家Visual Studioと同じような色合いをしていますね。

    サイドバーのエクスプローラーを開いていると、現在読み込んでいるディレクトリやファイルが確認できます。

    Sublime Textに合わせまくる

    さて、さっそくですがSublimeに寄せていきましょう。

    まずはカラーリングですね。monokaiに変更しましょう。

    テーマカラーの変更

    メニューの「基本設定 -> 配色テーマ」と進むか、cmd +Kcmd + Mのショートカットキーを押してください。(「ようこそ」画面の右の方に「配色テーマ」というものがあるので、そちらからでも可能です。)

    もしくは、cmd + shift + Pでコマンドパレットを展開し(コマンドパレットとは)、「color」と入力。「配色テーマ」を選択します。

    すると、次のように配色テーマの一覧が出てきます。

    デフォルトでは「Dark+」となっていますので、「Monokai」を選択しましょう。

    Monokaiになれば、先ほどのhtmlファイルが以下のような見た目になるはずです。

    ああ、落ち着きますね。

    (2018/2/8 追記)VS CodeのMonokaiが少し気に食わなかったのでカスタマイズしてみました。

    マルチカーソルの変更

    マルチカーソルとは、複数箇所にカーソルを合わせる機能のことです。

    VS Codeのマルチカーソルはデフォルトではalt + クリック ですが、Sublimeではcmd + クリックでしたので、そのように変更しましょう。

    メニューから「選択 -> マルチカーソルをCmd + Clickに切り替える」を選択します。

    これでOKです。

    ショートカットキーをSublimeと同じにする

    さて、VS Codeが魅力的なのはここです。「Sublime Text Keymap」というプラグインをインストールするだけで、ショートカットキーがSublimeと同じになります!

    サイドバーの四角いアイコンをクリックするとプラグインを管理する画面が現れるので、検索欄に「sublime」と入力しましょう。

    上記の画像ではすでにインストール・有効化してしまった後の画面ですが、「Sublime Text Keymap」を選択すると、「インストール」というボタンがあるかと思いますので、そちらをクリックしてください。

    続けて、「有効」を選択して「再読み込み」をするとVS Codeが再起動し、プラグインが有効化されている状態になります。

    さて、確認してみましょうか。

    Sublimeといえば、Cmd + Dの複数選択機能。

    試してみると…

    できました!

    これには感動です。

    SFTP/FTPプラグイン

    FTPのアップロードをささっとこなしてくれるプラグインについてです。

    この辺は人それぞれだと思いますが、私はSublimeでは「SFTP」というプラグインを使用していました。

    Ctl + Alt + U → Ctl + Alt + FでいつもFTPアップロードしていたので、ここも揃えていきたいと思います。

    VS Codeでも「sftp」という名前のプラグインがありますので、まずはそちらをインストールします。(他にもいくつかftp用のプラグインはあります)

    インストールが完了したら、実際に使用してみましょう。

    Sublimeでの「SFTP」と同様、設定用のjsonファイルがフォルダごとに必要になりますので、まずはそのjsonファイルを作成します。

    コマンドパレットにて「sftp」と入力すると、「SFTP:Config」という項目が出てくるので、そちらを選択します。

    すると、現在読み込んでいるフォルダが一覧で出てきます。

    jsonファイルを作成・編集したいフォルダを選択します。

    すると、以下のような「sftp.json」というファイルが新規作成されますので、この中身を各自FTP情報に合わせて編集しましょう。

    いっぱい書いていますが、編集するのはhost, username, password, protocol, remotePathくらいでしょうか。

    編集できたら、保存して閉じておきましょう。

    さて、次はアップロードの方法です。

    サイドバーや編集中のエディタ画面を右クリックし、「SFTP:Upload」を選択すると可能です。(もちろんコマンドパレットからも可能です。)

    しかし、これでは使いにくいのでショートカットキーを割り当てましょう。

    メニューの「基本設定 -> キーボードショートカット」から、ショートカットキーを編集できます。

    ショートカットキーの編集方法は後述していますので、そちらをご覧ください。

    「キーバインドの検索」エリアに「sftp」と入力すると、sftpプラグインの機能が出てきますので、好きなショートカットキーを割り当てて下さい。

    この画像では、Ctl + Alt + U → Ctl + Alt + Fにしています。

    VS Codeの基本的なこと

    本題は終了しましたが、VS Codeを使っていく上で最低限知っておくと良さそうなことをいくつかまとめておきます。

    • コマンドパレットについて
    • プラグインのインストール方法
    • インデント設定の切り替え
    • 言語モードの切り替え
    • ユーザー設定の表示・カスタマイズ
    • 半角スペースの可視化
    • emmet
    • ショートカットキーのカスタマイズ
    • スニペット機能

    コマンドパレットについて

    VS Codeではものすごく重要なのが、cmd + shift + Pで開けるコマンドパレット。

    Sublimeではパッケージをインストールする時によく使用するあれですね。

    VS Codeのほとんどの機能がこのコマンドパレットから使用できます。何かしたい時はとりあえずコマンドパレットにその動作のキーワードを入力してみてください。

    例えば、新規ファイルを作成したい時、cmd + Nで作成できますが、このショートカットキーを忘れてしまった場合はコマンドパレットで「New File」や「新規ファイル」とでも打ち込んでみましょう。

    すると、以下のようにVS Codeが実行できる機能の中から該当する候補を出してくれます。

    プラグインのインストール方法

    VS Codeでプラグインをインストールする時は、サイドバーの拡張機能(一番下の四角いアイコン)から簡単に検索・インストール・有効化・無効化ができます。

    この画像ではいくつかすでにインストールしてしまっていますが、デフォルトではおそらく「C#」のみがインストールされています。

    各プラグインを選択すると、そのプラグインの説明画面が現れ、有効化・無効化の切り替えやアンインストールなども簡単にできます。(サイドバーの「歯車アイコン」をクリックしても無効化やアンインストールが可能です。)

    インデント設定の切り替え

    インデントにスペースタブのどちらを使用するか、その幅はいくつか、といった設定の方法を確認しておきます。

    VS Codeの右下に「スペース:4」という風に、使用しているインデントとそのインデント幅が表示されているかと思います。

    こちらをクリックすると、コマンドパレットが開きます。(もしくはコマンドパレットを開き、「インデント」や「indent」と入力してもOK)

    タブとスペースの単純な切り替えは「インデントをタブ(スペース)に変換」を選択します。

    インデントのサイズを変更したい時は、「タブ(スペース)によるインデント」を選択すると、次にそのインデント幅を選択できます。

    言語モードの切り替え

    インデントと同様、右下に現在の言語モードが表示されています。(新規ファイルでは「プレーンテキスト」と表示されています)

    クリックすると、コマンドパレットが開きます。

    上記の中から使用したい言語モードを選択しましょう。

    以下のように、先にコマンドパレットを開いてから「言語」や「change lang」などと入力すると「言語モードの変更」と出てきますので、そちらからでも同様の言語選択画面が出現します。

    ユーザー設定の表示・カスタマイズ

    ユーザー設定はcmd + ,で開くことが可能です。または、コマンドパレットで「ユーザー」などと入力すると「基本設定:ユーザー設定を開く」というのが出てくるので、そちらからでもOKです。

    すると、以下のようにユーザー設定の画面が出現します。

    左側に各設定項目とそのデフォルト値が表示されています。この左側の画面は編集が不可能になっており、VS Codeではこれらをカスタマイズしたい場合、右側の画面に上書きしたい値を入力していきます。例えば、上記ではfont-sizeの設定を13pxに変更しています。

    半角スペース・タブの可視化

    半角スペース・タブを可視化したい場合は、上記で述べたユーザー設定に以下を追記します。

    "editor.renderWhitespace": "all",

    allの部分は以下の3つが設定可能です。

    • none : スペースを表示しない(デフォルト)
    • all : すべてのスペースを表示する
    • boundary : 単語間の単一スペースは表示しない

    emmet

    emmetはコーディングを高速化できるすごく便利な機能です。(知らない方はググってみてください。)

    Sublimeではプラグインをインストールする必要がありましたが、VS Codeでは標準で搭載されています。

    しかし、デフォルトではtabキーで展開できるものとそうでないものがある(pタグなどはデフォルトでは展開してくれない)ので、ユーザー設定からtabキーで必ずemmetが動作するように設定しておきましょう。

    "editor.formatOnPaste": true,

    これでpタグなどもtabキーで展開できるようになります。

    ショートカットキーのカスタマイズ

    ショートカットキーのカスタマイズ方法も確認しておきましょう。(あとでプラグインでsublimeと同じショートカットキーにしていきますので、ここでは確認だけにしておいてください。)

    コマンドパレットで「キーボード」や「ショートカット」などと入力してください。

    キーボードショートカットを開く」を選択します(もしくはcmd + Kcmd + S のショートカットキーからでもOKです)。

    すると、次のようにショートカットキーの一覧が確認できます。

    キーを変更したい場合は、左側の「えんぴつアイコン」から可能です。

    また、右クリックで他のショートカットキーとの競合を調べることもできます。

    スニペット機能

    VS Codeではユーザー独自のスニペットを登録することが可能です。

    コマンドパレットで「スニペット」や「snippets」などと入力してください。

    ユーザースニペットを開く」を選択すると、以下のように言語がたくさん出てきます。

    VS Codeでは、スニペットを言語モードごとに登録していきます。これが面倒だと思うか便利と思うかは人それぞれかもしれませんが、私はけっこう便利かなと思いました。

    スニペット登録の記述ルールに関しては公式サイト:独自スニペットを作成を参考にしてください。

    試しに、HTMLを選択し、phpタグを挿入するスニペットと、if文を挿入するスニペットを登録してみました。

    html.jsonに以下を追記

    "Insert PHP tag": {
      "prefix": "php",
      "body": [
        "<?php $1 ?>"
      ],
      "description": "Insert PHP tag"
    },
    "Insert if with tag": {
      "prefix": "if",
      "body": [
        "<?php if($1): ?>",
        "<?php else: ?>",
        "<?php endif; ?>"
      ],
      "description": "create if with php tags"
    }

    これによって、例えばphpファイルの中のhtml文の中で「php」と入力すると、以下のように先ほど登録したスニペットが出てきます。

    これを選択することで<?php  ?>が展開されれ、この中にカーソルが移動します。

    また、このスニペットはHTML文だけに有効なので、phpタグの中では機能しません。

    試しにphp文の中で先ほどと同様、「php」と入力してみると、以下のようにスニペットは表示されません。

    不必要な場面で余計なスニペットが選択されてしまうことがないので、なかなか便利です。

    さらに例を挙げますと、先ほどhtml.jsonに追記したif文を挿入するスニペットがその真価を発揮しています。

    html文で「if」と入力してtabキーを押すと、自分で登録したphpタグ付きif文が展開されます。

    しかし、php文の中だと、VS Codeがデフォルトで用意してくれている普通のif文が展開されます。

    例:html文とphp文の中での「if」の展開の違い

    //html文で展開された「if」
    <?php if(): ?>
    <?php else: ?>
    <?php endif; ?>
    
    //php文で展開された「if」
    <?php
      if (condition) {
        # code...
      }
    ?>

    ミニマップの設定

    ミニマップとはエディタの右側に表示されている以下のようなやつですね。

    コードが長くなってきた時にどの辺のコードを触っているのか分かりやすくて便利です。

    このミニマップについての設定を少し紹介しておきます。

    1. “editor.minimap.showSlider”: “always”,
    2. “editor.minimap.renderCharacters”: false,

    1  は、ミニマップ上のハイライトを常に有効にする設定です。デフォルトではマウスオーバーして初めてハイライトされるように設定されています。

    2 は、ミニマップに表示されているコードをカラーブロックに変更する設定です。デフォルトでは一応文字を表示してくれているのですが、どうせ読めるような大きさでもないので、カラーブロックでいいかなと思って私はこちらの設定にしています。動作が少し軽くなりそうな気がするので…笑

    改行コードについて

    デフォルトでは(Macの場合)、改行は “\n” が使用されています。

    この改行コードを変更する場合(あまりないと思いますが)、“files.eol”という設定項目で変更できます。

    PHPについての注意

    PHPについては、デフォルトで「定義へ移動」ができないそうです。

    PHP IntelliSenseというプラグインを使用すればそれも可能になるので特に問題はないのですが、この時、PCにインストールされているPHPのバージョンが7.0以上じゃないと動作してくれないみたいなので、注意が必要です。

    コマンドラインに不慣れな方はPHPのバージョンアップとか怖いかもしれないですが、こことか見れば大丈夫だと思います。

    おわりに

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

    Visual Studio Code、結構良くないですか?

    私はSublime Textからの乗り換えだったのでSublime Textに寄せましたが、おそらく様々なエディタに寄せることができると思います。

    もちろん、何に寄せることなくVisual Studio Codeそのままで十分魅力的ですので、気になった方は是非触ってみてください。

    - Thank you for reading this to the end. -

    コメントする

    CAPTCHA


    TOPへ Top