はじめに
この記事ではReactに入門した初心者がVSCodeに追加したら便利だったと思う機能を紹介します。自分もそうですが、便利な機能があると聞いても便利さを実感できないと中々使う気になれないと思いますので部分的にGIFをつけて解説してみました。
今後、新しい機能を覚えたら少しずつ更新するかもしれません。また何か不備等あればご指摘頂ければと思います。
筆者の環境
・Mac
・VSCode=1.48.0（英語）
・Node.js=12.8.1
目次
・とりあえずEmmetを使う
・Emmetが使えない場合の対処方法
・Emmetをjsやjsxで使う設定
・React用のVSCodeエクステンション
・VSCodeのショートカットキー
・コーディング関連のショートカットキー
とりあえずEmmetを使う
Emmetは既定形式の入力補完機能によりHTML、CSS、XML、XSL等を素早く編集できる、テキストエディタ用プラグインである。
VSCodeではHTMLとCSSに対してはデフォルトでEmmetが使えるようになっており、特に何か設定の必要はありません。Demoを見た方が早いので動作については以下をご覧ください。拡張子がhtmlのファイルを使用しています。
Demo
! → Enterキー or Tabキー
DOCTYPEを含む、html,head,bodyタグのテンプレートが出力されます。!を押しただけでHTMLテンプレートが出力されるので初めて知った時は感動しました。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
h1 → Enterキー or Tabキー
h1タグを出力。
<h1></h1>
.container → Enterキー or Tabキー
<div class="contanier"></div>
.（ドット）をつけるとCSSのクラス名を指定することができます。.（ドット）で繋いでmain.contentのような書き方もできます。この他にもCSSと組み合わせたり色々な出力ができるようです。以下のサイトが詳しかったです。
爆速コーディングを実現！Emmetの使い方とVSCodeのおすすめ設定まとめ
Emmetが使えない場合の対処方法
上記サイトにも記載されてましたが、HTMLとCSSはデフォルトでEmmetが使えるようになってるはずですが、設定の状況によって使えない場合があるようです。その場合は以下手順で設定を見直してみてください。
- VSCode上でMac:
Command+,(Win:Ctrl+,)でSettings（設定）を開くことができます。（左下の歯車ボタンからでも開けます。） - 入力欄に"Emmet"と入力するとEmmetに関連する項目が出てきます。
- 以下の設定を見直してみてください。
- Emmet: Show Abbreviation Suggestionsがオンになっている
- Emmet: Show Expanded Abbreviationがalwaysになっている
- Emmet: Show Suggestions As Snippetsがオンになっている
- Emmet: Trigger Expansion On Tabがオンになっている
Emmetをjsやjsxで使う設定
Reactの開発で使う場合は当然jsやjsxのファイルの中でHTMLやCSSのEmmetが使いたくなります。デフォルトではjsやjsxファイル内でh1 → Enterキー or Tabキーを入力してもh1タグは表示されません。
まず上記と同様にSettings(設定)を開いてEmmet: Include Languagesで"Add Item"ボタンを押してItemにjavascript、Valueにjavascriptreactと入力します。
ちなみにSettingsで設定した内容はsettings.jsonでも確認/変更が可能になっています。
"Edit in settings.json"と記載されてる箇所をクリックするとsettings.jsonが開きます。
"emmet.showSuggestionsAsSnippets": true,
"emmet.extensionsPath": "",
"emmet.includeLanguages": { //この行が追加されてる
"javascript": "javascriptreact" //この行が追加されてる
}, //この行が追加されてる
"emmet.triggerExpansionOnTab": true,
これでjsやjsxの拡張子のファイルに対してもEmmetが使えるようになりました。
React用のVSCodeエクステンション
React用のVSCodeエクステンションはいくつかあるようですが、筆者がインストールしたのは下記のものです。2022年3月現在で500万近くダウンロードされています。
Demo
例としてrfcと入力するだけでreactのjsx用のテンプレートを出力してくれます。
他にもimport文など便利なショートカットが色々あります。
imr→ import React from 'react'
imrd→ import ReactDOM from 'react-dom'
imrc→ import React, { Component } from 'react'
Prettier
コードをいい感じに整形してくれるエクステンションがPrettierです。こちらは2022年3月現在で2000万近くダウンロードされています。
Demo
この例では整形されてないHTMLのタグを書いて保存しただけです。
インストールしたら下記の設定をすると保存する時に勝手にコードを整形してくれます。めちゃくちゃ便利です！他にも設定すれば色々できるようです。（全然試せてませんが。。）
VSCodeのショートカットキー
ターミナルからVSCodeのプロジェクトフォルダを開く
ターミナル上でgit cloneとかした後にそのままプロジェクトフォルダを開きたい時ありますよね。そんな時に便利です。
- Mac:
Command+Shift+P(Win:Ctrl+Shift+P) でコマンドパレットを表示 - 検索ボックスに"shell"と入力
- Shell Command: install 'code' command in PATHを選択してインストール
一度設定すればカレントフォルダで下記を入力するだけでVSCodeに飛んでプロジェクトフォルダを開いてくれます。
code .
こちらは以下の記事を参考にさせて頂きました。
ターミナルからVisual Studio Codeを起動する方法【公式の方法】
VSCode内でターミナルを開く
何故かいつも忘れてしまうやつです。
Mac:control + Shift + @(Win:Ctrl + @)
VSCodeの更新（リロード）
buildとかした後ファイルがうまく反映されなくてリロードしたい時とかありますよね。ショートカットを使うやり方とボタンを押すやり方の二通りのやり方がありますが個人的に後者の方が好みです。
1) Mac:Command + Shift +P(Win:Ctrl + Shift +P) で>Reload Windowを選択
2) リロードボタンを押す
コーディング関連のショートカットキー
行末に移動
とりあえずこれだけ覚えておけばコーディングには困らないですよね。
Mac:Command + →(Win:Ctrl + →)
行頭に移動
Mac:Command + ←(Win:Ctrl + ←)
行ごと移動させる
- 移動させたい行の全体を選択（複数行選択可）
-
Mac:
Option+↓/↑(Win:Alt+↓/↑)
単語の複数選択/変更
例えばタグの内容を変更したい時に開始タグと閉じタグそれぞれ変えるの面倒ですよね。例では2つですが、さらに同じ文字列があればMac:Command(Win:Ctrl)を押しっぱなしでDを押していけば選択して同時に変更することができます。
操作方法
Mac:Command(Win:Ctrl)を押しっぱなしでDを複数回押して同じ単語を複数選択後に文字を入力
終わりに
いかがだったでしょうか。
基本的にチュートリアル動画を何本も並走しながら学習しており、ここに挙げているものは複数の動画で紹介されてるような割とメジャーなものだと思いますが、これは知らなかった！というような機能やショートカットキーがあれば幸いです。
設定は早々に済ませてReact開発に集中しましょう。
最後までお読み頂き有難うございました！
参考
Visual Studio Code React Setup - 5 Tips
Full Modern React Tutorial