VSCode便利拡張機能!ES7 React/Redux/GraphQL/React-Native snippetsを導入しよう!

VSCode 便利拡張機能
  • URLをコピーしました!

今回は、VSCodeの拡張機能のES7 React/Redux/GraphQL/React-Native snippetsを導入していこうといます!
Reactからは少し脱線してしまいますが、便利な機能なのでぜひ導入してみてください。

まだ、Reactの開発環境の構築が終わっていない方は、「ReactとTypeScriptとRedux Toolkitの開発環境を構築しよう!」を参考にしてみてください!

snippetsとは

プログラミングの中では、code snippetとも呼びますが特定の短いコードのまとまりのことを指します。
snippetとして簡単なコードを再利用することにより、開発の効率化をする機能です!

本記事はReact・TypeScript・Redux Toolkitの利用を前提に実装をしていきます。
構築からデプロイまでやっていきますので、必要に応じて他の記事も参考にしてみてください。

学習に使った本はこちら!

¥519 (2022/06/25 09:17時点 | Amazon調べ)
\楽天ポイント5倍セール!/
楽天市場
¥6,490 (2022/06/25 10:22時点 | Amazon調べ)
\楽天ポイント5倍セール!/
楽天市場
\楽天ポイント5倍セール!/
楽天市場
¥700 (2022/06/24 15:55時点 | Amazon調べ)
\楽天ポイント5倍セール!/
楽天市場
クマじい

Amazon Kindle Unlimited でもReactの本はいっぱいあるぞ!

  • 技術書をたくさん読みたい!
  • 色々な技術を学びたい!
初回30日間無料体験があるので、どのような参考書があるか確認してみよう!

Kindle Unlimitedで技術書を読むならタブレットがあるとさらに便利ですよ!
10インチあるとより見やすいと思いますが、7インチでも十分見やすくなります!

¥9,980 (2022/06/23 23:52時点 | Amazon調べ)
\楽天ポイント5倍セール!/
楽天市場
¥15,980 (2022/06/24 09:39時点 | Amazon調べ)
\楽天ポイント5倍セール!/
楽天市場
目次

ES7 React/Redux/GraphQL/React-Native snippetsを導入

拡張機能を導入するだけなので、簡単です!!

  • 拡張機能でReact/Redux/GraphQL/React-Native snippetsを検索
  • 下記の画像の拡張機能をインストールする!

動作確認してみよう!

今回は、React TypeScriptでよく使うsnippetsを使ってみましょう!

  • VSCodeを開いて、適当なファイルを作成してください!(test.tsxとかでOK!)
  • ファイルで「rafce」を入力して、エンターを押しましょう!
  • 下のコードが生成されたと思います!
import React from 'react'

const test = () => {
    return (
        <div>
            
        </div>
    )
}
export default test
  • snippetsはこれ以外にも色々あります!
    使いこなせれば、開発効率も格段に上がりますので、ぜひ参考にしてみてください!
  • 他のsnippetsは、公式ページを参照してみてください!

まとめ

今回は、VSCodeの拡張機能のES7 React/Redux/GraphQL/React-Native snippetsを導入をやっていきました。
snippetsは便利な拡張機能なので、ぜひ使いこなしてみてください!

本記事はReact・TypeScript・Redux Toolkitの利用を前提に実装をしていきます。
構築からデプロイまでやっていきますので、必要に応じて他の記事も参考にしてみてください。

また、今回のReactを勉強するにあたり利用した教材をあげています。
主に本(Amazon Unlimitedを含む)とUdemyの動画教材を利用しています。ここには私なりに理解した内容をもとに独自に内容を考えて共有しているので興味ある方は、本やUdemyを購入して勉強してみることをおすすめします。

学習に使った本はこちら!

¥519 (2022/06/25 09:17時点 | Amazon調べ)
\楽天ポイント5倍セール!/
楽天市場
¥6,490 (2022/06/25 10:22時点 | Amazon調べ)
\楽天ポイント5倍セール!/
楽天市場
\楽天ポイント5倍セール!/
楽天市場
¥700 (2022/06/24 15:55時点 | Amazon調べ)
\楽天ポイント5倍セール!/
楽天市場
クマじい

Amazon Kindle Unlimited でもReactの本はいっぱいあるぞ!

  • 技術書をたくさん読みたい!
  • 色々な技術を学びたい!
初回30日間無料体験があるので、どのような参考書があるか確認してみよう!

Kindle Unlimitedで技術書を読むならタブレットがあるとさらに便利ですよ!
10インチあるとより見やすいと思いますが、7インチでも十分見やすくなります!

¥9,980 (2022/06/23 23:52時点 | Amazon調べ)
\楽天ポイント5倍セール!/
楽天市場
¥15,980 (2022/06/24 09:39時点 | Amazon調べ)
\楽天ポイント5倍セール!/
楽天市場
VSCode 便利拡張機能

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!

この記事を書いた人

東京在住で20代のエンジニアです。
特に特技があるわけではありませんが、誰もが楽しくプログラミングができたらいいと思い、「teech lab.」を開設いたしました。

Enjoy Diaryという、ガジェットや雑貨を紹介しているブログもあります!
ぜひ、みてください!!

目次
閉じる