Visual Studio Code 中 console.log 的快捷方式是什么

Question

我想知道 Visual Studio 代碼中 console.log 的快捷方式是什么？

Answer 1

2019 年 2 月更新：

正如Adrian Smith和其他人所建議的：如果要綁定鍵盤快捷鍵來創建控制台日志語句，可以執行以下操作：

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 + SHIFT + L將輸出控制台代碼段。 此外，如果您已經選擇了文本，它將被放入日志語句中。

---

如果您更想要智能/自動完成：

轉到首選項->用戶代碼段-> 根據您的需要選擇Typescript （或您想要的任何語言）或“全局代碼段文件”。 應該會打開一個json文件。 您可以在那里添加代碼片段。

已經注釋掉了console.log一個片段：

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

您過去必須對每種語言都執行此操作，但現在在“全局片段文件”中，您可以設置scope屬性，該屬性允許您顯式聲明多種語言。

如果您需要語言的確切名稱：通過單擊 VS Code 底部工具欄右側的“ Select Language Mode按鈕進行檢查。 它將提示您在頂部選擇一種語言，並在此過程中將在括號中顯示該語言的 JSON 名稱，您可以在上面的示例中將其輸入到片段文件中。

---

此外，您應該設置"editor.snippetSuggestions": "top" ，以便您的代碼段出現在智能感知之上。 謝謝@克里斯！

您可以在首選項 -> 設置 -> 文本編輯器 -> 建議中找到片段建議

Answer 2

以上所有答案都可以正常工作，但是如果您不想更改 Visual Studio 代碼的配置，而是希望自動完成console.log(object); 您可以簡單地使用此快捷方式clg並按Ctrl + Space以獲得建議並按Enter
注意：當您安裝 JavaScript (ES6) 代碼片段擴展時，此功能可用。

同樣，您可以自動完成：

• clg為console.log(object);
• clo for console.log('object :', object);
• ccl為console.clear(object);
• cer用於console.error(object);
• ctr為console.trace(object);
• 用於console.table(object); clt console.table(object);
• cin為console.info(object);
• cco為console.count(label);
  
  （這個列表還在繼續……）
  
  此外，這方面的另一個很好的擴展是Turbo Console Log 。 我個人每天都在使用這兩種方法並享受它們的組合。

---

參考資料：

1. JavaScript(ES6) 代碼片段的鏈接：

https://marketplace.visualstudio.com/items?itemName=xabikos.JavaScriptSnippets

2. 從 Visual Studio Code 預覽：

Answer 3

enter log並按enter 。 它將自動完成console.log();

Answer 4

@Sebastian Sebald 的最佳答案非常好，但遇到了類似的問題（不是 console.log，而是“丟失”），我也想提供一個答案。

您的前綴確實有效 - 默認情況下它的log ，在您的情況下，您已將其更改為c 。 當您鍵入log （或c ）時，VSCode 將基於許多因素（即我不知道哪些因素，可能是類相關性）生成“所有事物™”的完整列表。

諸如片段之類的東西往往會被吸引到底部。 要將它們頂到頂部，盡管它們很長，請將其添加到您的設置中：

"editor.snippetSuggestions": "top"

Answer 5

在 Atom 中有一個很好的 console.log() 快捷方式，我希望在 VS Code 中也能使用。

我使用了@kamp的解決方案，但我花了一段時間才弄清楚如何去做。 以下是我使用的步驟。

1. 轉到：文件 > 首選項 > 鍵盤快捷鍵

2. 在頁面頂部，您將看到一條消息：對於高級自定義，請打開並編輯 keybindings.json

3. 這將打開兩個窗格：默認鍵綁定和您的自定義綁定。

4. 輸入@kamp提供的代碼

Answer 6

另一種方法是打開keybindings.json文件並添加所需的組合鍵。 就我而言，它是：

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

Answer 7

任何尋找高級定制的人都可以打開並編輯 keybindings.json

單擊這個小圖標打開 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;"
  }
}

Answer 8

當您輸入log一詞時，您將看到如下內容：

如果您看到不同的日志選項，請選擇“登錄到控制台”的選項（當您有一些名稱為 log.log 的標識符時，這基本上是可能的）。

單擊輸入。

智能感知將完成它的工作！

Answer 9

clg + 標簽

或如上所述，

登錄 + 輸入（下拉菜單中的第二個選項）

這是一個老問題，但我希望對其他人有用。

Answer 10

如果有人有興趣將當前選擇的文本放入console.log()語句：

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

Answer 11

鍵入 'clg' 然后按ctrl + space並按enter ，它將自動完成到console.log() 。
為此，您只需要安裝一個擴展程序，即 JavaScript (ES6) 代碼片段。

Answer 12

我不知道我使用的是什么擴展名，但我只是輸入 log 並點擊 tab 來自動完成 console.log(); 將光標放在大括號之間。

Answer 13

這是一個更好的解決方案

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

Answer 14

