VS コードガイド_html/css_WEB-ITnose

Visual Studio は、プラグイン機能を追加してから、時代に追いつくために、実際にさまざまな新旧のエディターに強い圧力をかけてきました。 VSC についてよく理解し、理解する必要があります。

これは基本的に公式チュートリアルの要約と翻訳です。

基礎知識

結局のところ、VSC はコード エディターであるため、他のコード エディターと同様に、使用すべき基本的な機能と、使用すべきではない基本的な機能があります。以下に簡単に紹介します。

ファイル、フォルダー、プロジェクト

フォルダーに package.json、project.json、tsconfig .json が含まれている場合は、任意にファイルまたはフォルダーを開いて編集できます。または他の ASP.NET 5 sln ファイルを使用すると、VSC はプロジェクト構造を自動的に読み取り、それを強調表示できます

Basic View

Editor、Side Bar、Status Bar、View Bar は基本的にここに標準で付属しています

ヒント: command+B を使用してサイドバーの表示を切り替えることができます

複数列編集

いくつかの点を覚えておいてください ショートカット キー

• command+を使用して複数の列に分割できます
• command+1/2/3 数字キーで現在アクティブなファイルを選択します
• は自由に調整できます

ファイル ブラウザ

ファイルを右クリックするだけで基本的なファイル操作を実行でき、ターミナルで直接開くこともできます。

ヒント: command+p を使用すると、ファイル名でファイルをすばやく検索して開くことができます

デフォルトでは、VSC は一部のフォルダー (.git など) を表示から除外します。もちろん、ユーザー設定で files.exclude を構成して、除外ルールをカスタマイズすることもできます (*.meta などのワイルドカードがサポートされています)

開いたファイル

の場合、開いたファイルはサイドバーの上に表示されます。カスタマイズする必要がある場合は、次のプロパティの一部を設定できます:

• explorer.workingFiles.maxVisible
• explorer.workingFiles.dynamicHeight

Cross - ファイル検索

ショートカット キー shift+command+f は、中国語と英語の両方で全文検索をサポートします。とても楽しかったです！正規表現もサポートしています。

さらに高度な検索が必要な場合は、shift+command+j を使用できます

基本的な正規表現を以下に示します:

• * 1 つ以上に一致します。パス セグメント内の文字
• ? パス セグメント内の 1 つの文字に一致する
• ** 任意の数のパス セグメントに一致する (なしを含む)
• {} をグループ条件に一致させる(例: {**/*.html,**/*.txt} は、すべての html および txt ファイルに一致します)
• [] は、一致する文字の範囲を宣言します (例: example.[0-9]) example.0、example.1、…に一致する

検索範囲をカスタマイズして設定で設定できることに注意してください

• files.exclude
• search.exclude

コマンド パレット

F1 を押すとコマンド パレットが表示され、さまざまなコマンドや基本的なテクニックをすぐに入力できます

• command +p: ファイル名でファイルを検索
• control+tab: 以前に開いたファイルを順に表示できます
• shift+command+o: ファイル内の指定されたシンボルに移動できます
• control+g: 指定した行に移動

コマンド パレットに入力します。 現在利用可能な操作を表示できます

ファイル エンコーディングのサポート

files.encoding で設定 特定のエンコーディングを設定します。これは、右下隅のステータス バーに表示され、ステータス バーのエンコーディングをクリックして、指定したエンコーディングでファイルを開くか保存します (エンコーディングを選択する必要もあります)。特定のエンコード形式)

編集機能

理論的に言えば、基本的にすべての機能が利用できるはずですが、ここではいくつかの素晴らしい機能のみを紹介します

ブラケット マッチング

括弧は自動的に一致を強調表示します。shift +command+] を使用して一致する括弧の位置にジャンプできます。

複数行選択

各カーソルを使用して複数行選択をアクティブにします。は独立しており、もう 1 つはカーソルを追加する場合に便利です。option+command+↓ と option+command+↑ は、

command+D のすぐ下または上にカーソルを追加して、現在の単語を選択します。 、または現在の単語が次に表示される位置、command+K command+D 単語の最後に出現する部分を選択します

カーソルを追加する他の方法は

• SHIFT+COMMAND +l : 次に出現する単語にカーソルを追加します
• command+f2: 次の単語の前にカーソルを追加します

選択範囲をインデント/展開します

インデントを選択します/expand、ショートカット キー control+shift+command+← / control+shift+command+ →

スマート ヒント

JavaScript、JSON、HTML、CSS のスマート ヒントがあります、Less、Sass、C#、TypeScript、および control+space を使用して手動でアクティブにすることもできます。 .、tab、Enter を使用して

を選択します。 デフォルトでは、入力中にインテリジェントなプロンプトが実行されます。 24x7 IntelliSense と呼ばれ、editor.quickSuggestions および editor.suggestOnTriggerCharacters

で設定できます。

パラメータ プロンプト

JavaScript、TypeScript、C# では、関数パラメータが自動的にプロンプ​​トされ、矢印キーで移動できます

コード スニペット

にあります。ユーザー スニペット (ファイル | 環境設定) 独自のスニペットを設定します

定義にジャンプ

言語がサポートしている場合は、F12 を使用して定義にジャンプできます。 Ctrl キーを押したままシンボルの上にポインタを置くと、単純なプレビュー ボックスが表示されます。定義にジャンプする必要がある場合は、Ctrl キーを押しながらクリックします。反対側のウィンドウで定義を開く必要がある場合は、Ctrl+Alt+クリック

拡張機能

拡張機能のサポートは、エディターをより強力にする方法です。ここで簡単に説明します。現在便利だと思う拡張機能の紹介

インストール

インストール方法は非常に簡単で、F1 を使用してコマンドラインを開き、ext inst と入力して

MarketPlace

Markdown テーマ キット
Markdown プレビュー command+k v