Merge pull request #76 from nnn-training/fix-issue-74

`code` コマンドの設定手順を追記
nnn-training · Mar 13, 2024 · e2f4cc5 · e2f4cc5
2 parents 47fa0f2 + a95e794
commit e2f4cc5
Show file tree

Hide file tree

Showing 13 changed files with 35 additions and 0 deletions.
diff --git a/MARKDOWN/intro/images/install_code_command_mac_en.png b/MARKDOWN/intro/images/install_code_command_mac_en.png
diff --git a/MARKDOWN/intro/images/install_code_command_mac_ja.png b/MARKDOWN/intro/images/install_code_command_mac_ja.png
diff --git a/MARKDOWN/intro/images/install_code_command_win_1.png b/MARKDOWN/intro/images/install_code_command_win_1.png
diff --git a/MARKDOWN/intro/images/install_code_command_win_2.png b/MARKDOWN/intro/images/install_code_command_win_2.png
diff --git a/MARKDOWN/intro/images/install_code_command_win_3.png b/MARKDOWN/intro/images/install_code_command_win_3.png
diff --git a/MARKDOWN/intro/images/install_code_command_win_4.png b/MARKDOWN/intro/images/install_code_command_win_4.png
diff --git a/MARKDOWN/intro/vscode.md b/MARKDOWN/intro/vscode.md
@@ -12,6 +12,7 @@ title: VS Code のトラブル
   - [(2-2) Emmetが有効になっていなかった](#2-2)
 - [(3) インストール時、「Visual Studio Code を実行する」のチェックを外さずに完了をしてしまった](#3)
 - [(4) VSCodeを使用しようとしたらgitが見つかりませんと表示される](#4)
+- [(5) `code` コマンドの設定手順](#5)
 ---
 
 ## (1) インストールしたがアプリケーションフォルダにVisual Studio Code.appがない <a id="1"></a>
@@ -47,3 +48,37 @@ title: VS Code のトラブル
 次のページをご覧ください。
 
 - [・VSCodeを使用しようとしたらgitが見つかりませんと表示されてしまいます](https://www.nnn.ed.nico/questions/23518)
+
+## (5) `code` コマンドの設定手順 <a id="5"></a>
+
+VS Code の `code` コマンドを設定する手順です。
+
+### macOS
+
+1. VS Code を起動します。
+1. <kbd>Command</kbd> + <kbd>Shift</kbd> + <kbd>P</kbd> を押して、コマンドパレットを開きます。
+1. <q class="font-bold">shell command</q> と入力して、<q class="font-bold">Shell Command: Install 'code' command in PATH</q> を選択します。  
+    ![](./images/install_code_command_mac_en.png)  
+    VS Code を日本語で使用している場合は <q class="font-bold">シェル コマンド: PATH 内に 'code' コマンドをインストールします</q> と表示されます。  
+    ![](./images/install_code_command_mac_ja.png)
+1. ターミナルを起動している場合は <code>PATH</code> の値を反映するため再起動してください。
+
+### Windows
+
+Windows では、`code` コマンドは自動的にインストールされています。  
+しかし、何らかの理由で `code` コマンドを使用できない場合は次の手順で設定してください。
+
+1. <kbd>Windows</kbd> を押して、そのまま <q class="font-bold">環境変数を編集</q> と入力します。  
+    ![](./images/install_code_command_win_1.png)
+1. **{Username} のユーザー環境変数(U)** の `Path` を選択して、**編集(E)** をクリックします。  
+    ![](./images/install_code_command_win_2.png)
+1. **新規(N)** をクリックして、`C:\Users\{Username}\AppData\Local\Programs\Microsoft VS Code\bin` を入力します。  
+    入力したら **OK** をクリックして、<q>環境変数名の編集</q> のウィンドウを閉じます。  
+    <small>
+    `{Username}` はプレースホルダーです。  
+    例えばユーザー名が `progedu` の場合は `{Username}` を `progedu` に置き換えてください。
+    </small>
+    ![](./images/install_code_command_win_3.png)
+1. **OK** をクリックして、<q>環境変数</q> のウィンドウを閉じます。  
+    ![](./images/install_code_command_win_4.png)
+1. PowerShell や Git Bash を起動している場合は <code>PATH</code> の値を反映するため再起動してください。
diff --git a/public/images/intro/install_code_command_mac_en.png b/public/images/intro/install_code_command_mac_en.png
diff --git a/public/images/intro/install_code_command_mac_ja.png b/public/images/intro/install_code_command_mac_ja.png
diff --git a/public/images/intro/install_code_command_win_1.png b/public/images/intro/install_code_command_win_1.png
diff --git a/public/images/intro/install_code_command_win_2.png b/public/images/intro/install_code_command_win_2.png
diff --git a/public/images/intro/install_code_command_win_3.png b/public/images/intro/install_code_command_win_3.png
diff --git a/public/images/intro/install_code_command_win_4.png b/public/images/intro/install_code_command_win_4.png