Visual Studio Code(略称:VS Code)」はMicrosoftが提供している無償で高機能なエディターです。標準でも十分な機能は備わっていますが、拡張機能をインストールすることで、より使いやすく自分にあったエディターにカスタマイズできます。

前回の記事では、「HTMLコーダー」「フロントエンジニア」にそれぞれ役立つ拡張機能を紹介しました。本記事では、開発者全般の方に役立つ拡張機能を紹介します。

エディターを強化する拡張機能

1. Clipboard Ring

テキストを「コピー」や「切り取り(カット)」したものを「貼り付け(ペースト)」する場合に、この拡張機能を入れることで複数件の内容を記憶できますctrl+shift+v+shift+v)を押すごとに過去の情報に切り替えられます。デフォルトでは10件の情報を記憶できますが、設定を変更することで記憶する件数を増やすことも可能です。

2. Shortcuts

画面下のステータスバーにショートカットボタンを追加できる拡張機能です。ショートカットは自由に設定できるため、よく使う機能をショートカットに登録しておくことで、ワンクリックで手軽に実行できます。設定できる項目はVisual Studio Codeの公式サイトに掲載されています。ショートカットのアイコンもこちらから自由に設定できます。

3. Markdown All in One

Markdownを扱う際には必ず入れておきたい便利な拡張機能です。この拡張機能を1つインストールするだけで、以下の機能が利用できます。

  • ショートカットキーでMarkdownのタグを入力可能(ctrl+bで太字、ctrl+shift+]でインデントの追加など)
  • 画像の挿入時に画像パスの入力を補完
  • Markdownのアウトライン表示が可能
  • mdファイルを開いた際に自動的にプレビューを起動(デフォルトでは無効)

4. markdownlint

Markdownの構文チェックを行ってくれる拡張機能です。構文チェックを行うことで記述が統一された品質の高いドキュメントを作成できます。デフォルトのチェック内容は多少厳しいですが、チェック内容は設定ファイルで変更できるため、用途にあわせてルールを設定できます。

5. Paste Image

クリップボード上の画像をMarkdownファイルなどに直接貼り付けられる拡張機能です。ウェブ上の画像やローカルにある画像を右クリックのメニューからコピーし、Ctrl+Alt+V (+Alt+Vをするだけで、Markdownファイル内に貼り付けられ、同一ディレクトリに保存されます。(保存先は設定ファイルで変更可能です。)

また、macOSのスクリーンショット機能(Shift++4+control)を利用すると、以下のデモのように手早く目的の画像を貼り付けられます。

6. Local History

ファイルの変更履歴を保存してくれる拡張機能です。Gitなどのバージョン管理システムを利用している方も多いですが、この拡張機能はコミットなどの操作をする必要がなく、ファイル保存のタイミングで自動的にバックアップを取得してくれます。また、過去の変更履歴の差分が確認できるため、過去のコードを確認したり、部分的に復元することもできます。バージョン管理システムとあわせて利用できるため、コミット前の段階の更新履歴を確認したい時などに便利です。

次のページでは開発を補助する拡張機能を紹介します。