下面是當前選中的單引號文本。 希望它有幫助

// 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;"
    }

}]

Answer 15

安裝ES7 React/Redux/GraphQL擴展，然后為console.log()鍵入clg + Enter/Return key

Answer 16

作為替代方案，您可以創建一個易於編寫的函數來調用 console.log，然后調用該函數。

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

Answer 17

輸入co並點擊Tab或輸入。

應該開箱即用。

Answer 18

我用autohotkey也達到了同樣的效果，只要輸入“cc”然后空格，它就會輸出一個控制台日志。 沒試過片段，不知道這如何比較

; vscode
#IfWinActive ahk_exe Code.exe

    SetTitleMatchMode 2

    ; Move by word - Backwards
    Capslock & d:: Send ^+k
    ::cc::console.log("test321:" {+}){left}
    ::cl::logger.info("test321:" {+}){left}
    ::cd::logger.debug("test321:" {+}){left}
    ::ss::JSON.stringify(test, null, 2){ctrl down}{left 3}{ctrl up}

#IfWinActive 

Answer 19

打印變量的值非常簡單，但也是非常重復和經常需要和完成的事情，因此需要最快的快捷方式！

所以我推薦另一種解決方案，您甚至不需要選擇任何內容。 您也不需要復制/粘貼變量的名稱，也不需要輸入片段的前綴。 它也適用於所有語言，只需一個熱鍵！ :) （感謝 vscode 的“when”表達式）

• 這是它如何工作的預覽：

• 以下是安裝它必須采取的步驟：

  1. 從擴展商店安裝多命令擴展。

  2. 打開你的 vscode 的settings.json文件（如果你不知道怎么做，按 Ctrl + Shift + p 。這將在頂部打開一個命令面板。在里面寫“首選項：打開設置（JSON）”，並按回車鍵！ ）然后將以下項目添加到其中（將解釋）：

  // generating a print statement of the current word on the next line, in different languages
  "multiCommand.commands": [
    {
      "command": "multiCommand.jsGeneratePrint",
      "sequence": [
        "editor.action.addSelectionToNextFindMatch",
        "editor.action.clipboardCopyAction",
        "editor.action.insertLineAfter",
        {
          "command": "editor.action.insertSnippet",
          "args": {
            "snippet": "console.log(\"$CLIPBOARD: \", $CLIPBOARD);"
          }
        },
      ]
    },
    {
      "command": "multiCommand.javaGeneratePrint",
      "sequence": [
        "editor.action.addSelectionToNextFindMatch",
        "editor.action.clipboardCopyAction",
        "editor.action.insertLineAfter",
        {
          "command": "editor.action.insertSnippet",
          "args": {
            "snippet": "System.out.println(\"$CLIPBOARD: \" + $CLIPBOARD);"
          }
        },
      ]
    },
  ],

4. 現在打開keybindings.json文件（在命令面板中寫入：“Preferences: Open keyboard Shortcuts (JSON)” ）並添加以下項目（將解釋）：

    {
        "key": "ctrl+b",
        "command": "multiCommand.jsGeneratePrint",
        "when": "editorTextFocus && editorLangId == javascript"
    },
    {
        "key": "ctrl+b",
        "command": "multiCommand.javaGeneratePrint",
        "when": "editorTextFocus && editorLangId == 'java'"
    }

瞧！，我們完成了。 現在，只需把一個變量名的指針和命中CTRL + B（我很舒服用Ctrl + B，但你喜歡，你可以改變它）。

• 這是它的工作原理（對於好奇的人）：
  • 上面的第一個片段：我們創建了一個“復合命令”（感謝“多命令”擴展），它的意思是“多個命令的序列作為一個新命令”。 我們使用的順序是： 1. 選擇指針所在的當前單詞， 2. 將其復制到剪貼板， 3. 轉到下一行， 4. 使用已復制到剪貼板的單詞生成打印語句。 瞧！ 但是請注意，我們必須為每種語言定義這些復合命令之一，因為不同的編程語言在打印方式上有所不同！
  • 上面的第二個片段：我們創建了“兩個不同的熱鍵，但具有相同的組合鍵” 。 最重要的是，它們的“where”條件不同（我們在其中指定了該熱鍵必須在“where”中工作的代碼語言），然后我們將每個復合命令添加到其自己的熱鍵中。

您可以擴展此方法以涵蓋任何其他語言，只需重復相同的模式（它也可以以其他方式擴展，但我不會再做這個答案了）。 希望這會為您節省一些時間。 :)

Answer 20

如果您使用 VSCode，另一種選擇是使用Turbo Console Log擴展，它不僅可以啟用快捷方式，還可以根據您選擇的文本巧妙地插入自定義文本。 您可以調整它的設置以記錄文件名/行號：

GIF 顯示功能

顯然，安裝擴展程序與更改鍵盤快捷鍵不同，但如果您想要類似於 @aderchox 的答案的功能，這是一個不錯的選擇