VSCodeの使い方

INDEX

0. はじめに

VSCodeの基本的な使い方はProgateと以下の記事を参照してください。

【アニメ図解たっぷり】VSCodeの使い方入門！～基本からWeb制作まで

1. ファイル・フォルダ管理について

自身のPCのデスクトップ（Desktop）に「programming」という名前のフォルダ（別名ディレクトリ）を作成し、その中で全てのフォルダ・ファイルを作成するようにしましょう。

そうするとファイルを見失わずに整理できて良いと思います。

2. codeコマンドで簡単にVSCodeでフォルダを開く方法

下の記事の通りに実行すると、ターミナルで「code」コマンドを用いて、好きなディレクトリ・ファイルを開くことができます。
慣れてきたら毎回VSCodeを立ち上げて「File」→「Open」でフォルダを開くより早くなると思うので、おすすめです。

参考記事は以下です。

ターミナルからVisual Studio Codeを起動する方法【公式の方法】 #VSCode - Qiita

2018.07.03 新規で来てくださった方にわかりやすいように更新しました。ターミナルからエディタを起動したい。atom hoge.jsとかやって特定のファイル開いたりatom .とかやってカレ…

3. Emmetをフル活用してHTML・CSSをコーディングしましょう

Emmetとは一口に言えば、HTML・CSSのコーディングを高速化するツールです。

VSCodeではデフォルトで搭載されているので今すぐ使えます。

今後、基本的にHTMLとCSSを自分で全文字打つことはないと考えて大丈夫です。

Emmetを使うと、コーディングが高速化されるだけでなく、スペルミスがなくなるという大きなメリットがあります。

以下のEmmetに関する説明記事を読んでEmmetの概要について理解しましょう。

爆速コーディングを実現！Emmetの使い方とVSCodeのおすすめ設定まとめ | Web Design Trends

以下はEmmetのチートシートです。よくわからなかったときは、以下のドキュメントを参照すると良いでしょう。

チートシート（=カンニングペーパーのこと）

Cheat Sheet

チートシートを開くと上のような記載があると思います。

白い文字で描かれた「nav>ul>li」と入力してTabキーを押すと、グレーになっている以下のコードが自動で出力されるという意味です。

相当入力が早くなることがわかると思います。積極的に活用していきましょう。

また、チートシートをすべて暗記しなくても、VSCodeの補完機能に従えば入力を高速化できます。

VSCodeでは例えば上記写真のように、「back」などまで入力すると、補完機能で「background-color」などがサジェストされます。Enterキーを押すと自動で残りを入力してくれます。

全ての文字を入力することなく、VSCodeの補完機能やEmmetを活用してより速く・間違えることなくコーディングしていきましょう。

4. VSCodeの必須プラグイン

それでは本題のVSCodeの便利なプラグインについてご紹介します。

プラグインとはVSCodeをより便利にしてくれる拡張機能のことです。インストールすることでテキストエディタがもっと便利になります。プラグインは無数にあるので、気になるものは導入してどんどん試してみてください。

プラグインの入れ方については以下の記事を参照してください。