LoginSignup
39
34

More than 3 years have passed since last update.

【VSCode】ES6記法スニペットのEmmet展開方法まとめ

Last updated at Posted at 2020-07-31

React学習中の自分のための、ES6記法スニペットのEmmet展開方法メモ

Reactの学習を始めたのですが、アロー関数やらimportとかexportとか何度も繰り返し登場する記述を毎回書くのが面倒で、スニペットのVSCode拡張機能ないかな?と思ったら案の定ありました。

VSCodeの拡張機能 : JavaScript (ES6) code snippets

ただこいつを使いこなすにもEmmetのキーを覚えないといけなくて、なかなか覚えられないので自分のためのメモ帳代わりにしようと記事投稿しています。

最初はとりあえず少数しかない状態で公開しちゃいますが、React含めES6記法のEmmetをこれからどんどん追加していきます。
なんならこの記事をご覧のみなさんからも「こんなのあるよ!」「こっちの方がもっと便利だよ!」等ありましたらコメント頂けますと幸いです!(他力本願)

みなさんのお力を借りてブラッシュアップしていきたい!そんな心つもりでございます!

みなさま、どうぞよろしくお願いいたします。

アロー関数 系

nfn

//nfn
const name = (params) => {

}

anfn

//anfn
(params) => {

}

import 系

imr

//imr
import React from 'react'

imrd

//imrd
import ReactDOM from 'react-dom'

imd

//imd
import {  } from 'module'

imp

//imp
import moduleName from 'module'

export 系

exp

//exp
export default 

React Hooks 系

useState

//useState
const [state, setstate] = useState(initialState)

useEffect

//useEffect
useEffect(() => {
    effect
    return () => {
        cleanup
    }
}, [input])

useReducer

//useReducer
const [state, dispatch] = useReducer(reducer, initialState, init)

useContext

//useContext
const context = useContext(contextValue)

おわりに

もっともっとあるはず。これからどんどん追加していきます。

39
34
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
39
34