1. ホーム
  2. typescript

[解決済み] Visual Studio Codeのconsole.logのショートカットを教えてください。

2022-04-28 12:26:24

質問

Visual Studioのコードで、console.logのショートカットを知りたいのですが?

どのように解決するのですか?

2019年2月に更新しました。

からの提案の通り エイドリアン・スミス などがあります。キーボードショートカットをバインドしてコンソールログ文を作成したい場合は、以下のようにします。

  1. ファイル >環境設定 >キーボードショートカット
  2. 右側の検索バーの上に、このようなアイコンが表示されます。 それをクリックします。( カーソルを合わせると、こう表示されます。キーボードショートカットを開く(JSON)
  3. JSONの設定に追加します。
{
  "key": "ctrl+shift+l",
  "command": "editor.action.insertSnippet",
  "when": "editorTextFocus",
  "args": {
    "snippet": "console.log('${TM_SELECTED_TEXT}$1')$2;"
  }
}

プレス加工 CTRL + シフ ト + L を実行すると、コンソールのスニペットが出力されます。また、すでにテキストが選択されている場合、それはlog文の中に置かれます。


むしろインテリジェンス/オートコンプリートが必要な場合。

次のページへ 環境設定 -> ユーザースニペット -> 選択する タイプスクリプト (または任意の言語)または必要に応じて「グローバルスニペットファイル」を使用します。A json ファイルが開くはずです。そこにコードスニペットを追加することができます。

のスニペットはすでにあります。 console.log がコメントアウトされています。

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

以前は言語ごとに行う必要がありましたが、現在は「グローバル・スニペット・ファイル」で scope プロパティを使って、複数の言語を明示的に宣言することができます。

正確な言語名が必要な場合は Select Language Mode ボタンをクリックすると、VS Codeの下のツールバーが表示されます。上部に言語を選択するよう促され、その過程で言語のJSON名が括弧内に表示されるので、上記の例のようにスニペットファイルに入力することができます。


また "editor.snippetSuggestions": "top" そうすれば、スニペットは intellisense の上に表示されます。クリスさん、ありがとうございます。

スニペットの候補は 環境設定 -> 設定 -> テキストエディタ -> サジェスチョン