Update README.md

README.md

@@ -1,2 +1,90 @@
-# vsc-snippets
-This repository contains a collection of Visual Studio Code snippets designed to help developers enhance their productivity and streamline their workflow
+# 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