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 ファイアウォール ポリシーを追加するためのソリューション

推薦する

dockerを使用してdubboプロジェクトをデプロイする方法

1. まず、Springbootを使用して簡単なDubboテストプログラムを構築し、関連する依存関係...

Vue3 コンポジション API でロジックの再利用を実装する方法

Composition API はロジック再利用手順を実装します。ロジックコードを関数に抽出します。...

ブラウザがクロージャをどのように認識するかについて詳しく説明します

目次序文クロージャの紹介メモリのゴミを識別する方法クロージャのメモリ表現結論序文クロージャは、Jav...

MySQLクエリの文字セットの不一致の問題を解決する方法

問題を見つける最近、仕事で問題が発生しました。MySQL データベースにテーブルを作成するときに、ラ...

MySQLデータベースのストアドプロシージャとトランザクションの違い

トランザクションは、複数の SQL ステートメントの原子性、つまり、それらが一緒に完了するか、一緒に...

myBatis で条件を削除する際のスプライシング問題を解決する

私は今日、mybatis を学び、データベースに対していくつかの簡単な追加、削除、変更、クエリを実行...

パスワードログインなしでCentOS7にxshellリモートログインするアイデアを詳しく解説

まず、全体的な考え方についてお話しします。 1. パスワードを使用してCentOSシステムにログイン...

HTML外部参照CSSファイルが効果を発揮しない理由の分析と解決

フロントエンドの初心者として、私は数日間フロントエンドをいじってみました。 。今日、私は自分が固く信...

Javascript 仮想 DOM の詳細な説明

目次仮想DOMとは何ですか?なぜ仮想DOMが必要なのでしょうか?仮想 DOM はどのようにして実際の...

ウェブサイトはグレー表示されています。画像を含む互換コードはすべてのブラウザをサポートしています

通常、国喪の日、大地震の日、清明節には、ウェブサイト全体を灰色にして、故人への哀悼の意を表します。そ...

docker を使用して Windows 10 Home バージョンで Laravel 開発環境を構築する方法の詳細なチュートリアル

オペレーティング·システム: Win10 ホームエディションDockerをインストールします:公式サ...

自動的にフォーカスを取得する要素入力ボックスの実装

最近のプロジェクトでフォームを作成するときに、コメント ボックスまで自動的にスクロールし、コメント ...

DockerはPruneコマンドを使用してnoneイメージをクリーンアップします

目次無イメージの創造と混乱Noneオブジェクトをクリーンアップする方法トリムミラーコンテナで使用され...

MYSQL の COLLATE とは何ですか?

序文MySQL で show create table <tablename> コマンド...

HTML テーブル マークアップ チュートリアル (28): セルの境界線の色属性 BORDERCOLOR

テーブルを美しくするために、セルごとに異なる境界線の色を設定できます。基本的な構文<TD 境界...