Visual Studio Codeを使い始めて、1年ほど経過したでしょうか。
もうすっかり離れられなくなっております。

あんなに溺愛していたSublime Textでさえ、たまに開いてみると使いにくくて仕方ない...。

今回は、そんな素晴らしいエディタ、Visual Studio Code (以下、vscode)の基本的な設定項目をまとめていこうと思います。

というのも、vscodeは日々アップデートが繰り返されており、どんどんと利便性が高まっています。
それに伴い、基本的な機能も増えてきたので、一度まとめておこうかなと思いまして。
(アップデートでいい感じの機能が増えればどんどんここへ追記していく予定です。)

 

目次

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

vscodeですごく重要なのが、コマンドパレットという総合管理ツール。

画面左下の「歯車アイコン」をクリックすると、「コマンドパレット」という項目が出てきます。

vscodeのコマンドパレット

ここをクリックするか、もしくはショートカットキーcmd + shift + Pを入力すると以下のような画面が展開されます。

vscodeのコマンドパレット

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

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

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

コマンドパレットで新規ファイル作成

どちゃくそ便利です。

困ったら即、cmd + shift + P

配色テーマの変更

vscodeの標準カラーは青系の色味で統一されていますが、自分の好みのコードカラーリングへ変更することができます。

画面左下の「歯車アイコン」をクリックすると、「配色テーマ」という項目が出てきます。

vscodeの配色テーマ

ここをクリックするか、もしくはショートカットキーcmd +Kcmd + Mを入力すると以下のような画面が展開されます。

vscode配色テーマ一覧

デフォルトでは「Dark+」となっていますので、好きな配色テーマを選択しましょう。

プラグイン(拡張機能)のインストール方法

vscodeでは、便利なプラグインがたくさん開発されています。

そんな便利なプラグインをインストールしたい時は、左端ツールバー内の「拡張機能」から簡単に検索・インストール・有効化・無効化ができます。

ツールバーの一番下にある四角いアイコンですね。

vscode拡張機能

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

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

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

コーディング時に欠かせない、インデントに関する設定についても見ておきましょう。
「スペースかタブのどちらか」「その幅はいくつか」といった設定を行えます。

vscodeの右下に「スペース:4」というような表示があるかと思いますが、ここに現在使用しているインデントとそのインデント幅が表示されています。

現在のインデント設定

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

インデント設定

(コマンドパレットを直接開き、「インデント」や「indent」と入力しても上記の画面が出てきます。)

「タブ」と「スペース」の単純に切り替えたい時や一括置換したい時は「インデントをスペースに変換」または「インデントをタブに変換」を選択します。

インデントのサイズを変更したい時は、「スペース(タブ)によるインデント」を選択します。
すると、以下のような画面に遷移します。

インデント幅設定

こちらから好きなインデント幅を選択しましょう。

言語モードの切り替え方法

インデント設定と同様、右下に 現在の言語モード が表示されています。
(例えば、新規ファイルを開くと「プレーンテキスト」と表示されているでしょう。)

現在の言語モード

こちらをクリックすると、以下のようにコマンドパレットが展開されます。

言語モード一覧

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

また、右下をクリックしなくても、直接コマンドパレットを開いてから「言語」や「change lang」などと入力すると以下のように「言語モードの変更」という項目出てきますので、ここからでも同じく設定可能です。

言語モード

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

ショートカットキーのカスタマイズ方法も確認しておきましょう。

画面左下の「歯車アイコン」をクリックすると、「キーボード ショートカット」という項目が出てきます。

vscodeのキーボードショートカット

ここをクリックするか、もしくはショートカットキーcmd + Kcmd + S を入力すると以下のような画面が展開されます。

キーボードショートカット画面

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

また、右クリック→「競合の表示」を選択すると、既存のショートカットキーと同じキーを登録していないかどうか調べることができます。

ショートカットの競合の表示

ユーザー設定

ここからはjsonファイルを編集してカスタマイズ可能な設定項目について紹介します。

ユーザー設定はショートカットキーcmd + ,で開くことができます。
以下のような画面が展開されるかと思います。

ユーザー設定画面

画面が左右に別れていますね。

左側には、各設定項目とそれらのデフォルト値や説明が表示されています。こちらはヘルプ的なもので、編集はできません。
そして、左側にある設定項目の中から上書きしたい項目を右側に記述していきます。

右側に設定を追記していく ということを覚えておきましょう。

では、その中から実際に便利な項目についての設定方法を紹介していきたいと思います。

フォントサイズとフォントファミリーの設定

使用するフォントや、そのサイズを好きにカスタマイズできます。

{
    // 他の設定...
    "editor.fontSize": 13,
    "editor.fontFamily": "使用したいフォント名",
}

 

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

これは欠かせないですよね。

