Coder Social home page Coder Social logo

snippet-guru's Introduction

Snippet Guru

Snippet Guru is a VS Code extension designed to streamline the process of inserting and managing console logs and other useful snippets for JavaScript, TypeScript, React, React Native, and Gatsby developers.

Snippet Guru Demo

Features

  • Simple Console Log: Quickly insert a simple console log.
  • Styled Console Log: Insert a console log with custom styles.
  • Function Name Console Log: Log messages including the function name.
  • Error and Warning Logs: Easily log errors and warnings.
  • Group and Group Collapsed Logs: Group multiple log messages.
  • Table Log: Display objects in a tabular format.
  • Debugging Logs: Insert debugging-specific log messages.
  • JSON Stringify Logs: Log objects as JSON strings.
  • Component Props and State Logs: Log React component props and state.
  • React Hooks Debug Logs: Insert logs within useEffect and useState hooks.

Example Snippets

Simple Console Log

console.log('${RELATIVE_FILEPATH}:${TM_LINE_NUMBER}', object);

Styled Console Log

console.log('%c${RELATIVE_FILEPATH}:${TM_LINE_NUMBER} ${1:object}', 'color: #007acc; font-weight: bold;', object);

Function Name Console Log

console.log('%c${RELATIVE_FILEPATH}:${TM_LINE_NUMBER} ${TM_CURRENT_FUNCTION} ${1:object}', 'color: #007acc;', object);

Error Console Log

console.error('${RELATIVE_FILEPATH}:${TM_LINE_NUMBER} ${1:error}', error);

Group Console Log

console.group('GroupName');
console.log('${RELATIVE_FILEPATH}:${TM_LINE_NUMBER}', object);
console.groupEnd();

Tip: Many popular extensions utilize animations. This is an excellent way to show off your extension! We recommend short, focused animations that are easy to follow.

Requirements

This extension does not have any specific requirements or dependencies.

Extension Settings

This extension does not contribute any VS Code settings.

Known Issues

No known issues at this time. Please report any issues on the GitHub issues page.

Release Notes

Users appreciate release notes as you update your extension.

1.0.0

Initial release of Snippet Guru.

1.0.1

Fixed minor issues and improved snippets.

1.1.0

Added new logging snippets for React and updated existing ones.

snippet-guru's People

Contributors

bharath529 avatar bharath-bheemireddy avatar

Watchers

 avatar

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.