Reactのvscodeのsnippetsが便利

Reactのコンポーネントを開発しているとほぼお決まりのパターンを入力しないといけません

例えばtest.jsがある場合は

import React from 'react'

function test() {
    return (
        <div>
            
        </div>
    )
}

export default test

です

入力すればいいのですが、めんどくさい。という事で snippetsを利用して省略したいと思います。

私が使っているsnippetsは

marketplace.visualstudio.com

です。アロー関数に対応しているので便利です。他のsnippetsはアロー関数に対応していないのでこのツールになりました

rafceと入力してその後タブキーで選択すると補完してくれます

超便利～

その他にpropsを記述するパターンのrafcp

import React from 'react'
import PropTypes from 'prop-types'

const test = props => {
    return (
        <div>
            
        </div>
    )
}

test.propTypes = {

}

export default test

などあります

これが無料なんて本当にびっくりです