こんにちは、さち です。
普段、ウェブページの作成には「Visual Studio Code（以下：VSCode）」を使っています。無料で使えるのに機能も充実しているので、とっても便利です。
今回は、この VSCode を便利に使うための「小技」について書いていきます。
正直に言うと、私が使っている機能で、一つ一つは大した内容じゃないけど地味に便利な機能を、備忘録として残す記事です。
拡張機能は使わない機能ばかりなので、はじめて知るものがあれば、ぜひ使ってみて下さい。
【まえおき】 「settings.json」の編集方法
後ほど出てくる、VSCode の設定ファイル「settings.json」を開く方法については、こちらの記事を参考にして下さい。
「settings.json」を編集（記述）するときは、下記の例のように最初の { と最後の } の間に追記します。上書き保存も忘れずにしましょう。
{
"editor.fontSize": 13,
}
いろいろな小技
「作業の開始」を非表示にする
- VSCode を起動直後に表示される「作業の開始（ウェルカムページ）」です。起動する度に閉じるのが面倒なので、非表示にしてみましょう。
- 「settings.json」に次のように追記します。
"workbench.startupEditor": "none",
- これで、起動直後に何も表示されなくなります。
ちなみに、「作業の開始」ページの下部にある「起動時にウェルカム ページを表示する」のチェックを外しても、同じ効果が得られます。（「settings.json」が自動で編集される）
ファイルを Windows エクスプローラーで表示
- VSCode のエクスプローラーにあるファイル上で「右クリック」→「エクスプローラーで表示する」と進みます。（ショートカットキーは Shift + Alt + R）
- Windows の「エクスプローラー」で、ファイルがあるフォルダーが開かれます。
不要なファイルを隠す
画像アプリの専用ファイル（psd, ai, Affinty関連）など、VSCode に必要ないファイルを非表示にしてみましょう。
例えば、拡張子が「afdesign」のファイルを非表示にするには、「settings.json」に次のように追記します。
"files.exclude": {
"**/.git": true,
"**/.svn": true,
"**/.hg": true,
"**/CVS": true,
"**/.DS_Store": true,
"**/Thumbs.db": true,
"**/*.afdesign": true,
},
最後の "**/*.afdesign": true 以外は、"files.exclude" を入力した時に自動入力されるものです。必要なければ削除しても構いません。
ちなみに、「afdesign」ファイルは、Adobe Illustrator の代替として優秀な買い切りアプリです。どんなアプリか興味がある方は、こちらの記事をどうぞ。
インストール済み「拡張機能」を確認する
- アクティビティバーにある「拡張機能」アイコンをクリック。（ショートカットキーは Ctrl + Shift + X）
- 「インストール済み」の拡張機能を確認できます。
- ちなみに、「（フィルター）」アイコンから「ビルトイン」を選ぶと、VSCode にデフォルトで入っている拡張機能も確認できます。
行を複製する
カーソルがある行をすぐ下／上に複製したい時は、Shift + Alt + ↓／↑ キーを押します。
また、複数行にわたる選択範囲を作ってからキーを押せば、その選択範囲をまるまる複製することもできます。
意外とよく使うので、覚えておいて損はありません。
マルチカーソル
Ctrl + Shift + ↓／↑ キーを押すと、複数のカーソルを下／上の行にも配置できます。
任意の位置に複数のカーソルを配置したい場合は、Alt キーを押しながら「クリック」することで可能です。
ちなみに、メニューの「選択」→「マルチカーソルを Ctrl+Click に切り替える」で、押すキーを Alt から Ctrl に変更することもできます。
ペアの「ブラケット」を色付けする
開始と終了の「ブラケット（カッコ）」に同じ色を付けて、ペアであることを分かりやすくします。
実現するには、「settings.json」に次のように追記します。
"editor.bracketPairColorization.enabled": true, "editor.guides.bracketPairs": true,
"editor.bracketPairColorization.enabled": true は、ブラケットを色付けします。
"editor.guides.bracketPairs": true は、ペアを結ぶ線の表示と線の色付けをします。
「スニペット」を再表示する
「Emmet」など「スニペット（snippet）」の候補が消えてしまった場合は、Ctrl + Space キーを押すことで再表示できます。
地味な小技ですが、覚えておくと意外と便利です。
コメント