javascripttypescriptvisual-studio-codekeyboard-shortcuts

What is the shortcut in Visual Studio Code for console.log


I want to know what is the shortcut for console.log in Visual Studio Code?


Solution

  • Update Feb, 2019:

    As suggested by Adrian Smith and others: If you want to bind a keyboard shortcut to create a console log statement, you can do the following:

    1. File > Preferences > Keyboard Shortcuts
    2. Above the search bar on the right you'll see this icon enter image description here Click on it. (When hovered over it it says: Open keyboard shortcuts (JSON)
    3. Add this to the JSON settings:
    {
      "key": "ctrl+shift+l",
      "command": "editor.action.insertSnippet",
      "when": "editorTextFocus",
      "args": {
        "snippet": "console.log('${TM_SELECTED_TEXT}$1')$2;"
      }
    }
    

    Make sure you add this between the square brackets: [in here] otherwise it won't work.

    Pressing CTRL+SHIFT+L will output the console snippet. Also, if you already have text selected it will be put inside the log statement.


    If you rather want intellisene/autocomplete:

    Go to Preferences -> User Snippets -> Choose Typescript (or whatever language you want) or a 'Global Snippet File' depending on your need. A json file should open. You can add code snippets there.

    There is already a snippet for console.log commented out:

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

    You used to have to do this for every language, but now in the 'Global Snippet File' you can set the scope property which allows you to explicitly declare multiple languages.

    Should you need the exact name of the language: check it by clicking the Select Language Mode button in the right side of the VS Code bottom toolbar. It will prompt you to select a language at the top and in the process will show the JSON name of the language in parenthesis, which you can enter in the snippet file as in the example above.


    Also, you should set "editor.snippetSuggestions": "top", so your snippets appear above intellisense. Thanks @Chris!

    You can find snippet suggestions in Preferences -> Settings -> Text Editor -> Suggestions