フロントエンド開発者向けの8つの強力なVisual Studioコード拡張

Microsoftは最初の安定版であるVisual Studio Codeをリリースしましたが、2016年3月までにその強力なコードエディタはほんの数ヶ月前になりましたが、すでにコーディング経験を次のレベルに引き上げることができる多くの拡張があります。の 公式のVisual Studioコード拡張 Visual Studio Code Marketplaceでホストされています。その多くは、Web開発者にとって大きな助けになります。.

この記事では、フロントエンド開発に関連する一連のVS Code拡張機能をテストし、最も見つけたもののリストを作成しました。 直感的で使いやすく便利. それは究極のリストではありません。特に多くの優れた拡張機能がまだ登場していないため、自分自身で市場をブラウズして、他に何が提供できるかを調べてください.

VS Code Extensionsをインストールする方法

拡張機能のインストールは、Visual Studio Codeでは非常に簡単です。 コードエディタ内で行います. VS Code Marketplaceでは、すべての拡張機能に独自のページがあります。このページの上に、指定した拡張機能をインストールできるコマンドがあります。.

コマンドは常にで始まります。 extインストール 期間。拡張機能をインストールするには、 押す Ctrl + P クイックオープンパネルを開始するためのVSコード内, このコマンドをコピー＆ペースト それに、そして最後に コードエディタを再起動します。 新しいエクステンションを機能させる.

8強力なVisual Studioコード拡張

HTMLスニペット

頻繁にVisual StudioコードでHTMLを書きたい場合は、HTMLスニペット拡張機能が便利なツールとして用意されています。 HTMLの入念なサポートを追加. VS CodeはHTMLを基本的にサポートしていますが、 シンタックスカラーリング, HTML Snippetsエクステンションはもっと多くのことを知っています.

おそらくこの拡張の最も便利な機能はそれです HTMLタグの名前を入力し始めたとき （開始山括弧なし）、HTMLスニペット リストを表示します 利用可能なオプションのそれぞれについての短い情報.

必要な要素をクリックすると、HTML Snippetsは完全なHTML 5タグとその最も一般的なプロパティを追加します。たとえば、文書にリンク（アンカータグ）を追加したい場合は、単に ある VS Codeにアクセスするには、ポップアップボックスで適切なオプションを選択すると、HTMLスニペットが必要なコードを挿入します。手間をかけずにエディタにスニペットを追加.

この拡張機能の作者は、廃止予定の要素を削除することにも注意を払っています。そのため、ポップアップリストに見つからないHTMLタグを使用する場合は、それがまだ有効かどうかを確認することをお勧めします。.
HTML CSSクラス補完

HTML CSSクラス補完は、多くを使用する必要がある場合に役立つ拡張機能になります。 CSSクラス あなたのプロジェクトで。開発者にはよくあることですが、 クラスの正確な名前が完全にはわからない, しかしそれはただ受動的な知識として私たちの頭の後ろにある.

このスマートエクステンションは、この問題に対する解決策となります。 すべてのCSSクラスの名前を取得します 現在のワークスペースで、それらに関するリストを表示します。.

たとえば、Zurb Foundationを使用してサイトを作成したい、そして小さなグリッドを使用したいとします。あなたはクラスが正確にどのように命名されているか覚えていませんが、あなたはそれらが意味論的な名前を持っていることを知っています.

HTML CSS Class Completionを使用すると、単語を入力するだけで済みます。 小さい, 利用可能なオプションが一度に画面に表示されるので、必要なものを簡単に選択できます。.
ブラウザで表示

ブラウザで表示は、Visual Studio Codeのシンプルで強力な拡張機能です。次のことを許可することで、フロントエンド開発を容易にすることができます。 コーディング中にブラウザでの作業結果を簡単に確認できます。. を押すと、VS Codeから直接デフォルトのブラウザでHTMLファイルを開くことができます。 Ctrl + F1 キーボードショートカット.

ブラウザで表示することに注意してください。 HTMLのみをサポート, あなたのサイトを見たいのなら、HTMLファイルを開いておく必要があります。君は CSSまたはJavaScriptファイルから直接ブラウザにアクセスすることはできません。.
Chrome用デバッガ

