BETA

Sublime Text 3のReact用配色パターンとスニペット

投稿日:2018-11-12
最終更新:2018-11-12

Qrunch初投稿です。
なにこれ、改行はタグ打ち?


最近Reactの開発をすることになって、いろいろサンプルアプリとか試しに作ってましたが、Sublime Text 3のデフォルトの設定だと、

・配色パターンがめちゃくちゃ(キーワードに色を付けるアレ)
・スニペット無し(特定のキーワード入力後Tabキーを押すとばばーっと入力してくれるアレ)

だったので、探してみました。

以下
Package Control → Install Packageから探す。
併記してあるURLはただの紹介ページです。

配色パターン

色は正直そんなにこだわっていないので、ググって見かけたものを導入しました。

デフォルト(JavaScript)

jsxが特にめちゃくちゃ

導入後(Babel)
https://packagecontrol.io/packages/Babel

マシなんじゃない?

スニペット

これはデフォルトには無いので、適当にググって出てきたやつ導入してみました。

「ReactJS」
https://packagecontrol.io/packages/ReactJS

rccと打ってからTabキー

・・・これあかんやつちゃうん?
React.createClassはReact16で廃止されたはず。
という訳で別のものを探す。

「React Development Snippets」
https://packagecontrol.io/packages/React%20Development%20Snippets

rccと打ってからTabキー

これいいんちゃう?
まだReact詳しくないからよく分からんが。propTypes以外は何となく分かる。

「Babel Snippets」
https://packagecontrol.io/packages/Babel%20Snippets

renderのdivタグにちょっと優しさを感じるけど、ちょっとシンプル過ぎじゃない?

結果

配色パターンはBabel
スニペットはReact Development Snippets
これでいきます。

もっとこっちの方がいいよっていうのがあったら教えてください。

技術ブログをはじめよう Qrunch(クランチ)は、プログラマの技術アプトプットに特化したブログサービスです
駆け出しエンジニアからエキスパートまで全ての方々のアウトプットを歓迎しております!
or 外部アカウントで 登録 / ログイン する
クランチについてもっと詳しく

この記事が掲載されているブログ

@WEkFtOQhlqcyDEsyの技術ブログ

よく一緒に読まれる記事

0件のコメント

ブログ開設 or ログイン してコメントを送ってみよう
目次をみる
技術ブログをはじめよう Qrunch(クランチ)は、プログラマの技術アプトプットに特化したブログサービスです
or 外部アカウントではじめる
10秒で技術ブログが作れます!