「設定 - WebStormとの連携」の版間の差分

📢 Webサイト閉鎖と移転のお知らせ

このWebサイトは2026年9月に閉鎖いたします。

移転先はhttps://mochiu.net/index.php?title=設定 - WebStormとの連携です。

新しい記事は移転先で追加しております。（旧サイトでは記事を追加しておりません）

← 古い編集

ビジュアルウィキテキスト

@@ 1行目: / 1行目: @@
 == 概要 ==
-WebStormを使用して、Electronを開発するための手順を記載する。<br>
+WebStormを使用して、ワークフローを設定する方法、コーディング支援を有効にする方法、<br>
+Electronソフトウェアを実行およびデバッグする手順を記載する。<br>
 <br><br>
@@ 9行目: / 10行目: @@
 <br><br>
-== WebStormの設定 ==
+== Electronのインストール(WebStormの使用) ==
 # WebStormを起動して、[Create New Project]を選択する。
 # [New Project]画面左にある[Node.js]を選択して、[Location:]項目にプロジェクト名を入力する。<br>[Node Interpreter:]プルダウンと[Package Manager:]プルダウンには、任意のバージョンのNodeとNPMを選択する。><br><u>※プロジェクト名には、<span style="color:#C00000">大文字のアルファベットは使用できない</span>ので注意すること。</u>
@@ 24行目: / 25行目: @@
 <br><br>
-== サンプルコード ==
+== コード補完機能の有効化 ==
-index.htmlファイルとmain.jsファイルを作成する。<br>
+Electronのコーディング支援機能は、Electron 1.6.9以降、electron.d.tsファイル(TypeScript定義ファイル)を介して提供される。<br>
+このファイルは、<Electronのプロジェクトディレクトリ>/node_modules/electronディレクトリに存在する。<br>
 <br>
+コード補完機能を有効にするには、以下の手順を行う。<Br>
+# プロジェクト画面から、[File] - [Settings...]を選択して、設定画面を開く。
+# 設定画面左から、[Language & Frameworks] - [Node.js and NPM]を選択する。
+# [Enable coding assistance]チェックボックスにチェックを入力する。
+<br><br>
+== package.jsonの設定 ==
 Electronをインストールした場合、package.jsonファイル内には、エントリポイントがindex.jsと記述されているが、<br>
 Electronの公式Webサイトでは、main.jsが標準のようなので、この記述を編集する。<br>
@@ 38行目: / 47行目: @@
   "main": "main.js",
   </syntaxhighlight>
+<br>
+次に、package.jsonファイル内の"scripts"項目において、以下の設定を追記する。<br>
+ # Electronをローカルインストールしている場合
+ "run": "./node_modules/.bin/electron .",
+ # Electronをグローバルインストールしている場合
+ "run":"electron ."
+<br><br>
+== サンプルコード ==
+index.htmlファイルとmain.jsファイルを作成する。<br>
 <br>
 Electronの公式Webサイトから、基本となるindex.htmlファイルの内容とmain.jsファイルの内容をコピーする。<br>
@@ 128行目: / 148行目: @@
 <br><br>
-== デバッグの設定 ==
+== デバッグの設定(不要) ==
 # WebStormのプロジェクト画面右上にある[ADD CONFIGURATION...]プルダウンから、[Run/Debug Configurations]を選択する。
 # [Run/Debug Configurations]画面左にある[Templates] - [Node.js]を選択する。