気ままなタンス*プログラミングなどのノートブック

プログラミングやRPGツクール、DTM、VOCALOIDについてのんびり書きます。

【メモ】PyCharmでCoffeeScriptを使う

CoffeeScriptに興味を持ち、PyCharmで使えないか調べていた。

設定方法のページが見つかったが、日本語の説明がなかった。

PyCharm 4.5.3 Help :: Transpiling CoffeeScript to JavaScript

上記ページを拙い英語力で対応したので、メモを残しておく。

事前にやっておくこと

  • Node.jsのインストール(https://nodejs.org/en/)
  • Node.jsとnpmのパスを通す
  • PyCharmのplugin設定より、NodeJSプラグインをインストールする [Install JetBrains plugin]をクリックし、NodeJSを検索&インストール f:id:rinne_grid2_1:20150908070356p:plain
  • File Watchersプラグインが無効化されている場合は、有効にする File Watchersプラグインのチェックがはずれている場合は、チェックをつける f:id:rinne_grid2_1:20150908070404p:plain

Coffee-Scriptのインストール

$ npm install -g coffee-script
  • PyCharm設定画面より、coffee-scriptがインストールされたことを確認 [Languages & Frameworks] -> [Node.js and NPM] f:id:rinne_grid2_1:20150908070945p:plain

  • PyCharmプロジェクトのルートフォルダに移動し、ローカルインストール

$ npm install coffee-script
  • node_moduleディレクトリが作成される

File Watchersの設定

  • [Tools]->[File Watchers]をたどり、「+」アイコンをクリック(プルダウンがあらわれるので、CoffeeScriptを選択) f:id:rinne_grid2_1:20150908071313p:plain

  • 以下のような画面が表示される f:id:rinne_grid2_1:20150908071603p:plain

  • 僕の場合、Djangoで使うことを想定していたので、プロジェクトルート\static\js配下に出力されるように設定

    • Arguments 以下を指定

    --output $ProjectFileDir$\static\js\ --compile --map $FileName$

    • Output path to refresh 以下を指定

    $ProjectFileDir$\static\js\$FileNameWithoutExtension$.js:$ProjectFileDir$\static\js\$FileNameWithoutExtension$.map

  • 設定したら、OKボタンで閉じる

  • プロジェクト内の好きな場所にCoffeeScript用のフォルダを作成

    • 僕はプロジェクトルート配下に、coffeeというフォルダを作成した
  • CoffeeScriptファイルを作成 f:id:rinne_grid2_1:20150908072255p:plain

  • CoffeeScriptフォルダには、coffeeのファイル、static/jsフォルダには、コンパイル済みのファイルが作成される

f:id:rinne_grid2_1:20150908072601p:plain