Visual Studio Code
Micfosoftが提供するOSSのクロスプラットフォームなコードエディタ。
Electronをベースにしており、IDE並の機能を持つ。
3rd Partyの拡張機能も多数あり、機能を拡充することができる。
Documentation
- https://code.visualstudio.com/docs
- Get Started:
- User Guide:
Features
矩形選択 / 複数行同時編集
マウスで範囲を選択する場合:
- Macの場合:
- 始点にカーソルを合わせる
Shift + Optionを押しながら終点にカーソルを合わせる
キーボードで範囲を選択する場合:
- Macの場合:
- 始点にカーソルを合わせる
Shift + Option + ⌘を押しながら矢印キーで終点までカーソルを移動
参考:
スニペット機能
- ユーザ定義のスニペットを作成可能
File > Preferences > User Snippets- コメント付きJSON形式で書く
- グローバルなスニペット
- ワークスペースごとのスニペット
- スニペットが有効になると、補完で選択可能になる
参考:
Preferences
昔はJSON設定ファイルを直接編集するようなスタイルだったが、2018年9月現在、GUIで設定できる項目も増えてきたようだ。
2種類の設定がある。
- ユーザ設定 … ワークスペースによらない、ユーザ環境で常に有効になる設定。
- ワークスペース設定 … ワークスペースの
.vscode/settings.jsonに保存される。
Quick Reference:
| config | 値（*） | 意味 |
|---|---|---|
editor.insertSpaces | true, false | ソフトタブ（タブキーで半角スペースを挿入）のon/off |
editor.renderWhitespace | none, all, boundary | スペースやタブを描画するかどうか。 boundary では単語境界は描画しない |
（*）デフォルト値は太字
参考:
言語ごとの設定を行う
インデントなどの設定を言語ごとに変えることができる。
settings.jsonで "[ruby]": {} などのエントリを作って、その中に設定を記述すればいい。
コマンドパレットで Preferences: Configure language specific settings と入力し、設定したい言語を選ぶやり方もある。
参考:
自動フォーマット
https://code.visualstudio.com/docs/editor/codebasics#_formatting
| config | 値（*） | 意味 |
|---|---|---|
editor.formatOnSave | true, false | 保存時にコードフォーマッタをかける |
（*）デフォルト値は太字
インデント設定
| config | 値（*） | 意味 |
|---|---|---|
editor.detectIndentation | true, false | ファイルタイプごとのインデント設定を有効にする |
editor.insertSpaces | true, false | ソフトタブ（タブキーで半角スペースを挿入）のon/off |
editor.tabSize | 4 | インデント幅 |
（*）デフォルト値は太字
なぜか設定が反映されないときや、一時的に設定を変更したいときは、画面右下のインデント設定をクリックすることでアドホックに変更が可能。
参考:
- VS Codeでインデントを設定するには：Visual Studio Code TIPS - ＠IT
- 【Visual Studio Code】インデント幅の変更方法と、変えても反映されない時の対処法
- vscode - Visual Studio Codeで言語ごとにインデントの設定をしたい - スタック・オーバーフロー
フォント設定
| config | 値（*） | 意味 |
|---|---|---|
editor.fontSize | エディタのフォントサイズ |
（*）デフォルト値は太字
参考:
ファイルを常に新しいタブで開く
workbench.editor.enablePreview: false に設定し、プレビューを無効化する。
参考:
テキストの折り返し
デフォルトは editor.wordWrap が折り返さない設定(= off)になっている。
その他、次のオプションが有る:
on… エディタの右端で折り返すwordWrapColumn…editor.wordWrapColumnで設定した値で折り返すbounded…editor.wordWrapColumn設定値とエディタの幅の小さい方で折り返す
参考:
ショートカットキー
| Win/Linux | Mac | 機能 |
|---|---|---|
Ctrl+, | ⌘+, | 設定画面を開く |
Ctrl+p | ⌘+p | ファイルを検索して開く |
Ctrl+Shift+p, F1 | ⌘+Shift+p, F1 | コマンドパレットを開く |
Ctrl+Shift+x | ⌘+Shift+x | 拡張機能を開く |
Ctrl+` | Ctrl+` | ターミナルの表示/非表示 |
Ctrl+Shift+`, Ctrl+Shift+0 | Ctrl+Shift+^ | 新しいターミナルの作成 |
Ctrl+k v | ⌘+k v | Markdownファイルのプレビュー画面をサイドバイサイドで表示 |
Ctrl+Shift+v | ⌘+Shift+v | Markdownファイルのプレビュー画面を別タブで表示 |
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:
- debパッケージをダウンロード
sudo dpkg -i code_xxx.deb