あなたはconsole.log中毒ですか?このスニペットを追加して、より速く、より簡単に、より明確に使用できるようにします.

私たちの最初のデバッグ フレンド、謙虚な console.log

JavaScript をプログラミングするときに最初に学ぶことの 1 つは、出力ウィンドウに値を出力する方法です. myVar という変数を宣言し、コードに myVar = 1+1 のようなステートメントがあるとします.コードが期待どおりに動作していることを確認したい場合 (1 + 1 = 2 であるため、myVar は 2 に等しい必要があります)、 console.log(myVar) と記述します.インタープリターがそのコード行に到達すると、出力ウィンドウに奇跡的に 2 が表示されます.

...しかし、それはスケーリングしません

問題は、コードに console.log 個のステートメントを追加すると、出力ウィンドウに表示されるすべての値が何を参照しているのかを思い出すのが難しくなることです.解決策は、次のような、より冗長な console.log ステートメントを作成することです.

console.log(`myVar = $myVar`)

しかし、それはしばらくすると面倒になる可能性があります.

私の解決策

私の解決策は、VSCode でスニペットを作成して、ショートカットを入力すると、私の場合は consolel になるようにすることでした (ピリオドなしで console.log を入力するのと同じように)、次のステートメントが表示されます.

console.log(`foo = `, foo)

次に foo をダブルクリックし、 ⌘d と入力して他の foo を選択し、 myVar と入力して両方の foo を myVar に置き換えます.結果は次のとおりです.

console.log(`myVar = `, myVar)

...コードを実行すると、出力ウィンドウに次のように表示されます.

myVar = 2

...ただの代わりに

2

いいじゃないですか.

説明的な console.log ステートメントをすばやく簡単に追加するスニペットを作成する方法は次のとおりです。

VSCode の上部メニューで、[コード] > [設定] > [ユーザー スニペット] を選択します

コマンド パレットが開きます. [新しいグローバル スニペット ファイル] を選択し、使用する名前を入力します.私のは consolelog だったので、 consolelog.code-snippets というタイトルのファイルが作成されました

新しいコード スニペット ファイルには、使用方法を説明する一連の中括弧内にコメント アウトされたテキストが多数含まれます.テキストの一番下の最後の中括弧内に、次のコードを追加します.

"consolelog":{
    "prefix": ["consolelog"],
    "body": ["console.log(`foo = `, foo)"],
    "description": ["Shortcut for a descriptive console.log statement"]

    },

完了すると、コードは次のようになります.

{
    // Place your global snippets here. Each snippet is defined under a snippet name and has a scope, prefix, body and 
    // description. Add comma separated ids of the languages where the snippet is applicable in the scope field. If scope 
    // is left empty or omitted, the snippet gets applied to all languages. The prefix is what is 
    // used to trigger the snippet and the body will be expanded and inserted. Possible variables are: 
    // $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. 
    // Placeholders with the same ids are connected.
    // Example:
    // "Print to console": {
    //  "scope": "javascript,typescript",
    //  "prefix": "log",
    //  "body": [
    //      "console.log('$1');",
    //      "$2"
    //  ],
    //  "description": "Log output to console"
    // }
    "consolelog":{
        "prefix": ["consolelog"],
        "body": ["console.log(`foo = `, foo)"],
                "description": ["Shortcut for a descriptive console.log statement"]

コードで何が起こっているかを次に示します.コメントアウトされたテキストにあるように、「各スニペットはスニペット名の下に定義され、スコープ、プレフィックス、本文、および説明があります.」この場合、それらは次のとおりです.

スニペット名: consolelog

範囲: (これをグローバルにするために scope をスキップしました)

プレフィックス: このスニペットを呼び出すために選択したショートカット.私は consolelog を選びました

本文: スニペットで作成するテキストを角かっこと引用符で囲みます

説明: スニペットを最もよく説明していると思われるもの. 「説明的な console.log ステートメントのショートカット」を書きました

これが役立つことを願っています!