vscode で console.log を書く 2 つの簡単な方法の詳細な説明

vscode で console.log を書く 2 つの簡単な方法の詳細な説明

(I) 方法 1: 事前にスクリプト タグ内に直接定義します。この HTML ファイルにのみ適用されます。

 add = function(a,b){ を追加します。
 	a + b を返します。
 };
 コンソールログ((20,300)を追加します);
 
 const { ['log']:C } = コンソール;
 C((20,300) を追加します);

(ii) 方法 2: Tab キーを押して console.log をすばやく生成すると、カーソルが () 内にあります。もう一度 Tab キーを押すと、カーソルが自動的に次の行にジャンプします。
1. vscode エディターを開き、「ファイル」->「設定」->「ユーザー スニペット」を選択し、「javascript.json」と入力して Enter キーを押します。
初めて使用する場合、次のようなコメント付きコードが見つかります。

{
	// ここにJavaScriptのスニペットを配置します。各スニペットはスニペット名で定義され、プレフィックス、本文、 
	// 説明。プレフィックスはスニペットをトリガーするために使用され、本文は展開されて挿入されます。使用可能な変数は次のとおりです。
	// $1、$2はタブストップ、$0は最終カーソル位置、${1:label}、${2:another}はプレースホルダーです。 
	// 同じ ID が接続されています。
	// 例:
	// "コンソールに出力": {
	// "プレフィックス": "ログ",
	// "体": [
	// "console.log('$1');",
	// "$2"
	// ],
	// "description": "コンソールにログ出力します"
	// }
}

2. 例をリリースするには、次の間隔コードを使用します。一部のパラメータの意味は次のとおりです。
①prefix: コードのショートカットキーのエントリ。ここでは、個人の習慣に応じて設定できます。たとえば、cl を設定すると、Tab キーで console.log を直接生成できます。
②bodyはコード本体を表します。
$1は、コードが生成された後にカーソルが最初に表示される位置を示します。
$2 は "console.log('$1');" の下に書かれています。これは、console.log() が素早く生成された後、コードの後に​​ 1 行が残り、もう一度 Tab キーを押すとカーソルが $2 (左の行) にジャンプすることを意味します。

{
	// ここにJavaScriptのスニペットを配置します。各スニペットはスニペット名で定義され、プレフィックス、本文、 
	// 説明。プレフィックスはスニペットをトリガーするために使用され、本文は展開されて挿入されます。使用可能な変数は次のとおりです。
	// $1、$2はタブストップ、$0は最終カーソル位置、${1:label}、${2:another}はプレースホルダーです。 
	// 同じ ID が接続されています。
	// 例:
	「コンソールに印刷」: {
		「プレフィックス」: 「cl」、
		"体": [
			"console.log('$1');",
			「$2」
		]、
		"description": "コンソールにログ出力します"
	}
}

これで、vscode で console.log を書く 2 つの簡単な方法についての説明は終わりです。vscode console.log の書き方に関するより関連性の高いコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • Vscode共通ショートカットキー一覧、プラグインインストール、console.log詳細説明

<<:  6つのレイアウトでのFrameLayoutの使用

>>:  MySQL サービスに iptables ファイアウォール ポリシーを追加するためのソリューション

推薦する

MySQL グリーンバージョン設定コードと 1067 エラーの詳細

MySQL グリーンバージョン設定コードと 1067 エラーMySQL エンコーディングを表示 &#...

MySQL 面接の質問: ハッシュ インデックスの設定方法

B-Tree インデックスに加えて、MySQL は次のインデックスも提供します。ハッシュインデックス...

MySQL の乗算と除算の精度の不一致の問題 (除算後の小数点以下 4 桁)

質問今日、プロジェクト関数を書いていたとき、金額の統計計算を行い、単位を変換する必要がありました。そ...

nginx を介してローカルでリバースプロキシを構成するプロセス全体

序文Nginx は、イベント駆動型の非同期非ブロッキング処理フレームワークを使用する軽量 HTTP ...

SQL文の最適化の一般的な手順の詳細な説明

序文この記事では主に、SQL ステートメントの最適化の一般的な手順について説明します。これは、参考と...

JavaScript ES 新機能ブロックスコープ

目次1. ブロックスコープとは何ですか? 2. ブロックスコープが必要なのはなぜですか? 3. 関数...

ウェブデザインと制作におけるハイパーリンクの効果の向上

ハイパーリンクを使用すると、ページからページへ、またはサイトからサイトへ瞬時に移動できます。このよう...

シンプルなログインページを実装するための HTML+jQuery

目次導入公開コード(バックエンドインターフェース)例 1: 最もシンプル (純粋な HTML)コード...

ボタンをクリックしてテキストを入力ボックスに変換し、保存をクリックしてテキスト実装コードに変換します。

ボタンをクリックしてテキストを入力ボックスに変換し、保存をクリックしてテキスト実装コードに変換します...

Bootstrap 3.0 の特殊効果の学習ノート(表示と非表示、フローティングの除去、閉じるボタンなど)

この記事の主な内容は次のとおりです。 1. 閉じるボタン2.キャレット3. フローティングを素早く設...

JS がビデオ弾幕効果を実現

これを実現するには、ES6 モジュール開発とオブザーバー モードを使用します。オブザーバー パターン...

Vue Element フロントエンドアプリケーション開発の動的メニューとルーティングの関連付け処理

目次概要1. メニューとルーティング処理2. メニューとルートリスト3. ログインプロセスの処理概要...

Linux で開いているファイルが多すぎる問題を解決する方法

原因は、プロセスが特定の時点でシステム制限を超える数のファイルと通信リンクを開くことです。 システム...

JS でカルーセル画像を実装するいくつかの方法

カルーセル主なアイデアは次のとおりです。大きなコンテナには、コンテナの幅の整数倍の非常に長いテーブル...