Home > Editor > Visual Studio Code > ドキュメント

VS CodeでのHTMLプログラミング

新規作成日 2015-12-27
最終更新日

原文

HTML Programming in VS Code(外部サイト)

訳文

VS Codeは、すぐに使えるHTMLプログラミングのために、基本的なサポートを提供します。より素晴らしい機能のために、拡張機能をインストールします。

HTML Snippets HTML CSS Class JS-CSS-HTML HTML CSS Suppor

ヒント:

上記の拡張機能は、動的に問い合わせられます。 どの拡張機能が、あなたに最も良いか決定するために説明とレビューを読み、そして、上記の拡張機能のタイルをクリックします。 詳細については、Marketplaceを参照してください。

IntelliSense

IntelliSense

あなたが、HTMLで入力すると、私たちは、HTML IntelliSenseによって提案を提供します。 下記の画像で、あなたは、提案されたHTML要素の終了

と同じように、提案された要素の文脈条件の特定のリストを見るでしょう。

HTML IntelliSense

また、私たちは、要素、タグ、いくつかの値(HTML 5で定義される)、IonicとAngularJSタグのための、提案を提供します。

また、あなたは、組み込まれたCSSとJavaScriptで作業することができます。 しかしながら、スクリプトとスタイルのインクルードが、追跡されないことに注意します、言語サポートは、HTMLファイルの内容だけを調べます。

あなたは、Ctrl+Spaceを押すことによって、いつでも、提案を起動することができます。

また、あなたは、アクティブな、組み込みのコード補完機能プロバイダを制御することができます。 あなたが、対応する提案を表示しないようにするために、これらのあなたのユーザーや作業スペース設定を上書します。

// Configures if the built-in HTML language suggests Angular V1 tags and properties.
// 組み込みのHTML言語が、Angular V1タグとプロパティの提案をサポートするかどうかを設定します。
"html.suggest.angular1": true,

// Configures if the built-in HTML language suggests Ionic tags, properties and values.
// 組み込みのHTML言語が、Ionicタグ、プロパティと値を提起する場合、設定します。

"html.suggest.ionic": true,

// Configures if the built-in HTML language suggests HTML5 tags, properties and values.
// 組み込みのHTML言語が、HTML5タグ、プロパティと値を提起する場合、設定します。

"html.suggest.html5": true

ホバー

Hover

カーソルの下にある記号に関するより多くの情報を取得するために、HTMLタグや組み込まれたスタイルとJavaScriptにマウスカーソルを移動します。

カーソルの下にある記号に関するより多くの情報を取得するために、HTMLタグや組み込まれたスタイルとJavaScriptにマウスカーソルを移動します。

書式設定されたHTML

Format HTML

あなたのHTMLソース・コードの書式を改善するには、Ctrl+K Ctrl+Fを押します。そして、選択された領域は、再フォーマットされます。

ヒント:

フォーマッタは、html.format.unformatted設定で、一覧にされるタグをフォーマットしません。 'script'タグが除外されない限り、組み込まれたJavaScriptはフォーマット化されます。

ヒント:

UserとWorkspace設定で、HTMLフォーマッタ設定を設定します。

書式設定されたHTML

Format HTML

あなたのHTMLソース・コードの書式を改善するには、Ctrl+K Ctrl+Fを押します。そして、選択された領域は、再フォーマットされます。

ヒント:

フォーマッタは、html.format.unformatted設定で、一覧にされるタグをフォーマットしません。 'script'タグが除外されない限り、組み込まれたJavaScriptはフォーマット化されます。

ヒント:

UserとWorkspace設定で、HTMLフォーマッタ設定を設定します。

Emmetスニペット

Emmet snippets

私たちは、単純に、Tabを押すことで、Emmetスニペット拡張をサポートしています。

Emmetスニペット拡張

ヒント:

有効な略語のためのEmmetカンニング・ペーパーのHTMLの項目を参照してください。

あなたが、他の言語で、HTML Emmetの略号を使用したいと思う場合、あなたは、emmet.syntaxProfiles設定を使用して、 (html、cssのような)他の言語でも使用できるEmmet構文プロファイルを関連付けることができます。 この設定では、言語IDが使用され、Emmetプロファイルに関連付けられます。

例えば、JavaScript内部で、Emmet HTML略号を使用するには、:

{
    "emmet.syntaxProfiles": {
        "javascript": "html"
     }
}

また、私たちは、ユーザー定義スニペットをサポートしています。

次の手順

Next Steps

以下について調べるためにお読みください:

CSS、LessとSass-VS Codeは、LessとSassが含まれるCSSのための、最高級のサポートを持っています。

原文 最終更新日 2016-12-14

Home Editor Tools Operation TagScript HPSpace

Copyright (C) 2011 Horio Kazuhiko(kukekko) All Rights Reserved.
kukekko@gmail.com
ご連絡の際は、お問い合わせページのURLの明記をお願いします。
「掲載内容は私自身の見解であり、所属する組織を代表するものではありません。」