/ How to

How to Directly Run Code Snippets in Terminal Using Visual Studio Code Editor

Visual Studio Code (VS Code) is a popular code editor that comes with an integrated terminal. This allows you to directly run code snippets and commands in the terminal without having to switch to an external terminal window. Here are the steps to run code snippets directly in the terminal using VS Code:

Enable Integrated Terminal in VS Code

The integrated terminal in VS Code needs to be enabled first before you can run commands in it. Here are the ways to open the terminal:

  • Use the View > Terminal menu option.
  • Use the keyboard shortcut Ctrl + ` (backtick).
  • Use the Terminal: Create New Integrated Terminal command in the Command Palette (Ctrl + Shift + P).

Once the terminal is enabled, you will see a terminal panel appear either in the bottom pane or on the right side.

Define Code Snippets

VS Code allows you to define custom code snippets that can be accessed quickly. Here are the steps:

  1. Go to File > Preferences > User Snippets.
  2. Select the language for which you want to create a snippet, such as javascript or python.
  3. Enter a snippet name and define the snippet body: "Print to console": { "prefix": "log", "body": [ "console.log('$1');", "$2" ], "description": "Log output to console" }
  4. Save the snippet file.

The snippet above can be triggered by typing log and pressing enter. The $1 and $2 will be replaced by text entered on pressing tab.

Send Code Snippets to Terminal

To run the code snippets defined above directly in the terminal:

  1. Open the terminal using any of the methods described earlier.
  2. Type the snippet prefix, for example log.
  3. Press Tab to navigate between the $1 and $2 placeholders.
  4. Press Enter after completing the placeholders to run the snippet.

The output will be visible directly in the terminal panel.

Alternative: Send Selection to Terminal

You can also select a code snippet in the editor and send it to the terminal:

  1. Select the code in the editor you want to run.
  2. Right click and choose Send Selection to Terminal.
  3. The selected code will be sent to the terminal and executed.

Customize Terminal Snippets

If you need more control on running snippets in terminal, you can use extensions like Terminal Snippets.

It allows you to define custom JSON configuration for terminal snippets, including:

  • The ability to pass selected text from editor to snippets
  • Using variables and placeholders
  • Chain multiple commands

Here is an example configuration:

"snippets": [
    {
        "name": "Install Package",
        "prefix": ["inst", "install"],
        "body": [
            "npm install ${1:packageName}"
        ],
        "description": "Install an npm package"
    }, 
    {
        "name": "List Directory Contents",
        "prefix": ["ls"], 
        "body": [
            "ls $TM_SELECTED_TEXT"
        ],
        "description": "List directory contents"
    }
]

The second snippet above sends the selected text in the editor as an argument to the ls command.

Tips for Effective Use

Here are some tips to use code snippets in terminal effectively:

  • Define snippets for common terminal commands and workflows to save time
  • Bind snippets to intuitive prefix for quick access
  • Use $1, $2 etc. placeholders for arguments
  • Access clipboard inside snippets using $CLIPBOARD
  • Select relevant text in editor before sending to terminal
  • Install extensions like Terminal Snippets for more customization

Conclusion

The integrated terminal in Visual Studio Code editor provides a seamless way to run code snippets and commands without switching contexts. With user-defined snippets, clipboard access and ability to send editor selection, it becomes a very powerful tool.

Extensions like Terminal Snippets take it even further by allowing custom placeholder arguments and chaining multiple commands. As you get acquainted with the terminal, make sure to utilize these options for maximum productivity.

Related Resources

Related Posts