Chrome用デバッガはMicrosoft自身によって構築されたもので、現在最も頻繁にダウンロードされているVisual Studio Code拡張機能の4番目です。.

Chrome用デバッガはそれを可能にします コードエディタを終了せずにGoogle ChromeでJavaScriptをデバッグする. つまり、ブラウザに表示される変換されたJavaScriptを使用する必要はありませんが、 元のソースファイルからデバッグを実行する. それがどのように機能するかを見るためにこのデモを見てください.

このエクステンションには、まともなデバッガが必要とするすべての機能があります。 ブレークポイント設定、変数監視、ステッピング, ある 便利なデバッグコンソール, その他多数（最初のリリースの機能リストを参照）.

この拡張機能を使用するには、Chromeを起動する必要があります。 リモートデバッグが有効, そして適切な設定 launch.json ファイル。この後者はしばらく時間がかかるかもしれませんが、あなたはそれを適切に行う方法についてのGitHubの詳細な指示を見つけることができます.
JSヒント

Visual Studio CodeのJSHintエクステンションは、人気の高いJSHint JavaScriptリンターをコードエディタに統合しています。 コミットしたらすぐにエラーについて知らせてください. デフォルトでは、JSHint拡張機能はlinterのデフォルトオプションを使用します。これは設定ファイルを使用してカスタマイズできます。.

JSHintはエラーを赤で、通知は緑の下線を引くので、この拡張子の使い方はとても簡単です。問題についてもっと知りたい場合は、下線を引いた部分にカーソルを合わせるだけで、JSHintが問題の説明をまとめたラベルを表示します。.
jQueryコードスニペット

jQueryコードスニペットを使用すると、Visual Studio Codeでのフロントエンド開発を大幅にスピードアップできます。基本的な構文エラーがなくてもjQueryをすばやく作成できるためです。. jQueryコードスニペット 現在周りにあります 130の利用可能なスニペット 正しいトリガーを入力して呼び出すことができます.

1つを除いてすべてのjQueryスニペット jq 接頭辞。唯一の例外は 機能 それを引き起こす 無名関数をエディタに挿入します.

この便利な拡張機能は、適切な構文について完全に確信が持てず、ドキュメントをチェックするための時間を節約したい場合に便利なヘルプです。利用可能なオプションを素早くスクロールすることも簡単にできます。.
バウワー

Bower VS Code拡張機能は、BowerパッケージマネージャをVisual Studio Codeに統合することで、Web開発ワークフローをより直感的にします。.

この拡張機能を使用すると、 端末とエディタを切り替える必要はありません, しかし、Visual Studioコード内でパッケージ管理タスクを簡単に実行できます。.

Bowerエクステンションはあなたのプロジェクトの作成を通してあなたを導きます bower.json また、パッケージのインストール、アンインストール、検索、更新、キャッシュの管理、その他のさまざまなタスクの実行も可能です（全機能リストを参照）。.

あなたはできる コマンドパレットを起動してBower関連のコマンドにアクセスする 押して F1, タイピング “バウワー” をクリックして、入力バーに “バウワー” 表示されるドロップダウンリストからオプションを選択し、適切なBowerコマンドを選択します。.
Gitの歴史

Git Historyはそれを可能にします Visual Studioコード内でGitプロジェクトの変更を追跡する. より大きなGithubプロジェクトに貢献したい場合、この拡張は特に役に立ちます。 他の開発者が行った変更を素早くチェックアウトする方法が必要.

Git Historyエクステンションをインストールすれば、次のことができます。 歴史を見る ファイル全体の 特定の行 その中。あなたもすることができます 以前のバージョンを比較する 同じファイルの.

単語をタイプすればGit Historyに関連したコマンドにアクセスできます。 “Git” コマンドパレットにF1）を選択 “Git” ドロップダウンリスト内で、最後に必要なコマンドを選択します。ご了承ください ファイルを開く必要があります 履歴を表示してから操作を実行する.