VSCodeの拡張機能一覧についてドキュメントに記載する (#1368)

* VSCodeにインストールすべき拡張機能について説明を追加 * 事前準備のページを正しい配置と遷移に修正 * 拡張機能の説明を移動
AlesInfiny · Oct 11, 2024 · fe07d66 · fe07d66
1 parent d2e647e
commit fe07d66
Show file tree

Hide file tree

Showing 5 changed files with 81 additions and 28 deletions.
diff --git a/documents/contents/guidebooks/how-to-develop/java/index.md b/documents/contents/guidebooks/how-to-develop/java/index.md
@@ -9,9 +9,9 @@ description: バックエンドで動作する Java アプリケーションの
 AlesInfiny Maia OSS Edition として推奨する設定や、共通的に使用する実装コードを中心に、プロジェクトの初期構築に必要な情報を提供します。
 業務機能の開発方法については解説しません。
 
-1. 事前準備
+1. [事前準備](./preparation.md)
 
-    「[ローカル開発環境の構築](../../how-to-develop/local-environment/index.md)」を参照し、 Java アプリケーションの開発に必要なローカル開発環境を構築してください。
+    Java アプリケーションの開発に必要なローカル開発環境について解説します。
 
 1. [アプリケーションの全体構造](./application-structure.md)
 

diff --git a/documents/contents/guidebooks/how-to-develop/java/preparation.md b/documents/contents/guidebooks/how-to-develop/java/preparation.md
@@ -0,0 +1,32 @@
+---
+title: Java 編
+description: バックエンドで動作する Java アプリケーションの 開発手順を解説します。
+---
+
+# 事前準備 {#top}
+
+## ローカル開発環境の構築 {#create-dev-environment}
+
+ローカル開発環境の構築について [ローカル開発環境の構築](../local-environment/index.md) を参照し、最低限必要なソフトウェアをインストールしてください。
+
+## Visual Studio Code の拡張機能インストール {#install-extensions}
+
+Visual Studio Code を利用する場合、 Java アプリケーションを開発するために以下の拡張機能をインストールします。
+
+- [Spring Boot Extension Pack :material-open-in-new:](https://marketplace.visualstudio.com/items?itemName=vmware.vscode-boot-dev-pack){ target=_blank }
+
+    Spring Boot アプリケーションの開発とデプロイを提供します。
+
+- [Extension Pack for Java :material-open-in-new:](https://marketplace.visualstudio.com/items?itemName=vscjava.vscode-java-pack){ target=_blank }
+
+    Java アプリケーションの作成、テスト、デバッグ等の基本的な機能を提供します。
+
+    <!-- textlint-disable ja-technical-writing/sentence-length -->
+
+    アプリケーションの起動で利用する [Gradle for Java :material-open-in-new:](https://marketplace.visualstudio.com/items?itemName=vscjava.vscode-gradle){ target=_blank } やコード補完やエラーレポートを提供する [Language Support for Java(TM) by Red Hat :material-open-in-new:](https://marketplace.visualstudio.com/items?itemName=redhat.java){ target=_blank } といったの拡張機能が追加でインストールされます。
+
+    <!-- textlint-enable ja-technical-writing/sentence-length -->
+
+- [Lombok Annotations Support for VS Code :material-open-in-new:](https://marketplace.visualstudio.com/items?itemName=vscjava.vscode-lombok){ target=_blank }
+
+    Java アプリケーションにおける Lombok アノテーションのサポートを提供します。
diff --git a/documents/contents/guidebooks/how-to-develop/local-environment/index.md b/documents/contents/guidebooks/how-to-develop/local-environment/index.md
@@ -54,9 +54,7 @@ AlesInfiny Maia の各ドキュメントは、本節に記載されている環
 
 ### Visual Studio Code のインストール {#install-vscode}
 
-1. 以下のサイトから、コンピューターの環境にあった Visual Studio Code(以下 VS Code) のインストーラーをダウンロードします。
-
-    <https://code.visualstudio.com/>
+1. [こちらのサイト :material-open-in-new:](https://code.visualstudio.com/){ target=_blank } から、コンピューターの環境にあった Visual Studio Code(以下 VS Code) のインストーラーをダウンロードします。
 
 1. ダウンロードしたインストーラーを実行します。
 
@@ -66,9 +64,18 @@ AlesInfiny Maia の各ドキュメントは、本節に記載されている環
 
 1. 以下の拡張機能をインストールします。
 
-    - [Japanese Language Pack for Visual Studio Code](https://marketplace.visualstudio.com/items?itemName=MS-CEINTL.vscode-language-pack-ja)
+    - [Japanese Language Pack for Visual Studio Code :material-open-in-new:](https://marketplace.visualstudio.com/items?itemName=MS-CEINTL.vscode-language-pack-ja){ target=_blank }
+
+        VS Code のユーザーインターフェースを日本語にローカライズする機能を提供します。
+
+    - [EditorConfig for VS Code :material-open-in-new:](https://marketplace.visualstudio.com/items?itemName=EditorConfig.EditorConfig){ target=_blank }
 
-    - [Vue - Official](https://marketplace.visualstudio.com/items?itemName=Vue.volar)[^1]
+        アプリケーションのコーディングスタイルを維持する機能を提供します。
+
+    バックエンドアプリケーションやフロントエンドアプリケーションの開発に利用する VS Code の拡張機能は、以下を確認してください。
+
+    - [バックエンドアプリケーション開発の事前準備](../java/preparation.md#install-extensions)
+    - [フロントエンドアプリケーション開発の事前準備](../vue-js/preparation.md#install-extensions)
 
 ### Git for Windows のインストール {#install-git-for-windows}
 
@@ -77,9 +84,7 @@ AlesInfiny Maia の各ドキュメントは、本節に記載されている環
     Git for Windows のインストール中に、既定のエディターを選択する必要があります。
     VS Code をインストールしている場合、 VS Code を既定のエディターとして設定できます。
 
-1. 以下のサイトから、コンピューターの環境にあった Git for Windows のインストーラーをダウンロードします。
-
-    <https://git-scm.com/>
+1. [こちらのサイト :material-open-in-new:](https://git-scm.com/){ target=_blank } から、コンピューターの環境にあった Git for Windows のインストーラーをダウンロードします。
 
 1. ダウンロードしたインストーラーを実行します。
 
@@ -95,23 +100,15 @@ AlesInfiny Maia の各ドキュメントは、本節に記載されている環
 
 JDK の取得先は実行環境に合わせて選択します。
 
-- Azure：Microsoft Build for OpenJDK
+- [Azure：Microsoft Build for OpenJDK :material-open-in-new:](https://www.microsoft.com/openjdk/){ target=_blank }
 
-    <https://www.microsoft.com/openjdk/>
-
-- AWS：Amazon Corretto
-
-    <https://aws.amazon.com/jp/corretto/>
+- [AWS：Amazon Corretto :material-open-in-new:](https://aws.amazon.com/jp/corretto/){ target=_blank }
 
 - オンプレミス/その他クラウドサービス（下記のいずれか）
 
-    - Adoptium
-
-        <https://adoptium.net/>
+    - [Adoptium :material-open-in-new:](https://adoptium.net/){ target=_blank }
 
-    - Oracle JDK
-
-        <https://www.oracle.com/java/>
+    - [Oracle JDK :material-open-in-new:](https://www.oracle.com/java/){ target=_blank }
 
 本ドキュメントは Adoptium を前提に記載しています。
 
@@ -124,11 +121,6 @@ JDK のインストール時のカスタムセットアップで設定済みで
 
 ### Node.js のインストール {#install-node}
 
-1. 以下のサイトからインストーラーを取得します。
-
-    <https://nodejs.org/en/>
+1. [こちらのサイト :material-open-in-new:](https://nodejs.org/en/){ target=_blank } からインストーラーを取得します。
 
 1. インストーラーを実行します。カスタムセットアップにて、 npm のインストールと PATH の追加をするよう設定することを推奨します ( 既定値のままインストールすると npm のインストールと PATH の設定が行われます ) 。
-
-[^1]:
-    Vue.js アプリケーションの開発に推奨されている拡張機能です。詳細は [公式ドキュメント :material-open-in-new:](https://ja.vuejs.org/guide/scaling-up/tooling#ide-support){ target=_blank }を参照してください。
diff --git a/documents/contents/guidebooks/how-to-develop/vue-js/preparation.md b/documents/contents/guidebooks/how-to-develop/vue-js/preparation.md
@@ -8,3 +8,31 @@ description: Vue.js を用いた クライアントサイドアプリケーシ
 ## ローカル開発環境の構築 {#create-dev-environment}
 
 ローカル開発環境の構築について [ローカル開発環境の構築](../local-environment/index.md) を参照し、最低限必要なソフトウェアをインストールしてください。
+
+## Visual Studio Code の拡張機能インストール {#install-extensions}
+
+Visual Studio Code を利用する場合、クライアントサイドアプリケーションの開発のために以下の拡張機能をインストールします。
+
+- [Vue - Official :material-open-in-new:](https://marketplace.visualstudio.com/items?itemName=Vue.volar){ target=_blank }
+
+    Vue.js アプリケーションの開発に推奨されている拡張機能です。
+    詳細は [公式ドキュメント :material-open-in-new:](https://ja.vuejs.org/guide/scaling-up/tooling#ide-support){ target=_blank }を参照してください。
+
+- [ESLint :material-open-in-new:](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint){ target=_blank }
+
+    TypeScript のコード品質を向上させるための拡張機能です。
+    リアルタイムでのコードのエラーを検出する機能を提供します。
+
+- [Stylelint :material-open-in-new:](https://marketplace.visualstudio.com/items?itemName=stylelint.vscode-stylelint){ target=_blank }
+
+    CSS のコード品質を向上させるための拡張機能です。
+    リアルタイムでのコードのエラーを検出する機能を提供します。
+
+- [Prettier - Code formatter :material-open-in-new:](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode){ target=_blank }
+
+    EditorConfig や ESLint 、 StyleLint と連携して、より詳細なコーディングルールを適用する機能を提供します。
+
+- [language-postcss :material-open-in-new:](https://marketplace.visualstudio.com/items?itemName=cpylua.language-postcss){ target=_blank }
+
+    PostCSS で記述されたコードの可読性を向上させる機能を提供します。
+    また、 StyleLint と連携することで、 PostCSS のコードのエラーを検出できます。
diff --git a/documents/mkdocs.yml b/documents/mkdocs.yml
@@ -71,6 +71,7 @@ nav:
           - guidebooks/how-to-develop/index.md
           - Java 編:
               - guidebooks/how-to-develop/java/index.md
+              - 事前準備: guidebooks/how-to-develop/java/preparation.md
               - アプリケーションの全体構造: guidebooks/how-to-develop/java/application-structure.md
               - プロジェクトの雛型作成: guidebooks/how-to-develop/java/create-project.md
               - プロジェクトの共通設定: guidebooks/how-to-develop/java/common-project-settings.md