Atomのatom-import-jsプラグインを使ってReact componentを自動的にインポートする

Tweet

Pocket

概要

みなさんこんにちはcandleです。
今回はAtomとimport-jsを使って自動的に、componentのパスをインポートしてみたいと思います。
Reactは１ファイル１コンポーネントの書き方を推奨しており、開発が大規模になればなるほど、componentが増えていきます。

もしも１つのContainerで１０個のコンポーネントを使うと、10行のimport文を書かなくてはなりません。
そういった面倒な作業を手助けしてくれるのがimport-jsです。

前提

Reactの環境が整っている。
前の記事に書いたcreate-react-appコマンドで作成したプロジェクトを使う事をおすすめします。
Atomがインストールされている

Atomのimport-jsプラグインをインストール

Atomを開いて、上のメニューの「Atom」から「Preferences…」を選びます。

左のメニューバーから「Install」を押し、検索ボックスに「import-js」と打ち込み、エンターを押します。
候補の中の「atom-import-js」をインストールします。

.importjs.jsファイルをreactプロジェクトの設置する

importjsコマンドはreactプロジェクトのルートにある.importjs.jsを参考にしてあれこれやってくれます。

今回用意したreactプロジェクトはこのような構造になります。

├── package.json
├── public
│ ├── favicon.ico
│ └── index.html
└── src
├── App.css
├── App.js
├── App.test.js
├── components
│ └── Input.js
├── index.css
├── index.js
└── logo.svg

.importjs.jsを作成

touch .importjs.js

内容はよくわから無いので、githubに上がっているものを参考にしました
https://github.com/Galooshi/import-js/blob/master/.importjs.js

以下を書き込みます。

module.exports = {
  environments: ['node'],
  ignorePackagePrefixes: ['lodash.'],
  declarationKeyword: 'import',
  logLevel: 'debug',
  excludes: [ './build/**' ]
}

保存します。

実際に使ってみる

ここからは人によってReactの環境が変わってきますが、私は前回の記事の環境でやっています。
src/App.jsはこんな感じのプログラムです。

import React from 'react';

class App extends React.Component{
  constructor(){
    super();
    this.state = {
      txt: 'hello world'
    }
  }

  update(e){
    this.setState({
      txt: e.target.value
    })
  }

  render(){
    return(
      <div>
        <p>Text: {this.state.txt}</p>
        <Input onChange={this.update.bind(this)}/>
      </div>
    )
  }
}

export default App;

Input componentをcomponents/Input.jsから自動的にimportしてみたいと思います。
Atomエディタで<Input> jsxの上にカーソルをのせ「Cmmand + Shift + i」を押します。

1度目はimportjsdがそのプロジェクト配下のモジュールを認識していなく、何も出てこない場合があります。
もう１度「Cmmand + Shift + i」を押します。

すると、自動的にコンポーネントが挿入されると思います。

うまくできました。

まとめ

Atomのこの機能を使えば、高速でコーディングが可能です。