Visual Studio Codeの便利な拡張機能のご紹介
2022年 9月 8日 Posted 野々瀨(フロントエンドエンジニア)
Visual Studio Codeには便利な拡張機能がさまざまあります。
今回は業務上で使用している拡張機能の一部をご紹介します。
※ ご紹介する拡張機能の順序は拡張機能名を基準にしています。
Bookmarks
「
秀丸エディタのマークやEmEditorのブックマークと同じような機能です。
|
|
キーボードショートカットも割り当てられているので、簡単に操作することができます。
| キー | 動作 |
|---|---|
| Ctrl + Alt + K | 現在のカーソルに印を付ける／印を外す |
| Ctrl + Alt + L | 次の印へ移動 |
| Ctrl + Alt + J | 前の印へ移動 |
印が付いている時はマップに強調表示されます。
|
|
アクティビティバー（サイドバー）から印が付けられているファイルと行を一覧で確認することができます。
|
|
参考
Bookmarks - Visual Studio Marketplace
CSS Formatter
「CSS Formatter」という拡張機能は、CSSのコードを整形します。
インデントやスペース、改行の挿入や不要な箇所の削除が行われます。
|
|
キーボードショートカットも割り当てられているので、簡単に操作することができます。
| キー | 動作 |
|---|---|
| Shift + Alt + F | アクティブになっているタブのCSSのコードを整形 |
参考
CSS Formatter - Visual Studio Marketplace
Encode Decode
「Encode Decode」という拡張機能は、さまざまな種類のエンコードまたはデコードを行うことができます。
|
|
エンコードまたはデコードできる種類は次の通りです。
| 機能名 | 説明 |
|---|---|
| String to Base64 | 文字列からBase64に変換 |
| Base 64 to String | Base64から文字列へ変換 |
| String to JSON Byte Array | 文字列からバイト配列をJSON形式で変換 |
| String to JSON String | 文字列からJSON形式の文字列へ変換 |
| JSON String to String | JSON形式の文字列から文字列へ変換 |
| Base64 to JSON Byte Array | Base64からバイト配列をJSON形式で変換 |
| String to MD5/SHA1/SHA256/SHA512 (as Base64 or Hex) | 文字列からハッシュへ変換 |
| String to HTML Entities | 文字列からHTMLエンティティへ変換（HTMLタグを文字参照へ変換） |
| HTML Entities to String | HTMLエンティティから文字列へ変換（文字参照・数値参照をHTMLタグへ変換） |
| String to XML Entities | 文字列からXMLエンティティへ変換（XMLタグを文字参照へ変換） |
| XML Entities to String | XMLエンティティから文字列へ変換（文字参照・数値参照をXMLタグへ変換） |
| String to Unicode | 文字列からユニコードへ変換 |
| Unicode to String | ユニコードから文字列へ変換 |
キーボードショートカットも割り当てられていて、Ctrl + Alt + Cを押すことでエンコードまたはデコードする種類が表示され、一覧から選択した機能を処理します。
参考
Encode Decode - Visual Studio Marketplace
File Utils
「File Utils」という拡張機能は、アクティブなファイルを複製したり、ファイルやディレクトリーを新規作成したりすることができます。
|
|
ファイルやディレクトリーの操作可能な機能は次の通りです。
| 機能名 | 説明 |
|---|---|
| Rename | アクティブなファイルのファイル名を変更 |
| Move | アクティブなファイルを移動 |
| Duplicate | アクティブなファイルを複製 |
| Delete | アクティブなファイルを削除 |
| New File Relative to Current View | アクティブなファイルのディレクトリーを基準にファイルを新規作成 |
| New File Relative to Project Root | 開かれているプロジェクトのルートディレクトリーを基準にファイルを新規作成 |
| New Folder Relative to Current View | アクティブなファイルのディレクトリーを基準にディレクトリーを新規作成 |
| New Folder Relative to Project Root | 開かれているプロジェクトのルートディレクトリーを基準にディレクトリーを新規作成 |
| Copy Name Of Active File | アクティブなファイルのファイル名（拡張子付）をコピー |
ショートカットキーは初期では割り当てられておらず、コマンドパレットから実行します。
Ctrl + Shift + Pを押してコマンドパレットを開き、「File Utils」と入力することで、絞り込んで機能を使用することができます。
参考
File Utils - Visual Studio Marketplace
Insert Numbers
「Insert Numbers」という拡張機能は、連番を簡単に入力することができます。
数字はもちろん、アルファベットや漢数字、ローマ数字を連番で入力することができ、またゼロ埋めした連番も入力することができます。
|
|
キーボードショートカットも割り当てられていて、Ctrl + Alt + Nを押すことでパレッドが開き、書式を入力することで連番を挿入することができます。
書式は%d:0:1というコロン区切りで指定します。
左から一つ目が桁で%dで1桁、%02dでゼロ埋めした2桁と桁を指定し、二つ目が幾つから始めるかを指定し、三つ目が繰り返すごとに幾つ加算していくかを指定します。
例えば%02d:3:2であれば「03」「05」「07」と連番が振られます。
|
|
参考
Insert Numbers - Visual Studio Marketplace
jshint
「jshint」という拡張機能は、JavaScriptのコードを検証し問題となる内容を検出してくれるJSLintを、より細かく柔軟に検証できるようにしたjsHintとしてVSCodeで使用できるようにします。
検証はリアルタイムで行われ、問題となった内容は「問題」パネルに対象のファイルと問題内容、行列番号が一覧で表示されます。
|
|
なお、導入にはnpmパッケージの「jshint」が必要です。
npmパッケージはNode.jsのモジュール・パッケージを管理するためのツールで、Node.jsに付属しています。
参考
jshint - Visual Studio Marketplace
jshint - npm
Live Preview
「Live Preview」という拡張機能は、エディター内でHTMLのWebプレビューが行えます。
実行すればタブでブラウザーが起動し、ファイルの更新を行うとプレビューも自動更新されリアルタイムに確認が行えます。
|
|
Visual Studio Codeに付属している開発者ツールやページ内検索も行うことができます。
参考
Live Preview - Visual Studio Marketplace
Markdown All in One
「Markdown All in One」という拡張機能は、Markdownをより便利に使いやすくします。
|
|
見出しを自動的に作成したり、リストでは改行した時に次の行を自動的にリストのアイテムにしたり連番を自動的に付与したりできます。
また、次のようなショートカットキーで素早く書くこともできます。
| ショートカットキー | 機能 |
|---|---|
| Ctrl + B | 太字にする／解除する（**で囲う／外す） |
| Ctrl + I | イタリック体にする／解除する（*で囲う／外す） |
| Ctrl + Shift + ] | 見出しにする／見出しのレベルを下げる（#を増やす） |
| Ctrl + Shift + [ | 見出しのレベルを上げる（#を減らす） |
参考
Markdown All in One - Visual Studio Marketplace
PHP IntelliSense
「PHP IntelliSense」という拡張機能は、PHPのコードの補完やコードのチェックを行ってくれます。
また関数の実行から定義に移動といったこともできます。
|
|
参考
PHP IntelliSense - Visual Studio Marketplace
Project Manager
「Project Manager」という拡張機能は、案件などディレクトリーごとプロジェクトとして管理し、瞬時にそのプロジェクトを開くことができます。
ワークスペースにも対応しています。
|
|
登録や編集はコマンドパレットから実行します。
Ctrl + Shift + Pを押してコマンドパレットを開き、「Project Manager」と入力することで、絞り込んで機能を使用することができます。
登録済みのプロジェクトへ切り替えるには、Ctrl + Alt + Pを押すことで、一覧が表示されるので切り替えたいプロジェクト名を選択することで切り替えることができます。
参考
Project Manager - Visual Studio Marketplace
VSNotes
「VSNotes」という拡張機能は、メモを簡単に作成したり管理したりすることができます。
VSCodeを起動していればいつでもメモを作成や閲覧、編集を行うことができます。
タグをつけることでメモ同士をグループ化してまとめることもできます。
|
|
登録や編集はコマンドパレットから実行します。
Ctrl + Shift + Pを押してコマンドパレットを開き、「VSNotes」と入力することで、絞り込んで機能を使用することができます。
参考
VSNotes - Visual Studio Marketplace
最後に
今回ご紹介した拡張機能はほんの一部です。
ご紹介しきれなかった拡張機能も含め、他にもたくさんの拡張機能がありますので、どんどん便利にしていきましょう。