atomでReactのコンポーネント新規作成用snippetを登録してみた

ReactでES2015のクラス定義でコンポーネントを作成することが多いのだけど、いかんせん記述量が結構あるので毎回辛いなと思っていた。
そういえばatomはsnippet登録出来るはずだよなと思い調べてみました。

結論 ~/.atom/snippets.cson に書くだけ

ターミナルで atom ~/.atom/snippets.cson してファイルを開いてsnippetを追加すれば、エディタの再起動も必要なくすぐ使えた。

登録したsnippetはこちらです

'.source.jsx':
  'Component Skelton':
    'prefix': 'rcs'
    'body': """
      import React, { Component, PropTypes } from "react";

      export default class ${1:YourComponentName} extends Component {
        static get componentName() {
          return "${1:YourComponentName}";
        }

        static get propTypes() {
          return {
          };
        }

        constructor(props) {
          super(props);
          this.state = {
          };
        }

        render() {
          return (
            <div>
            </div>
          );
        }
      }
    ""

※ __R__eact __C__omponent __S__kelton の略で rcs にしました。

これで hoge.jsx を開いているときに rcs と入力すると

というメニューが現れるのでtabキーを押すと

こんな感じでスニペットが記述されていくらか幸せになれます。

余談 static get componentName() ってなに

railsのフロントでreactを使うことが多いのだけど、htmlに <span data-component="YourComponentName"></span> とだけ書いておいて、
application.jsで YourComponentName.componentName() に一致するnode全部に自動でマウントするということをやっています。

最初は単純に Function.name を使って紐付けてたんですが、
minifyすると正しく動かなくなってしまうのでこうしています。