{
    // ...
    "editor.renderWhitespace": "all",
}

上記の"all""boundary"とすると、「単語間の単一スペースは表示しない」という設定にできます。

emmetをtabキーで展開

「emmet」とは、はコーディングを高速化できるすごく便利な機能です。
(Sublime Textなどではプラグインをインストールしないと使えない機能ですが、vscodeでは標準搭載されています。)

しかし、デフォルトではtabキーで展開できるものとそうでないものがあります。(例えばpタグなどはデフォルトでは展開してくれない...)

なので、tabキーで必ずemmetが動作するように設定しておきましょう。

{
    // ...
    "editor.formatOnPaste": true,
}

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

ミニマップの設定

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

ミニマップ

このミニマップに関する設定を2つほど紹介しておきます。

ミニマップ上のハイライトを常に有効にする設定

現在エディタで表示されている領域をミニマップで常にハイライトしてくれる設定です。(標準ではミニマップ上にマウスをのせないとハイライトされません)

{
    // ...
    "editor.minimap.showSlider": "always",
}

ミニマップ内のコードをカラーブロック化する設定

ミニマップに表示されているコードは小さくて読めないのですが、一応ちゃんと文字が描画されいるようです。
この文字をただのカラーブロックに変更することができます。どうせ読めないので、負荷を減らしておきましょう。

{
    // ...
    "editor.minimap.renderCharacters": false,
}

コードの折り返し

横に長いコードを書いた時にコードを折り返すかどうかの設定です。
次の値を指定できます。

  • "off" (折り返さない) (デフォルト),
  • "on" (ビューポートで折り返し),
  • "wordWrapColumn" ('editor.wordWrapColumn' で折り返し) 
  • "bounded" (ビューポートと 'editor.wordWrapColumn' の最小値で折り返し)

後半2つはよくわからないのですが、折り返したいならとりあえず"on"でいいでしょう。

{
    // ...
    "editor.wordWrap": "on",
}

スニペットをTabで展開できるようにする

スニペットを使いこなす人には必須の設定ではないでしょうか。

{
    // ...
    "editor.tabCompletion": true,
}

スニペットを他の修正候補より優先して表示する

こちらもスニペット関係。デフォルトでは下の方に表示されて使いづらいので、優先表示しておくと便利です。

{
    // ...
    "editor.snippetSuggestions": "top",
}

改行コードについて

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

この改行コードをもし変更する場合(あまりないと思いますが)、"files.eol"という設定項目で変更できますので、一応覚えておいてもいいかもしれません。

シェルの変更

Windowsでは、vscode内臓ターミナルのシェルを bash にしておくことを個人的にはおすすめします。

{
    // ...
    "terminal.integrated.shell.windows": "bash.exeまでのパス",
}

例えばGit Bashをインストールしている場合、そのbashを使用できるので、

{
    // ...
    "terminal.integrated.shell.windows": "C:\\Program Files\\Git\\bin\\bash.exe",
}

のようにするとbashが選択できるようになります。

マルチカーソルの変更

「マルチカーソル」とは、複数箇所にカーソルを合わせる機能のことです。
vscodeでののマルチカーソルはデフォルトではalt + クリックですが、これをcmd + クリックに切り替えることができます。

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

vscodeマルチカーソルの切り替え

スニペット機能

別記事にてまとめ中です...

ファイルアイコンのカスタマイズ

意外と気づかないのですが、ファイルアイコンは配色テーマと同様、テーマを切り替えて好きな見た目にカスタマイズ可能です。

個人的にはデフォルトの「seti」というテーマで十分見やすいのですが、フォルダに関するアイコンについてはなぜか小さな3角形だけなのが少し見にくい...。

ってことでファイルアイコンのテーマをカスタマイズしてみました。デフォルトの「seti」で使用されている各ファイルアイコンはそのまま、フォルダアイコンだけ追加することに成功したので、ぜひ参考にしてみて下さい。

VS Codeのファイルアイコンテーマsetiをカスタマイズしてフォルダアイコンを表示させる方法VS Codeのファイルアイコンテーマsetiをカスタマイズしてフォルダアイコンを表示させる方法

PHPでの「定義へ移動」機能について

vscodeでは、「定義へ移動」という機能があり、関数を使用している箇所から定義位置へジャンプしたり、その場に定義内容を表示させることができます。

ただ、PHPに関してはデフォルトではそれが機能しないようで、「PHP IntelliSense」というプラグインを使用しなくてはなりません。

この時、PCにもPHPをインストールしないと動作しないので注意が必要です。また、PHPのバージョンが7.0以上じゃないとうまく機能しないので、そこも注意してください。

おわりに

gulpは一瞬で起動できるしgitとも連携できるし、vscode、最高です。

- Thank you for reading. -

コメント

コメントする