web-dev-qa-db-ja.com

console.logのVisual Studio Codeのショートカットは何ですか

Visual Studioコードのconsole.logのショートカットは何ですか？

typescriptvisual-studio-code
72
Petko Kamenov

2019年2月更新：

Adrian Smith などによって提案されているように、キーボードショートカットをバインドしてコンソールログステートメントを作成する場合、次のことができます。

  1. ファイル>設定>キーボードショートカット
  2. 検索バーの下にメッセージが表示されます。「高度なカスタマイズの場合は、keybindings.jsonを開いて編集します」、クリックします
  3. これをJSON設定に追加します。
{
  "key": "ctrl+shift+l",
  "command": "editor.action.insertSnippet",
  "when": "editorTextFocus",
  "args": {
    "snippet": "console.log('${TM_SELECTED_TEXT}$1')$2;"
  }
}

押す CTRL+SHIFT+L コンソールスニペットを出力します。また、すでにテキストが選択されている場合は、ログステートメント内に配置されます。

インテリセン/オートコンプリートが必要な場合：

Preferences->User Snippets-> ChooseTypeScript（または何でもあなたが望む言語）。 jsonファイルが開きます。そこにコードスニペットを追加できます。

console.logのコメントは既にコメントアウトされています：

"Print to console": {
    "prefix": "log",
    "body": [
        "console.log('$1');",
        "$2"
    ],
    "description": "Log output to console"
}

スニペットを使用したいすべての言語でこれを行う必要があります...ちょっと面倒です。

また、スニペットがインテリセンスの上に表示されるように、"editor.snippetSuggestions": "top"を設定する必要があります。ありがとう、クリス！

スニペットの提案はPreferences-> Text Editor-> Suggestionsで見つけることができます

120
Sebastian Sebald

@Sebastian Sebaldのトップの回答はまったく問題ありませんが、同様の問題（具体的にはconsole.logではなく、 "missing"）にぶつかりました。私も回答を投稿したいと思いました。

あなたのプレフィックスは確かに機能しています-デフォルトではlogで、あなたの場合はcに変更しています。 log（またはc）と入力すると、VSCodeは多くの要素に基づいて「すべてのもの」の完全なリストを生成します（つまり、どの要素、おそらくクラス関連性がわからない）。

スニペットのようなものは、下に向かって引き寄せられる傾向があります。それらを長さに関係なく一番上にバンプするには、これを設定に追加します。

"editor.snippetSuggestions": "top"
36
Chris

上記の答えはすべて正常に機能しますが、Visual Studioコードの構成を変更したくない場合は、console.log(object);の自動補完が必要な場合は、このショートカットを使用できます clgを押して Ctrl+Space 提案とヒットのために Enter
注：この機能は、JavaScript（ES6）コードスニペット拡張機能をインストールするときに使用できます。

同様に、次のオートコンプリートがあります：

  • clgfor console.log(object);
  • clofor console.log('object :', object);
  • cclfor console.clear(object);
  • cerfor console.error(object);
  • ctrfor console.trace(object);
  • cltfor console.table(object);
  • cinconsole.info(object);の場合
  • ccofor console.count(label);

    （このリストは続きます...）

javaScript（ES6）コードスニペットのリンク： https://marketplace.visualstudio.com/items?itemName=xabikos.JavaScriptSnippets

enter image description here

32
Sabunkar Tejas Sahailesh

Atomにはconsole.log（）の素敵なショートカットがあり、VS Codeでも同じものが欲しかった。

@ kamp でソリューションを使用しましたが、その方法を理解するのに時間がかかりました。ここに私が使用した手順があります。

  1. 移動：ファイル>設定>キーボードショートカット

  2. ページの上部に次のメッセージが表示されます：高度なカスタマイズの場合は、keybindings.jsonを開いて編集します

Click on link

  1. これにより、デフォルトのキーバインディングとカスタムバインディングの2つのペインが開きます。

Enter code in right pane

  1. @ kamp が提供するコードを入力してください
23
Adrian Smith

他の方法は、keybindings.jsonファイルを開き、目的のキーの組み合わせを追加することです。私の場合、次のとおりです。

{
    "key": "cmd+shift+l",
    "command": "editor.action.insertSnippet",
    "when": "editorTextFocus",
    "args": {
      "snippet": "console.log($1)$0;"
    }
}
21
kamp

logと入力し、enterを押します。 console.log();を自動補完します

18
nedemir

高度なカスタマイズの場合は、keybindings.jsonを開いて編集します

enter image description here

この小さなアイコンをクリックして、keybindings.jsonを開きます。

このコードを使用して、console.log（）と選択したテキストのconsole.log（ "Word"）の両方を生成します。

{
  "key": "ctrl+shift+l",
  "command": "editor.action.insertSnippet",
  "when": "editorTextFocus",
  "args": {
    "snippet": "console.log('${TM_SELECTED_TEXT}$1')$2;"
  }
}
12
Hiran D.A Walawage

現在選択されているテキストをconsole.log()ステートメントに入れることに興味がある場合：

{
    "key": "cmd+shift+l",
    "command": "editor.action.insertSnippet",
    "when": "editorTextFocus",
    "args": {
      "snippet": "console.log(${TM_SELECTED_TEXT}$1)$0;"
    }
}
9
medoingthings

clg +タブ

または上記のように、

ログ+入力（ドロップダウンの2番目のオプション）

これは古い質問ですが、他の人にも役立つと思います。

6
palmaone

Wordlogを入力すると、次のように表示されます。

Choosing the method that says Log to the console

異なるログオプションが表示された場合にコンソールにログするという名前を選択してください.

Enterをクリックします。

console.log() typed automatically!

インテリセンスがその仕事をします！

6
Srishti

これがより良い解決策です

{
        "key": "cmd+shift+c",
        "command": "editor.action.insertSnippet",
        "when": "editorTextFocus",
        "args": {
            "snippet": "console.log('${TM_SELECTED_TEXT}', $TM_SELECTED_TEXT$1);"
        }
    }
2
Param Singh

以下は単一引用符で囲まれた現在選択されているテキストです。それが役に立てば幸い

// Place your key bindings in this file to overwrite the defaults
[{
    "key": "ctrl+shift+c",
    "command": "editor.action.insertSnippet",
    "when": "editorTextFocus",
    "args": {
        "snippet": "console.log('${TM_SELECTED_TEXT}$1')$2;"
    }

}]
2
Ragavan Rajan

別の方法として、console.logを呼び出す簡単な関数を作成し、その関数を呼び出すことができます。

 var a = funtion (x) {console.log(x)}
 a(2*2);        //prints 4
0
zazadada