に参加して、VS Code の AI 支援開発について学びましょう。

JavaScript拡張機能パート2

2016年10月31日 Wade Anderson、@waderyan_

Visual Studio Codeは、JavaScriptをすぐに優れたサポートを提供します。他の言語と同様に、JavaScriptは言語サービスによって動かされています。JavaScript言語サービスはTypeScriptチームによって実装されており、JavaScript開発者は最高のIntelliSenseエクスペリエンスを活用できます。

しかし、VS Codeで他にどのような機能が得られるでしょうか？ VS Codeは豊富な拡張機能モデルを持ち、多くの機能はVS Code拡張機能を通じて提供されます。この投稿は、JavaScript拡張機能に関する私の前回の投稿のフォローアップです。

ヒント: これらの拡張機能をインストールするには、拡張機能ビューボタンをクリックし、検索ボックスに拡張機能の名前を入力して、インストールをクリックします。詳細については、拡張機能の参照を参照してください。

Debugger for Chrome

マーケットプレイス - Debugger for Chrome

発行元 - Microsoft

フロントエンド開発を行う場合、エディターに統合されたデバッガーの価値が見えないかもしれません。ブラウザーのデバッガーを使用しますよね？そこでDebugger for Chrome拡張機能が登場します。この拡張機能を使用すると、VS Codeに留まりながら、Google Chromeブラウザー、またはChrome Debugging Protocolをサポートするその他のターゲットでJavaScriptコードをデバッグできます。デバッグのためにコンテキストを切り替える必要はもうありません！

別のブラウザーでデバッグしたいですか？ EdgeとFirefoxの拡張機能も見つけることができます。

debugger for chrome image

Git Project Manager

マーケットプレイス - Git Project Manager

発行元 - Felipe Caputo

必ずしもJavaScript拡張機能ではありませんが、Git Project ManagerはVS Codeチームのお気に入りです。この拡張機能は、ディレクトリ（または複数のディレクトリ）をスキャンしてGitリポジトリを検出し、それらを簡単に切り替えることができます。

この拡張機能を使用するには、まずインストールしてから、settings.jsonファイルに次の設定を追加します。

"gitProjectManager.baseProjectsFolders": [
    "/path/to/your/base/project/folders"
]

git project manager showcase

Beautify

マーケットプレイス - Beautify

発行元 - HookyQR

内部的には、VS Codeはjs-beautifyを使用しています。この拡張機能を使用すると、.jsbeautifyrcファイルを指定して、JavaScript、CSS、Sass、およびHTMLコードのフォーマットスタイルを示すことができます。

新しいFormattersカテゴリを使用して、マーケットプレイスでさらに多くのフォーマッターを検索できます。

注: 拡張機能の作成者向けに、ソースコードフォーマッターのベストプラクティスに関するブログ投稿を準備中です。もうすぐ公開されますので、ご期待ください。

Sublime TextおよびAtom用のキーマップ

このセクションには2つの拡張機能があり、1つはAtom用、もう1つはSublime Text用です。これらのエディターを使用したことがある場合、おそらくキーボードショートカットを覚えているでしょう。これらの拡張機能は、AtomおよびSublime TextのキーボードショートカットをVS Codeにもたらします。

これらの拡張機能は、皆様からのフィードバックを求めているためプレビュー版です。まだ多くのショートカットを含める必要があり、不足しているものがあれば簡単に自分で追加できます。

  1. 拡張機能のGitHubリポジトリにアクセスします（AtomおよびSublime Text）。
  2. package.jsonファイルを開きます（AtomおよびSublime Text）。
  3. 以下に示すように、package.jsonのcontributes.keybindingsセクションにJSONオブジェクトを追加します（AtomおよびSublime Text）。
  4. プルリクエストを開きます。
{
  "mac": "<keyboard shortcut for mac>",
  "linux": "<keyboard shortcut for linux",
  "win": "<keyboard shortcut for windows",
  "key": "<default keyboard shortcut>",
  "command": "<name of the command in VS Code"
}

キーマップを作成したい他のエディターやIDEがありますか？ contributes.keybindingsセクションとキーバインディングドキュメントの指示に従ってください。

キーボードショートカットが降ってくる

VS CodeにAtom、Sublime Text、または他の製品のキーボードショートカット機能がない場合は、これらのGitHubイシューのいずれかにコメントしてください（AtomおよびSublime Text）または新しいイシューを作成してください。

さらに、マーケットプレイスには便利なキーボードショートカットを追加する多くの拡張機能があります

独自のJavaScript拡張機能を作成する

ニーズに合った拡張機能が見つかりませんか？ JavaScriptまたはTypeScriptで独自の拡張機能を作成できます！詳細については、ドキュメントを確認してください。

Wade Anderson, VS Codeチームメンバー
@waderyan_

© . This site is unofficial and not affiliated with Microsoft.