masalibの日記

システム開発、運用と猫の写真ブログです

Reactを開発する時のVScodeのアドオン

atomWindowsでは重たくて使えない。その為、WindowsMacで同じものが使えるVisualStudioCodeを使用している
VScodeの便利なアドオンがあるので記載する

ES7 React/Redux/GraphQL/React-Native snippets

コード補完機能です。

https://marketplace.visualstudio.com/items?itemName=dsznajder.es7-React-js-snippets

便利な反面、ショットカットを覚えるのが大変・・・ヾ(。>﹏<。)ノ゙✧*。
f:id:masalib:20180417110611p:plain

ESLint

https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint

Reactなどの構文エラーや書き方が間違えていたりした時に指摘してくれるツール
設定がありすぎて使いこなせていないが悲しい所・・・ヾ(。>﹏<。)ノ゙✧*。

Bracket Pair Colorizer

カラーをつける機能

https://marketplace.visualstudio.com/items?itemName=CoenraadS.bracket-pair-colorizer

f:id:masalib:20180417110717p:plain

デフォルト()、[]、および{}は一致させることができます。カスタムブラケット文字も設定できます

Node.js Modules Intellisense

Node.jsのimport文を書くときのコード補完機能です

https://marketplace.visualstudio.com/items?itemName=leizongmin.node-module-intellisense

f:id:masalib:20180417110813g:plain

React以外にも使えると思う

Live Server

ローカルの開発サーバーです
f:id:masalib:20180417111325g:plain

https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer

スタティック&ダイナミックページ用のライブリロード機能ができます
Reactはもともとあるのでほぼ使わないのですが、htmlの修正とかに便利

VSCODOは便利な機能がいっぱいありすぎてどれをインストールすべきか困るのが難点かな。Reactという観点からいうとESLintははじめからインストールすべきだった