VSCode Snippets for Productivity

This repository contains a collection of my personal custom Visual Studio Code snippets designed to improve the productivity of developers. These snippets help you quickly generate common code patterns, allowing you to focus on writing the unique parts of your code.

Installation

To install these snippets, follow these steps:

1. Clone this repository to your local machine.
2. Open Visual Studio Code.
3. Go to File > Preferences > User Snippets.
4. Click on the desired language (e.g., javascript.json for JavaScript) or create a new global snippets file.
5. Copy the contents of the snippet file(s) from this repository and paste them into the appropriate user snippets file in Visual Studio Code.
6. Save the file.

The snippets are now installed and ready to use.

Usage

To use a snippet, follow these steps:

Open a file in Visual Studio Code with a supported language. Type the snippet's prefix and press Enter or Tab. The snippet will be inserted into your code, and you can navigate between tab stops using Tab and Shift+Tab. Replace the placeholders with the desired values

Available Snippets

A list of the available snippets and their descriptions:

1. Print to console
   • Prefix: clg
   • Description: Logs a value to the console
2. Print error
   • Prefix: cler
   • Description: Logs an error to the console
3. Fast arrow
   • Prefix: fa
   • Description: Creates an arrow function
4. Fast return arrow
   • Prefix: far
   • Description: Creates an arrow function with an immediate return
5. Fast handler
   • Prefix: han
   • Description: Creates an event handler arrow function
6. Ternary operator
   • Prefix: ter
   • Description: Inserts a ternary operator expression
7. String interpolation
   • Prefix: si
   • Description: Inserts a template literal expression
8. Export default component
   • Prefix: exd
   • Description: Exports a default component from a file
9. Export default layout component
   • Prefix: exdl
   • Description: Exports a default layout component from a file
10. Export default hook component
    • Prefix: exdh
    • Description: Exports a default hook component from a file
11. Export default nested component
    • Prefix: exdne
    • Description: Exports a default nested component from a file
12. useEffect
    • Prefix: effect
    • Description: Inserts a React useEffect hook
13. useState
    • Prefix: state
    • Description: Inserts a React useState hook
14. React div with class name
    • Prefix: ddiv
    • Description: Inserts a React div element with a class name
15. Component: default
    • Prefix: rfd
    • Description: Creates a React default functional component
16. Component: arrow
    • Prefix: rfa
    • Description: Creates a React arrow functional component
17. Component: arrow, props
    • Prefix: rfap
    • Description: Creates a React arrow functional component with props
18. Component: arrow, type, props
    • Prefix: rfatp
    • Description: Creates a React arrow functional component with type and props (TypeScript)
19. Get async
    • Prefix: getasync
    • Description: Creates an async function to get something with a loading state
20. Fast scss start
    • Prefix: impst
    • Description: Imports main styles and adds a container class in SCSS