Visual Studio Code

Micfosoftが提供するOSSのクロスプラットフォームなコードエディタ。
Electronをベースにしており、IDE並の機能を持つ。

3rd Partyの拡張機能も多数あり、機能を拡充することができる。

Documentation

Features

矩形選択 / 複数行同時編集

マウスで範囲を選択する場合:

  • Macの場合:
    1. 始点にカーソルを合わせる
    2. Shift + Option を押しながら終点にカーソルを合わせる

キーボードで範囲を選択する場合:

  • Macの場合:
    1. 始点にカーソルを合わせる
    2. Shift + Option + ⌘ を押しながら矢印キーで終点までカーソルを移動

参考:

スニペット機能

  • ユーザ定義のスニペットを作成可能
    • File > Preferences > User Snippets
    • コメント付きJSON形式で書く
    • グローバルなスニペット
    • ワークスペースごとのスニペット
  • スニペットが有効になると、補完で選択可能になる

参考:

Preferences

昔はJSON設定ファイルを直接編集するようなスタイルだったが、2018年9月現在、GUIで設定できる項目も増えてきたようだ。

2種類の設定がある。

  • ユーザ設定 … ワークスペースによらない、ユーザ環境で常に有効になる設定。
  • ワークスペース設定 … ワークスペースの .vscode/settings.json に保存される。

Quick Reference:

config値(*)意味
editor.insertSpacestrue, falseソフトタブ(タブキーで半角スペースを挿入)のon/off
editor.renderWhitespacenone, all, boundaryスペースやタブを描画するかどうか。 boundary では単語境界は描画しない

(*)デフォルト値は太字

参考:

言語ごとの設定を行う

インデントなどの設定を言語ごとに変えることができる。

settings.jsonで "[ruby]": {} などのエントリを作って、その中に設定を記述すればいい。
コマンドパレットで Preferences: Configure language specific settings と入力し、設定したい言語を選ぶやり方もある。

参考:

自動フォーマット

https://code.visualstudio.com/docs/editor/codebasics#_formatting

config値(*)意味
editor.formatOnSavetrue, false保存時にコードフォーマッタをかける

(*)デフォルト値は太字

インデント設定

config値(*)意味
editor.detectIndentationtrue, falseファイルタイプごとのインデント設定を有効にする
editor.insertSpacestrue, falseソフトタブ(タブキーで半角スペースを挿入)のon/off
editor.tabSize4インデント幅

(*)デフォルト値は太字

なぜか設定が反映されないときや、一時的に設定を変更したいときは、画面右下のインデント設定をクリックすることでアドホックに変更が可能。

参考:

フォント設定

config値(*)意味
editor.fontSizeエディタのフォントサイズ

(*)デフォルト値は太字

参考:

ファイルを常に新しいタブで開く

workbench.editor.enablePreview: false に設定し、プレビューを無効化する。

参考:

テキストの折り返し

デフォルトは editor.wordWrap が折り返さない設定(= off)になっている。
その他、次のオプションが有る:

  • on … エディタの右端で折り返す
  • wordWrapColumneditor.wordWrapColumn で設定した値で折り返す
  • boundededitor.wordWrapColumn 設定値とエディタの幅の小さい方で折り返す

参考:

ショートカットキー

Win/LinuxMac機能
Ctrl+,⌘+,設定画面を開く
Ctrl+p⌘+pファイルを検索して開く
Ctrl+Shift+p, F1⌘+Shift+p, F1コマンドパレットを開く
Ctrl+Shift+x⌘+Shift+x拡張機能を開く
Ctrl+`Ctrl+`ターミナルの表示/非表示
Ctrl+Shift+`, Ctrl+Shift+0Ctrl+Shift+^新しいターミナルの作成
Ctrl+k v⌘+k vMarkdownファイルのプレビュー画面をサイドバイサイドで表示
Ctrl+Shift+v⌘+Shift+vMarkdownファイルのプレビュー画面を別タブで表示
Ctrl+k Ctrl+s⌘+k ⌘+sキーバインド一覧を開く
Ctrl+k Ctrl+t⌘+k ⌘+tカラーテーマ(配色)設定

リファレンス:

参考:

キーバインドの変更

↑のキーバインド一覧から変更可能

Extensions

改行コードの表示

  • code-eol
    • 設定値: code-eol.color … 改行を表す記号の文字色を16進数のカラーコードで指定。
      • 例: "#841a75" (ラズベリー色)
  • line-endings

2018年9月、code-eolを入れて使っている。

textlint

日本語の書き方など指摘・修正してくれるLintツール。

使い方:

How-to

VS Codeの更新

Ubuntu:

  1. debパッケージをダウンロード
  2. sudo dpkg -i code_xxx.deb