IntelliJのLive TemplatesでReactの開発を楽にする #React

Live Templates - Help | WebStorm

IntelliJを普段メインで使って開発をしています。全然機能を使いこなせていないけど・・・
というか機能ありすぎて覚えるのも結構大変だったりします。んで、ちょっと手が空いた時とかに「ほー！こんな機能あるのか」と発見があって一人テンション上がっていたりもします笑

んで、今回は普段Reactで開発するときに使っているIntelliJのLive Templatesを晒します。

Live Templatesとは

簡単にいうとIntelliJのスニペット機能です。

preferences > Editor > Live Templates

既存ですでにたくさんのスニペットが用意されていて覚えて使いこなせるとコーディングがグッと楽になります。

今回はReactで開発を前提にお話です。React以外にも便利なLive Templatesがあるのでチェックしてみてください。

既存のLive Templates ライフサイクル系

この辺は全て網羅されていそうです。これ覚えておくだけですごい便利！

cdupと打ったらTabキー

componentDidMount() {
    // カーソル位置
}

他にも、cdm(componentDidMount)、cwm(componentWillMount)やらあります。使い方も一緒だし、なんとなくわかりやすいネーミングになってるので覚えやすいですね。

こんなスニペットが欲しい

既存でもComponent作成時のスニペットは用意されているんですけど、自分の開発の要件とあってなかったります。

Classで作るときは基本的にはReduxとコネクトする
Classの場合はconstructor欲しい
Stateless Componentも欲しい
それぞれTypeSriptのバージョンも欲しい

オリジナルのLive Templatesの作り方

preferences > Editor > Live Templates

言語一覧が出ているので言語を選択、今回はReactを選びます。

画面右側+ボタン > Live Template

Abbreviationにcduなどのコードを、Descriptionに説明文をそれぞれ入力します。

Template textにコードを入力します。

最後にDefineをクリックして、使う言語を選択します。多分、入力補助とかで出てくるようにかなと勝手に思ってます。

Class Component with Redux

Abbreviation: rccx

Template text

import { bindActionCreators } from 'redux'
import React, { Component } from 'react'
import { connect } from 'react-redux'

class $TM_FILENAME_BASE$ extends Component {
  constructor(props) {
    super(props)
  }

 render() {
  return (
   <div>
    $END$
   </div>
  );
 }
}

function mapStateToProps(state) {
  return {}
}

function mapDispatchToProps(dispatch) {
  return bindActionCreators(Object.assign({}, {}), dispatch)
}

export default connect(mapStateToProps, mapDispatchToProps)($TM_FILENAME_BASE$)

Class Component with Redux (TypeScript)

Abbreviation: rccxts

Template text

import * as React from 'react'
import * as Redux from 'redux'
import { connect } from 'react-redux'

interface Props {}

class $TM_FILENAME_BASE$ extends React.Component<Props, {}> {
  constructor(props) {
    super(props)
  }

 render() {
  return (
   <div>
    $END$
   </div>
  );
 }
}

const mapStateToProps = state => {
  return {}
}

const mapDispatchToProps = dispatch => {
  return Redux.bindActionCreators({}, dispatch)
}

export default connect(mapStateToProps, mapDispatchToProps)($TM_FILENAME_BASE$)

Stateless Component

これは既存であります。Intelli J 2018.2からかな。

Abbreviation: rsc

Template text

import React from 'react';

const $componentName$ = () => {
    return (
        <div>
            $END$
        </div>
    );
};

export default $componentName$;

Stateless Component (TypeScript)

Abbreviation: rscts

Template text

import * as React from 'react'

interface Props {}

const $componentName$: React.SFC<Props> = () => {
    return (
        <div>
            $END$
        </div>
    );
};

export default $componentName$;

またなんかTemplate作ったら追記予定