拡張機能の使用手順とNode.jsのデバッグ方法の追加

src/debugging-nodejs-in-vscode.md

@@ -9,18 +9,70 @@ VSCodeでNode.jsのプログラムのデバッグを行うには、Auto Attach (
 
 ## 自動アタッチ設定
 
-設定から、Debug › JavaScript: Auto Attach Filter (`debug.javascript.autoAttachFilter`) を変更します。
+設定から、Debug › JavaScript: Auto Attach Filter (`debug.javascript.autoAttachFilter`) を変更します (1)。
 
-`smart` を選択すると、VSCodeターミナルからNode.jsのプロセスを実行したとき[`--inspect`](https://nodejs.org/ja/docs/guides/debugging-getting-started/)スイッチが有効化され、自動的にデバッグを開始することができます。
+`smart` を選択すると、VSCodeターミナルからNode.jsのプロセスを実行したとき[`--inspect`](https://nodejs.org/ja/docs/guides/debugging-getting-started/)スイッチが有効化され、自動的にデバッグを開始することができます (2)。
 
 自動アタッチを行うにはVSCode内のターミナルを使用しなければなりません。
-また、Auto Attachを有効にした後、ターミナルを一度再起動する必要があります。これは、ターミナルの右上にある ⚠ アイコンをクリックするか、新しいターミナルを作成することで行えます。
+また、Auto Attachを有効にした後、ターミナルを一度再起動する必要があります。これは、ターミナルの右上にある ⚠ アイコンをクリックするか、新しいターミナルを作成することで行えます (3)。
+
+![自動アタッチ設定](assets/nodejs-auto-attach.dio.png)
+
+_自動アタッチ設定_
 
 ## ブレークポイント
 
 Node.jsで実行するプログラムのコードをVSCodeで開き、行番号の左の部分をクリックしてブレークポイントを作成できます。
 また、もう一度その部分をクリックすることでそのブレークポイントを削除できます。
 
-ブレークポイントを作成すると、VSCode内のターミナルからNode.jsでそのプログラムを実行するとき、そのブレークポイントの行で処理は一時停止します。
+![ブレークポイントの作成](assets/nodejs-breakpoint.png)
+
+_ブレークポイントの作成_
+
+あるいは、画面上からクリックする代わりに、コードのブレークポイントを置きたい場所に `debugger` 文を追加することでブレークポイントを作成します。いずれの方法でもブレークポイントを作成できます。
+
+参考文献: [debugger - JavaScript | MDN](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Statements/debugger)
+
+ブレークポイントを作成後、VSCode内のターミナルから実行するとそのブレークポイントでNode.jsの処理は一時停止します。
+
+ターミナル:
+
+```console
+$ node hello.js
+```
+
+![Node.jsのデバッグ](assets/nodejs-debugger.png)
+
+_Node.jsのデバッグ_
+
+上部に表示されているボタンの意味を説明します。
+
+### 続行
+
+![続行](https://github.com/microsoft/vscode/raw/1.67.2/src/vs/workbench/contrib/debug/browser/media/continue-tb.png)<!-- @license https://github.com/microsoft/vscode/raw/1.67.2/LICENSE.txt -->
+
+プログラムの実行を続けます。プログラムが終了するか次にブレークポイントが現れるまで実行し続けます。
+
+### ステップオーバー
+
+![ステップオーバー](https://github.com/microsoft/vscode/raw/1.67.2/src/vs/workbench/contrib/debug/browser/media/stepover-tb.png)<!-- @license https://github.com/microsoft/vscode/raw/1.67.2/LICENSE.txt -->
+
+ステップオーバー、ステップイン、ステップアウトはステップ実行のための機能です。
+
+ステップオーバーは、プログラムを1行進めます。
+
+### ステップイン
+
+![ステップイン](https://github.com/microsoft/vscode/raw/1.67.2/src/vs/workbench/contrib/debug/browser/media/stepinto-tb.png)<!-- @license https://github.com/microsoft/vscode/raw/1.67.2/LICENSE.txt -->
+
+ステップインは、もしその行に関数の呼び出しがあれば、その関数の最初の行に移動します。
+
+### ステップアウト
+
+![ステップアウト](https://github.com/microsoft/vscode/raw/1.67.2/src/vs/workbench/contrib/debug/browser/media/stepout-tb.png)<!-- @license https://github.com/microsoft/vscode/raw/1.67.2/LICENSE.txt -->
+
+ステップアウトは、もしその行が関数の中であれば、その関数の呼び出し元の次の行に移動します。
+
+参考文献: [Debugging in Visual Studio Code](https://code.visualstudio.com/docs/editor/debugging)
 
 このようにして、VSCodeでNode.jsのプログラムのデバッグを行うことができます。

src/vscode-extensions.md

@@ -6,6 +6,10 @@ VSCodeは、標準で備えている機能の他にMarketplaceにある拡張機
 
 VSCodeを起動して、ウィンドウの左端のアクティビティバーにある「拡張機能」をクリックして、Marketplaceにある拡張機能を検索することができます。
 
+![ESLintのインストール](assets/installing-eslint-vscode.png)
+
+_ESLintのインストール_
+
 ## 便利な拡張機能の紹介
 
 - ESLint ([`dbaeumer.vscode-eslint`](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)) … ESLintを使用するための拡張機能
@@ -13,3 +17,62 @@ VSCodeを起動して、ウィンドウの左端のアクティビティバー
 - Vue Language Features (Volar) ([`Vue.volar`](https://marketplace.visualstudio.com/items?itemName=Vue.volar)) … Vue.jsを使用するための拡張機能
 
 検索した拡張機能を選択し、Install (インストール)をクリックしてその拡張機能をインストールします。
+
+## ESLintの使用
+
+[ESLintの導入](eslint.md)のように、あらかじめESLintを導入したプロジェクトをVSCodeから開くと、そのプロジェクトのESLintが自動的に実行され、VSCodeの編集画面に表示されます。
+
+![ESLintの使用](assets/vscode-eslint-error.png)
+
+_ESLintの使用_
+
+このようにESLintの拡張機能をインストールすることによって自動的にESLintを実行し、即時にJavaScriptのコードのチェックを行うことができます。
+
+## Prettierの使用
+
+[Prettierの導入](prettier.md)で説明したとおり、PrettierはJavaScriptをはじめとしたさまざまなコードを整形するためのツールです。
+
+Prettierの拡張機能をインストールすることによって、VSCodeの編集画面に表示されるコードを自動的に整形することができます。
+Marketplaceに「Prettier - Code formatter」という名前で提供されています。これをインストールします。
+
+![Prettier](assets/installing-prettier-vscode.png)
+
+_Prettier_
+
+インストール後、ファイルを開き、`Ctrl`+`Shift`+`P` (macOSの場合は`Cmd`+`Shift`+`P`)を押して、コマンドパレットを開きます。そのなかに
+
+```
+> format document
+```
+
+等のキーワードで「ドキュメントのフォーマット (Format Document)」を選択して、フォーマットを実行します。あるいは、`Ctrl`+`Shift`+`I` (macOSの場合は`Cmd`+`Shift`+`I`)を押しても、同様の操作が可能です。いずれかを実行してコードの整形を行います。
+
+![ドキュメントのフォーマット (Format Document)](assets/vscode-format-document.png)
+
+初回フォーマット時に、フォーマッタの選択肢が表示されることがあります。ここでフォーマッタとして、さきほどインストールした「Prettier - Code formatter (`esbenp.prettier-vscode`)」を選択します。
+
+![フォーマッタの選択](assets/vscode-formatter-settings.png)
+
+こうすることによって規定のフォーマッタとしてPrettierが設定されます。それでは実際にPrettierによるコードの整形を試していきましょう。
+
+例として、空白と改行がぐちゃくちゃに挿入されたJavaScriptのコードを示します。
+
+![コード整形前](assets/prettier-before.png)
+
+このコードに対して「ドキュメントのフォーマット」実行すると、次のように整形されます。
+
+![コード整形後](assets/prettier-after.png)
+
+さらに[VSCodeの便利な設定](installing-vscode.html#%E4%BE%BF%E5%88%A9%E3%81%AA%E8%A8%AD%E5%AE%9A)のなかで紹介した「Format On Save」を有効にすることで自動整形を行うことができます。
+
+このようにして、Prettierによって簡単にコードを整形できます。
+
+## Vue Language Features (Volar)の使用
+
+VolarはVueの公式のVSCode拡張機能です。
+
+![Volar](assets/installing-volar-vscode.png)
+
+_Volar_
+
+こちらも必要に応じて使いましょう。