VSCode: 拡張機能、Emmet、ショートカット
基本的な拡張機能をインストールし、Emmetの略記でHTMLとCSSをすばやく記述し、編集を効率化するキーボードショートカットを学びます。
「VSCode: 拡張機能、Emmet、ショートカット」はCoddyKit上の無料Frontend Academyレッスンです。 これはレッスン2/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはFrontend Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Frontend Academyコースには全4レッスンが含まれています。
VSCodeを使う理由
Visual Studio Codeは、フロントエンド開発で最も広く使われているコードエディターです。無料でオープンソース、動作が速く、非常に豊富な拡張機能エコシステムがあります。ほとんどのフロントエンドチームが標準エディターとして採用しています。
必須の拡張機能
フロントエンド開発に必須の拡張機能には、ESLint（インラインのリンティング）、Prettier（自動フォーマット）、GitLens（git blameのインライン表示）、Path Intellisense（ファイルパスの自動補完）、Auto Rename Tag（対応するHTMLタグを一緒に名前変更）があります。
言語別の拡張機能
TypeScriptには、TypeScript and JavaScript Language Features（組み込み）を使います。ReactにはES7+ React/Redux snippets、VueにはVolar（公式）、TailwindにはTailwind CSS IntelliSenseを使います。
Emmetとは
EmmetはVSCodeに組み込まれています。省略記法を入力してTabを押すと、完全なHTMLやCSSに展開できます。マークアップの記述速度が大幅に向上します。
<!-- Type then press Tab: -->
nav>ul>li*3>a{Link $}
<!-- Expands to: -->
<nav>
<ul>
<li><a href="">Link 1</a></li>
<li><a href="">Link 2</a></li>
<li><a href="">Link 3</a></li>
</ul>
</nav>よく使うEmmet省略記法
次のEmmetショートカットを覚えましょう。! → HTMLのひな形、div.container → クラス付きのdiv、ul>li*5 → 5個の項目を持つリスト、input:email → メールアドレス入力欄、form:post → method=postのフォーム。
<!-- type: div.card>img+h3{Title}+p{Description} → -->
<div class="card">
<img src="" alt="">
<h3>Title</h3>
<p>Description</p>
</div>必須のキーボードショートカット
特に時間短縮に役立つショートカットは、Ctrl/Cmd+P（ファイルをすばやく開く）、Ctrl/Cmd+Shift+P（コマンドパレット）、Alt+Click（複数カーソル）、Ctrl/Cmd+D（次の一致箇所を選択）、Ctrl/Cmd+/（コメントの切り替え）です。
複数カーソル編集
Alt+Clickでカーソルを追加できます。Ctrl+Alt+Up/Downで上または下にカーソルを追加できます。Ctrl+Dで選択範囲の次の一致箇所を選択できます。複数カーソルを使うと、すべての編集が同時に行われるため、小さなスコープ内で変数名を変更するときに便利です。
統合ターミナル
Ctrl+`（バッククォート）でVSCode内のターミナルを開けます。ターミナルを分割すれば、エディターを離れずに、一方のペインで開発サーバーを実行し、もう一方でテストを実行できます。
ワークスペース設定
プロジェクト内に.vscode/settings.jsonファイルを作成すると、ユーザー設定を上書きするプロジェクト固有の設定を指定できます。このファイルをコミットして、保存時のフォーマット、タブ幅、ルーラーの列など、チーム全員が同じ環境を使えるようにします。
// .vscode/settings.json
{
"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.tabSize": 2
}IntelliSenseと自動インポート
VSCodeのIntelliSenseは、自動補完、パラメーターのヒント、ホバー時のドキュメントを提供します。TypeScriptプロジェクトでは、補完候補を確定したときにシンボルを自動インポートすることもできるため、手動でimportを追加する必要がありません。
定義と参照へ移動
任意のシンボルをCtrl+Click（またはF12）すると、その定義へ移動できます。Shift+F12ではすべての参照が表示されます。Ctrl+Shift+Fでは全ファイルを横断して検索できます。これらは大規模なコードベースを移動するうえで欠かせません。
Problemsパネル
Problemsパネル（Ctrl+Shift+M）には、開いているファイル全体のESLintとTypeScriptのエラーや警告が一覧表示されます。コミット前に修正が必要な箇所を確認する最も速い方法です。
確認問題
VSCodeでEmmetの省略記法ul>li*3は何に展開されますか。
まとめ：VSCodeのワークフロー
ESLint、Prettier、言語別の拡張機能をインストールします。Emmetを使ってHTML/CSSをすばやく記述します。キーボードショートカット（Cmd+P、Cmd+Shift+P、Cmd+D）を覚えます。.vscode/settings.jsonでformatOnSaveを設定します。繰り返し行う変更には複数カーソル編集を使います。Go to Definitionでコード内を移動します。
よくある質問
「VSCode: 拡張機能、Emmet、ショートカット」レッスンは無料ですか？
はい。「VSCode: 拡張機能、Emmet、ショートカット」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Frontend Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Frontend Academyコースには全4レッスンが含まれています。
「VSCode: 拡張機能、Emmet、ショートカット」で何を学びますか？
基本的な拡張機能をインストールし、Emmetの略記でHTMLとCSSをすばやく記述し、編集を効率化するキーボードショートカットを学びます。 ブラウザで直接実行するハンズオンコードでFrontend Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
Frontend Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのFrontend Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン2/4です。
「VSCode: 拡張機能、Emmet、ショートカット」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このFrontend Academyレッスンでコードを書いて実行できますか？
はい。すべてのFrontend Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- Chrome DevTools: Elements、Console、Network
- VSCode: 拡張機能、Emmet、ショートカット
- PrettierとESLintの設定
- ブラウザー互換性とcaniuse.com