GithubHelp home page GithubHelp logo

mre / vscode-snippet Goto Github PK

View Code? Open in Web Editor NEW
232.0 6.0 31.0 6.84 MB

๐Ÿค A Visual Studio Code extension for cheat.sh. Quickly and easily find code snippets for any language right inside your IDE.

License: MIT License

TypeScript 97.32% Makefile 1.30% JavaScript 1.38%
cheatsheet snippet vscode-extension cheatsh

vscode-snippet's Introduction

vscode-snippet

The MIT License GitHub GitHub Marketplace

A Visual Studio Code extension for cht.sh. Watch this lightning talk to learn more.

Features

  • Zero configuration: works out of the box.
  • Automatically detects programming language from current editor window.

Config options

  • openInNewEditor: open snippets or in new editor window (default) in line with current document.
  • verbose: add comments around code snippets.
  • baseUrl: base url of the cheat server (see cheat.sh documentation)
  • http.proxy: VS Code proxy setting. If set, requests made by vscode-snippet will be sent through provided proxy (see Visual Studio Code network settings)
  • defaultLanguage: Programming language name in lower case to use as default language when there is no open editor window.
  • title: Template string of a snippet title. You can use the following variables:
    • ${language} - the programming language
    • ${query} - the snippet query (search text)
    • ${index} - the index of the snippet (e.g. 2 for the third answer)
  • insertWithDoubleClick: insert snippet with double click.
  • showCopySuccessNotification: Whether to show a notification after the snippet is copied to the clipboard.
  • saveBackups: Whether to create backups of the snippets.

Installation

Install this extension from the VSCode Marketplace

Usage

Search for a snippet

  1. Hit โŒ˜ Command + โ‡ง Shift + p
  2. Run Snippet: Find.
  3. Type your query and hit enter.

Preview

Moving between answers

Sometimes the first answer is not what you're looking for. In that case, use Snippet: Show next answer and Snippet: Show previous answer to show alternative snippets.

Search for snippet based on selected text

  1. Select some text in an editor window.
  2. Right click and choose "Find snippet from selected text"

Preview

Alternatively, you can also run the Snippet: Find Selected Text from the command menu:

Preview

You can configure a keyboard shortcut. By default this is โŒ˜ Command + โ‡ง Shift + s:

Preview

Saving a snippet

  1. Select some text in an editor window.
  2. Right click and choose "Save snippet"
  3. Select a folder for the snippet
  4. Enter a name of the snippet
  5. Press Enter

Preview

Inserting a snippet

  1. Open the Explorer by clicking Ctrl + Shift + E
  2. Open the Snippets section
  3. Click on the snippet that you want to insert

Preview

Creating a folder for the snippets

  1. Open the Snippets section
  2. Click on the + icon (alternatively, you can right click on any snippet or a folder and select "New Folder")
  3. Enter a name of the folder
  4. Press Enter

Preview

Renaming a snippet or a folder

  1. Open the Snippets section
  2. Right click on the snippet or a folder that you want to rename
  3. Select "Rename"
  4. Enter a new name
  5. Press Enter

Preview

Deleting a snippet or a folder

  1. Open the Snippets section
  2. Right click on the snippet or a folder that you want to delete
  3. Select "Delete"
  4. Confirm your choice

Preview

Copying a snippet to the clipboard

  1. Open the Snippets section
  2. Right click on the snippet that you want to copy
  3. Select "Copy"

Moving a snippet or a folder

You can move snippets or folders in the Snippets view by dragging and dropping them

Preview

IntelliSense

Saved snippets are displayed in IntelliSense

Preview

Searching for saved snippets

Preview

Restoring snippets from backups

Restoring with the built-in backup mechanism

vscode-snippet creates backups of your snippets when you delete, rename, move or save snippets. These backups are stored locally on your computer.

To restore a backup:

  1. Open the Snippets section
  2. Click on the History icon icon (alternatively, you can run the "Restore backups" command)
  3. Select one of the backups from the list

Demo of restoring backups

Restoring with the VSCode settings sync

If you have VSCode settings sync enabled, you can restore snippets by using VSCode's built-in backup mechanisms: https://code.visualstudio.com/docs/editor/settings-sync#_restoring-data

Exporting snippets

VSCode stores snippets in the state.vscdb file in a JSON format.

To export the snippets:

  1. Find the state.vscdb file
    • On Ubuntu Linux: ~/.config/Code/User/globalStorage/state.vscdb
    • On Windows: AppData\Roaming\Code\User\globalStorage\state.vscdb
    • On macOS: ~/Library/Application Support/Code/User/globalStorage/state.vscdb
  2. Inspect the content of this file using some tool that can open SQLite files, for example: https://inloop.github.io/sqlite-viewer
    1. On this website, upload the state.vscdb file and run the following command:
    SELECT * FROM 'ItemTable' WHERE key like 'vscode-snippet.snippet'
    SQLite Viewer 2. Then click "Execute". You should get a single row with the key vscode-snippet.snippet and a JSON value. This JSON contains all of your snippets.

Contributing

See CONTRIBUTING.md

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.