IntelliJ(or WebStorm)でElectron開発環境を準備する

あまり情報が無かったので整理

新規プロジェクト

electron用のプロジェクトは未だないので、Node.JS and NPMを指定して作りました。空プロジェクトからでもいけますが、使える部分は流用

ライブラリ設定

ECMAScript6とかを認識させたい場合は、Language & Frameworks > Javascript > Librariesから追加をしていく

ESLint

ESLintを使う場合は、Languages & Frameworks > Javascript > Code Quality Tools > ESLintを設定する

• Node interpreter: $HOME/.anyenv/envs/ndenv/shims/node
  私の場合はnodeはanyenv経由でインストールしているのでこの設定です
• ESLint package: /project_dir/node_modules/eslint
  ESLint自体はプロジェクトのnode_modulesを利用(お好み)
• Search for .eslintrcにチェック
  /project_dir/.eslintrcを見て、なければ$HOME/.eslintrcを見る設定に

.eslintrcの設定

ElectronをES6に則って作成する場合は色々と追加設定が必要です。
以下サンプルですが、ecmaFeaturesやenvの各種設定が無いとエラーでまくりです

{
  "extends": "eslint:recommended",
  "parser": "babel-eslint",
  "react/jsx-uses-react": 1,
  "ecmaFeatures" : {
    "jsx": true,
    "objectLiteralShorthandMethods" : true
  },
  "plugins": [
    "react"
  ],
  "rules": {
    "strict": 0,
    "indent": [ 2, 2],
    "semi": [2, "always"],
    "no-console": 0
  },
  "env": {
    "es6": true,
    "node": true,
    "browser": true
  }
}

Run/Debug Configurations

デバッグボタンによる実行は以下の通り設定する

• Node interpreter: /project_dir/node_modules/.bin/electron
• Node parameters: .
• Working directory: /project_dir

electronの内部で/usr/bin/env nodeやってるので、nodenvとかやってる人とかでもこの設定でいいはず

作ってみた

実際にこの設定をしたIntelliJを元にElectronを作ってみました

Electron+ReactなサンプルアプリをES6で作成する