「ノンプログラマーのためのVisual Studio Code実践活用ガイド」を読んだ

「ノンプログラマーのためのVisual Studio Code実践活用ガイド」を 2,024 年 01 月 13 日に読んだ。

メモ

2つのファイルの内容を比較する p112

ファイルの最新の内容と古い内容を比較したいときなど、ファイル同士の内容を比べたい場合もあるでしょう。
VS Code にはそのようなときに利用できるファイル比較の機能があります。

エクスプローラービューから2つのファイルを比較する

1 エクスプローラービューのファイル名を右クリックします。
2 <比較対象の選択> をクリックします。
3 比較するもう1つのファイル名を右クリックします。
4 <選択項目と比較> をクリックします。
5 2つのファイルがエディターの左右に並び、異なる部分が強調表示されました。

コマンドパレットから2つのファイルを比較する
ファイルの比較はエクスプローラービューのクリック操作ではなく、コマンドパレットからでも行えます。

1 比較するファイルを開きます。
2 コマンドパレットを開き、入力欄に「compare」と入力します。
3 < File: Compare Active File With > をクリックします。
4 最近開いたファイルの一覧が表示されます。
5 クイックオープン (P.62 参照) と同じように、この一覧から比較したいファイルを選択するか、ファイル名を入力して検索します。

同じテキストが登場する箇所をまとめて編集する p117

テキストファイルを編集していると、同じテキストが登場する箇所をまとめて修正したいことがよくあります。
マルチカーソルの応用である「選択の追加」を使うと直感的に複数の箇所を編集できます。

選択を1つずつ追加して編集する
同じテキストを複数選択する場合、マルチカーソルを使うよりも、「選択の追加」を使ったほうが楽に選択できます。

1 編集したいテキストを、マウスドラッグか Shift + 矢印キーで選択します。
2 Ctrl + D (Mac では command + D) キーを押すと、次の一致するテキストを選択に追加します。
3 2の操作を繰り返すと、次の一致するテキストを選択に追加していきます。
4 テキストを編集すると、2番目の一致するテキストを除いて変更されました。

選択に追加せずにスキップする
一致するテキストの中に変更したくない箇所がある場合、次の一致するテキストへ移動するショートカットキーを使いましょう。

1 テキストを選択します。
2 Ctrl + D キーで次の一致するテキストにカーソルを移動します。
3 Ctrl + K キーを押したあとに Ctrl + D キーを押すと、その箇所の選択が解除され、次の一致するテキストに移動します。
4 2つ目の一致するテキストを飛ばして、3つ目の一致するテキストを選択に追加しました。
5 テキストを編集すると、2番目の一致するテキストを除いて変更されました。

「Japanese Word Handler」でカーソル操作を日本語向きにする p136

既定の状態の VS Code では、英語の場合は Ctrl + 矢印キーを押すと、単語の先頭、末尾に移動します。
しかし、日本語の場合はその機能が効かず、文頭、文末へカーソルが移動してしまいます。
「Japanese Word Handler」を使うと漢字やひらがな、カタカナ、句読点単位でカーソル操作ができようになります。

novel-writer で執筆する p139

SF作家の藤井太洋氏が作成した拡張機能「novel-writer」は、小説など日本語の文章を書くことに適した、いわば統合執筆環境です。
さまざまな機能があるので、単機能の拡張機能と使い分けましょう。

日本語の文章を校正する p144

文章に誤字脱字はつきものです。
日本語の文章をチェックする拡張機能「テキスト校正くん」を使ってみましょう。
「テキスト校正くん」は文章内で問題のある箇所を波線で強調し、 <問題パネル> に問題点の内容を表示します。

p146

「novel-writer」とは併用できない「novel-writer」が有効のときに「テキスト校正くん」がインストールされていても文章はチェックされません。
「テキスト校正くん」を使うときは、「novel-writer」を無効、またはアンインストールし、 VS Code を再起動しましょう。

Mermaid を使って図を作成する p171

Markdown 原稿に図を入れたい場合、通常は作図ソフトを併用します。
しかし、「Markdown Preview Mermaid Support」という拡張機能をインストールすると、テキストでフローチャートなどを書くことができます。

「Markdown All in One」で Markdown 編集を効率化する p173

機能拡張「Markdown All in One」には、さまざまなショートカットキーやコマンドがあります。
ショートカットキーを使ってワープロソフトのように編集したり、コマンドを使って目次を作成したりできます。

Markdown ファイルからスライドを作成する p178

拡張機能「Marp for VS Code」を使うことで、 Markdown ファイルからプレゼンテーション用のスライドを作成できます。
Marp のメリットと使い方を理解し、 VS Code から簡単にスライドを作成してみましょう。

拡張機能「Marp for VS Code」をインストールする
Marp とは、Markdown の文法でスライドを作成できるツールです。
Marp の主なメリットには、 OS を問わず同じ使い方ができる点や、 PDF や PowerPoint 形式で出力できる点があります。
「Marp for VS Code」をインストールし、 Markdown を HTML として読み取ってスライドを作成できるように設定します。

HTML ファイルの編集中に CSS の定義を確認する p201

HTML ファイルを編集しているときに、毎回 CSS ファイルを開いて確認するのは非効率的です。
拡張機能「CSS Peek」を使って、 HTML ファイルから CSS の定義を確認し、作業を効率化しましょう。

複数行をコメントにする p225

ソースコードの一部をコメントにする(コメントアウトする)ことで、その部分はプログラムで処理されなくなります。
コメントの形式は HTML や CSS などの言語によって異なります。
VS Code では、ショートカットキーでコメントアウトすると、言語に合わせて適切にコメントアウトしてくれます。
Ctrl + / キーを押すと、カーソルが選択している行がコメントに変わります。
複数行を選択した状態で、コメントアウトのショートカットキーを押すと、複数行をまとめてコメントにできます。

PDF を表示する p238

VS Code での HTML/CSS ファイルの編集中に PDF を確認したいときもあります。
その際に毎回 Acrobat を起動するのは手間です。
拡張機能「vscode-pdf」を使うと VS Code 上で PDF を開くことができます。