はてB!PinterestFeedlyVSCodeを使い始めた人向けに、VSCodeの便利な機能をまとめて紹介。VSCodeはプログラマーだけでなく、Webデザイナーさんにも人気なんですが、機能が豊富でどんなことができるかわかりにくいのが難点。これから使い始める初心者さんがVSCodeを使い倒すための便利機能を紹介します。VSCodeのコーディング機能まずはコーディングに関する機能から。編集するコードの選択範囲やフォーマットは是非使いこなしたいところです。編集可能なキーボードショートカットVSCodeにあるキーボードショートカットはすべて編集可能。キーボードショートカットから確認できます。コードの選択範囲コードを編集するときは編集したい位置をクリックして’delete’キーを押しますが、VSCodeには便利な選択範囲機能があります。ファイル内の同じ文字をすべて変更したい場合は、最初の1つだけ選択して’shift+command+L’。ファイル内の同じ文字を必要な数だけ変更する場合は、’command+D’を必要な数だけ押せば選択範囲を作れます。選択範囲を作ると一括でテキストを編集できるので作業効率がかなり上がります。ファイルの自動保存ファイルの変更した後通常は、’command+S’で上書き保存しますが、VSCodeなら自動保存の設定も可能。‘files.autoSave’の’off’を’afterDelay’に変更するだけ。検索と置換VSCodeはファイル間の文字列検索と置換がすごく簡単にできます。左側にある検索アイコンから検索フォームを表示し、検索したい文字列を入力してEnter押します。するとすべてのファイルから検索結果が表示されるので、置換したい文字列を下のフォームに入れてEnter押せば完了。このとき変更対象のファイルを削除することで特定のファイルだけを変更することもできます。Intellisense(インテリセンス)VSCodeに搭載されているIntellisenseはコーディング中自動的に「コード補完」や「関数のヒント」を表示してくれます。PHPでfor文を書きたいときに「for」と入力すると候補が表示され、その中から選ぶとfor文の完全なコードが出力されるといった感じ。プログラム言語のメソッドだけでなく、自分で書いた変数や関数のパラメータ情報なども表示されるので、毎回見に行かなくて良くなります!コードのフォーマット他の人が書いたコードや複数人で編集してるコードだとインデントや改行など書き方が違ってたりすることがあります。いう時に役立つのがフォーマット機能。ファイル内全体や選択範囲を自動的に整形してくれます。フォーマット設定は設定画面から細かく設定することができます。コードの折りたたみファイルが長くなった時はコードを折りたたむことで見やすくできます。基本的にはコードの横にある、プラスマイナスのアイコンをクリックすればOK。command+0’を押します。標準搭載のEmmetVSCodeでは拡張機能を入れなくてもデフォルトでEmmetに対応しています。Emmetは短いコードでHTMLやCSSを出力できる便利な書き方。’ul>li*3>a{menu$}‘と入力してtabキーを押すと次のように展開されます。href="">menu3</a></li></ul>スニペットを登録して素早くコーディング関数やBootstrap4のコンポーネントなどよく使うものはスニペットを登録しておくことで、短いコードで出力できるようになります。ユーザースニペットから登録可能。入力は’json’形式で行い、’prefix’にショートカット、’body’に展開するコードを記述すればOK。次はワークスペースまわりの機能。以前は1つのプロジェクトしか開けませんでしたが、アップデートで複数プロジェクトを管理できるようになりました。プロジェクトごとにGitも認識されるので別々にコミット可能です。最近のアップデートでタブのドラッグ&ドロップで画面分割ができるようになりました。上下や左右にファイルを分割して表示できるので、例えばHTMLファイルは左、CSSを右に表示したりできます。ミニマップで長いファイルも楽々管理VSCodeではデフォルトでファイルのミニマップが表示されます。長くなったファイルでも大体の位置を把握できるため、これなしではコーディングできない!というミニマップ亡者も。false,‘にします。拡張機能とテーマVSCodeは各種プログラミング言語やフレームワークのコード補完機能、Git管理の強化、Bootstrap4のスニペットなどたくさん用意されています。テーマも膨大にあるのでいつでもお気に入りのテーマに変更できます。配色テーマを選んでインストールされているテーマの中から使用するテーマを選びます。テーマのインストールは拡張機能で’theme’で検索すると候補が出てきます。Theme」を使用中。拡張機能は大量にあるのでエディター上で探すのは大変。Webサイトから探すと便利です。marketplaceこのサイトでもおすすめ拡張機能をピックアップしてみたので合わせてご覧ください。WebデザイナーフリーランスWebデザイナー。レスポンシブサイトの作成、Wordpress、EC-CUBEやカラーミー、BASEなどのネットショップのデザイン・構築を担当。EC-CUBE4プラグイン「UICube」開発者。このブログでは初心者がつまずきやすいポイントや、制作で得た知識をわかりやすく解説します。初心者のためのBootstrap4のはじめ方Web制作のことでお困りですか?・急に案件が増えて手伝ってくれる人を探している・担当していたデザイナーがやめてしまった・新しくホームページを作りたいこのようなことでお困りでしたら、お気軽にご相談ください。デザインからコーディング、WordpressなどのCMSの構築まで対応させていただきます。homupedia.com。