vs2015 は JavaScript をどのようにサポートしますか-フロントエンドQ&A-php.cn

ホームページ

ウェブフロントエンド

フロントエンドQ&A

vs2015 は JavaScript をどのようにサポートしますか

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 12, 2023 pm 01:44 PM

Visual Studio 2015 は、C#、VB.NET、C などの複数の言語での開発をサポートする、Microsoft によってリリースされた統合開発環境です。これに基づいて、プラグインを通じて JavaScript などの他の言語の開発もサポートできます。

JavaScript 開発の場合、Visual Studio 2015 自体はそれほど強力ではありませんが、いくつかのプラグインをダウンロードしてインストールすることで、開発効率とエクスペリエンスを大幅に向上させることができます。以下では、よく使用されるいくつかのプラグインと、Visual Studio 2015 での JavaScript 開発でのそれらの使用方法を紹介します。

プラグインの推奨事項

Web Essentials

Web Essentials は、さまざまなフロントエンドテクノロジをサポートする非常に強力な Web 開発プラグインです。、CSS および HTML 、JavaScript などを含みます。フロントエンド開発者にとって、このプラグインは必須です。 Web Essentials には、次のような多くの便利な機能が含まれています:

JavaScript ファイルと CSS ファイルを自動的にマージおよび圧縮する;
複数のフロントエンドテンプレートエンジンをサポートする;
自動的に生成する画像のレスポンシブスタイル。
は、多数のコードスニペットや事前定義されたテンプレートなどを提供します。

JavaScript エディターの拡張機能

JavaScript エディターの拡張機能は、Visual Studio 2015 専用の JavaScript エディターを提供するプラグインです。 JavaScript コードの編集とデバッグを最適化するための多数の機能を提供します。

## 定義への迅速な移動、参照の検索など;

エディターで JavaScript コードを直接デバッグできます;
コードの暗号化、圧縮、マージなどの機能を提供します。
Node.js Tools for Visual Studio
Node.js を JavaScript 開発に使用している場合、Node.js Tools for Visual Studio は非常に便利です。便利なプラグイン。これにより、Visual Studio 2015 で Node.js アプリケーションを開発およびデバッグできるようになります:

は Node.js デバッガーをサポートし、

は .js のノードテンプレートを構築する簡単な方法を提供しますアプリケーション;

Node.js アプリケーションのローカルおよびリモートデプロイメントをサポート;

ソースコード管理や自動ビルドなど、他の Visual Studio 機能と統合できます。
JavaScript 開発用のプラグインを使用する
上記のプラグインをインストールすると、Visual Studio 2015 で JavaScript を開発できるようになります。以下では、Web Essentials を例として、プラグインを使用して JavaScript を開発および最適化する方法を説明します。

JavaScript ファイルと CSS ファイルを自動的にマージして圧縮する

Web プロジェクトを開き、ソリューション内で右クリックして、[Web Essentials] > [JavaScript の作成] を選択します。および CSS バンドル」を追加します (以下の図を参照):

{

"js": {
    "common": {
        "version": "1.0.0",
        "minify": true,
        "combine": [
            { "file": "jquery-1.11.2.js" },
            { "file": "bootstrap.js" }
        ]
    }
},
"css": {
    "common": {
        "version": "1.0.0",
        "minify": true,
        "combine": [
            { "file": "bootstrap.css" },
            { "file": "site.css" }
        ]
    }
}

ログイン後にコピー

}

このファイルでは、次の JavaScript を定義できます。マージおよび圧縮された CSS ファイル。プロジェクトがビルドされるたびに自動的にマージおよび圧縮されます。これにより、プロジェクト内のファイルの数が大幅に減り、ページの読み込み速度が向上します。

レスポンシブ画像スタイルの自動生成

Web Essentials には、レスポンシブ画像スタイルを自動生成するもう 1 つの非常に便利な機能があります。以下に示すように、任意の画像を右クリックして [レスポンシブ画像の作成] を選択できます。

コードスニペットと事前定義テンプレート

Web Essentials には、複雑な JavaScript コードを迅速に作成するのに役立つ多数のコードスニペットと事前定義テンプレートも提供されています。これらのコードスニペットとテンプレートは、[ツール] -> [コードスニペットマネージャー] から表示して使用できます。